Gå til hovedindhold
LibraTool logoLibraTool

Gratis Mermaid-diagrameditor

Skriv rutediagrammer, sekvensdiagrammer, Gantt-diagrammer og mere i Mermaid-syntaks med liveforhåndsvisning. Eksporter som SVG eller PNG. Kører udelukkende i din browser.

💡 Skriv diagrammer i Mermaid-syntaks — flowdiagrammer, sekvensdiagrammer, Gantt-diagrammer, klassediagrammer og mere — og eksportér som SVG eller PNG. Alt kører i din browser: din diagramtekst bliver aldrig uploadet, og Mermaid-motoren hentes fra dette websted i stedet for fra et tredjeparts-CDN.

Almindelige anvendelser

  • Lav et flowchartOpret et flowchart fra tekst og eksportér det som et billede.
  • Tegn et sekvensdiagramDiagram hvordan systemer eller mennesker interagerer over tid.
  • Tilføj et diagram til en READMEOpret diagrammer som GitHub gengiver naturligt i din README.
  • Byg et Gantt-diagramPræsenter et projekttidsplan som et Gantt-diagram fra tekst.
  • Opret et klassediagramDiagram klasser og deres relationer til softwaredesign.

Sådan fungerer det

Mermaid lader dig skrive diagrammer som tekst og få dem automatisk gengivet — fantastisk til at holde diagrammer i versionskontrol. Dette er en live-editor, der gengivet, når du skriver.

  1. 1
    Mermaid-motoren indlæses
    Mermaid-biblioteket indlæses fra LibraTool, første gang du bruger værktøjet, og derefter cacher din browser det.
  2. 2
    Du skriver diagram-kode
    Flowcharts, sekvensdiagrammer, Gantt-diagrammer, klassediagrammer, cirkeldiagrammer og mere — ved hjælp af Mermaid's tekst-syntaks.
  3. 3
    Det gengivet direkte
    Din kode analyseres og gengivet til et SVG i din browser, når du skriver, med lyst og mørkt tema.
  4. 4
    Eksporter SVG eller PNG
    Hent diagrammet som en skalerbar SVG eller en 2× PNG til at slippe i dokumenter, slides eller en README.

Dit diagram-kode — som kan beskrive interne systemer — gengivet helt i din browser og aldrig uploadet.

Relaterede værktøjer

📝

Markdown-editor

Skriv og forhåndsvis Markdown i realtid. Understøtter overskrifter, fed, kursiv, kodeblokke, tabeller og lister.

Prøv det
🟦

CSS Grid-generator

Design visuelt et CSS-grid — spor, enheder og mellemrum — og kopier det genererede CSS og HTML.

Prøv det
🌳

ASCII-trægenerator

Omdan en indrykket liste til et rent mappetræ (├── └──) til README-filer og dokumentation. Unicode- eller ren ASCII-output. Kører udelukkende i din browser.

Prøv det

Ofte stillede spørgsmål