Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis Mermaid-diagramredigerare

Skriv flödesscheman, sekvensdiagram, Gantt-diagram och mer i Mermaid-syntax med liveförhandsvisning. Exportera som SVG eller PNG. Körs helt i din webbläsare.

💡 Skriv diagram med Mermaid-syntax — flödesscheman, sekvensdiagram, Gantt-scheman, klassdiagram och mer — och exportera som SVG eller PNG. Allt körs i din webbläsare: din diagramtext laddas aldrig upp, och Mermaids renderingsmotor levereras från den här webbplatsen i stället för från ett tredjeparts-CDN.

Vanliga användningar

  • Gör ett flödesschemaSkapa ett flödesschema från text och exportera det som en bild.
  • Rita ett sekvensdiagramDiagram hur system eller människor interagerar över tid.
  • Lägg ett diagram i en READMESkapa diagram som GitHub återger naturligt i din README.
  • Bygg ett Gantt-schemaPresentera en projekttidslinje som ett Gantt-schema från text.
  • Skapa ett klassdiagramDiagram klasser och deras relationer för mjukvarudesign.

Så här fungerar det

Mermaid låter dig skriva diagram som text och få dem renderade automatiskt — bra för att hålla diagram i versionskontroll. Detta är en live-redaktör som renderar när du skriver.

  1. 1
    Mermaid-motorn läses in
    Mermaid-biblioteket laddas från LibraTool första gången du använder verktyget och cachas sedan av webbläsaren.
  2. 2
    Du skriver diagramkod
    Flödesscheman, sekvensdiagram, Gantt-schema, klassdiagram, cirkeldiagram och mer — använder Mermaid:s textsyntax.
  3. 3
    Det renderas live
    Din kod tolkas och renderas till en SVG i din webbläsare när du skriver, med ljusa och mörka teman.
  4. 4
    Exportera SVG eller PNG
    Ladda ned diagrammet som en skalbar SVG eller en 2× PNG för att släppa i dokument, bilder eller en README.

Din diagramkod — som kan beskriva interna system — renderas helt i din webbläsare och laddas aldrig upp.

Relaterade verktyg

📝

Markdown-redigerare

Skriv och förhandsgranska Markdown i realtid. Stöder rubriker, fetstil, kursiv stil, kodblock, tabeller och listor.

Prova det
🟦

CSS Grid-generator

Designa visuellt ett CSS-rutnät — spår, enheter och gap — och kopiera den genererade CSS och HTML.

Prova det
🌳

ASCII-trädgenerator

Omvandla en indragslista till ett rent mappträd (├── └──) för README och dokumentation. Unicode- eller ren ASCII-utdata. Körs helt i din webbläsare.

Prova det

Vanliga frågor