Slaan oor na hoofinhoud
LibraTool logoLibraTool

Gratis Mermaid-diagramredigeerder

Skryf vloeidiagramme, volgordediagramme, Gantt-kaarte en meer in Mermaid-sintaksis met 'n lewendige voorskou. Voer uit as SVG of PNG. Loop volledig in jou blaaier.

💡 Skryf diagramme in Mermaid-sintaksis — vloeidiagramme, volgordediagramme, Gantt-kaarte, klasdiagramme en meer — en voer uit as SVG of PNG. Alles loop in jou blaaier: jou diagramteks word nooit opgelaai nie, en die Mermaid-enjin word vanaf hierdie webwerf bedien in plaas van 'n derdeparty-CDN.

Algemene gebruike

  • Maak 'n vloeidiagramSkep 'n vloeidiagram vanuit teks en voer dit uit as 'n beeld.
  • Teken 'n volgordediagramDiagram hoe stelsels of mense oor tyd interaksie.
  • Voeg 'n diagram by READMESkep diagramme wat GitHub inheems in jou README vertoon.
  • Bou 'n Gantt-grafiekStel 'n tydlyn van die projek as 'n Gantt-grafiek vanuit teks.
  • Skep 'n klasdiagramDiagram klasse en hul verhoudings vir programmatuur-ontwerp.

Hoe dit werk

Mermaid laat jou diagram's as teks skryf en het hulle outomaties gerenderd — goed vir diagram's in weergawekontrolle. Hierdie is 'n lewendige redaksie wat terwyl jy tik rendeer.

  1. 1
    Die Mermaid-enjin laai
    Die Mermaid-biblioteek laai van LibraTool af die eerste keer dat jy die hulpmiddel gebruik, en dan kas jou blaaier dit.
  2. 2
    Jy skryf diagram-kode
    Blomdiagramme, opeenvolging-diagramme, Gantt-kaarte, klas-diagramme, pie-kaarte en meer — deur Mermaid se teks-sintaks te gebruik.
  3. 3
    Dit rendeer lewend
    Jou kode word ontleed en in jou blaaier na 'n SVG gerenderd terwyl jy tik, met lig en donker-temas.
  4. 4
    Voer SVG of PNG uit
    Laai die diagram as 'n skaalbare SVG of 'n 2× PNG af om in dokumente, skyfies of 'n README te laat val.

Jou diagram-kode — wat interne stelsels kan beskryf — word heeltemal in jou blaaier gerenderd en nooit opgelaai nie.

Verwante gereedskap

📝

Markdown-redakteur

Skryf en voorbeskou Markdown intyds. Ondersteun opskrifte, vetdruk, kursief, kodeblokke, tabelle en lyste.

Probeer dit
🟦

CSS Grid-kragopwekker

Ontwerp 'n CSS-rooster visueel — spore, eenhede en gate — en kopieer die gegenereerde CSS en HTML.

Probeer dit
🌳

ASCII-boomgenereerder

Skakel 'n ingespronge lys om na 'n skoon gidsboom (├── └──) vir README's en dokumentasie. Unicode- of gewone ASCII-uitvoer. Loop volledig in jou blaaier.

Probeer dit

Gereelde vrae