Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis Mermaid-diagramredigerer

Skriv flytdiagrammer, sekvensdiagrammer, Gantt-diagrammer og mer i Mermaid-syntaks med direkteforhåndsvisning. Eksporter som SVG eller PNG. Kjører helt i nettleseren.

💡 Skriv diagrammer med Mermaid-syntaks — flytdiagrammer, sekvensdiagrammer, Gantt-diagrammer, klassediagrammer og mer — og eksporter som SVG eller PNG. Alt kjører i nettleseren din: diagramteksten lastes aldri opp, og Mermaid-motoren serveres fra dette nettstedet i stedet for et tredjeparts-CDN.

Vanlige bruksområder

  • Lag et flytskjemaLag et flytskjema fra tekst og eksporter det som et bilde.
  • Tegn et sekvensdiagramDiagram hvordan systemer eller mennesker samhandler over tid.
  • Legg til et diagram i en READMELag diagrammer som GitHub gjengivelse naturlig i README-en din.
  • Bygg et Gantt-diagramPresenter en prosjekttidslinje som et Gantt-diagram fra tekst.
  • Lag et klassediagramDiagram klasser og deres relasjoner for programvaredesign.

Hvordan det fungerer

Mermaid lar deg skrive diagrammer som tekst og få dem gjengitt automatisk — flott for å holde diagrammer i versjonskontroll. Dette er en sanntidsredigerer som gjengir mens du skriver.

  1. 1
    Mermaid-motoren laster
    Mermaid-biblioteket lastes fra LibraTool første gang du bruker verktøyet, og deretter mellomlagrer nettleseren det.
  2. 2
    Du skriver diagramkode
    Flytskjemaer, sekvensdiagrammer, Gantt-diagrammer, klassediagrammer, sektordiagrammer og mer — med Mermaids tekstsyntaks.
  3. 3
    Den gjengis direkte
    Koden tolkes og gjengis som en SVG i nettleseren mens du skriver, med lyst og mørkt tema.
  4. 4
    Eksporter SVG eller PNG
    Last ned diagrammet som en skalerbar SVG eller en 2× PNG for å sette inn i dokumenter, lysbilder eller en README.

Diagramkoden — som kan beskrive interne systemer — blir gjengitt helt i nettleseren og aldri lastet opp.

Relaterte verktøy

📝

Markdown-redigerer

Skriv og forhåndsvis Markdown i sanntid. Støtter overskrifter, fet, kursiv, kodeblokker, tabeller og lister.

Prøv det
🟦

CSS Grid-generator

Utform et CSS-rutenett visuelt — spor, enheter og mellomrom — og kopier den genererte CSS og HTML.

Prøv det
🌳

ASCII-trestruktur-generator

Gjør en innrykket liste om til en ryddig mappestruktur (├── └──) for README-filer og dokumentasjon. Unicode- eller ren ASCII-utdata. Kjører helt i nettleseren.

Prøv det

Ofte stilte spørsmål