Přeskočit na hlavní obsah
LibraTool logoLibraTool

Editor diagramů Mermaid zdarma

Pište vývojové diagramy, sekvenční diagramy, Ganttovy diagramy a další v syntaxi Mermaid s živým náhledem. Exportujte jako SVG nebo PNG. Běží zcela ve vašem prohlížeči.

💡 Pište diagramy v syntaxi Mermaid — vývojové diagramy, sekvenční diagramy, Ganttovy diagramy, diagramy tříd a další — a exportujte je jako SVG nebo PNG. Vše běží ve vašem prohlížeči: text diagramu se nikdy nikam nenahrává a vykreslovací engine Mermaid se načítá z tohoto webu, ne z cizí CDN.

Běžná použití

  • Vytvořit vývojový diagramVytvořte vývojový diagram z textu a exportujte jej jako obrázek.
  • Nakreslit diagram sekvenceDiagram, jak systémy nebo lidé interagují v průběhu času.
  • Přidat diagram do READMEVytvořte diagramy, které GitHub nativně vykresluje ve vašem README.
  • Vytvořit Ganttův diagramVytvořte časový plán projektu jako Ganttův diagram z textu.
  • Vytvořit diagram třídDiagram tříd a jejich vztahů pro návrh softwaru.

Jak to funguje

Mermaid vám umožňuje psát diagramy jako text a nechat je automaticky vykreslovat — skvělé pro uchovávání diagramů v kontrole verzí. Toto je živý editor, který se vykresluje během psaní.

  1. 1
    Engine Mermaid se načte
    Knihovna Mermaid se načte z LibraTool při prvním použití nástroje a pak ji prohlížeč uloží do mezipaměti.
  2. 2
    Napíšete kód diagramu
    Vývojové diagramy, sekvenční diagramy, Ganttovy grafy, diagramy tříd, koláčové grafy a další — pomocí syntaxe textu Mermaid.
  3. 3
    Vykresluje se živě
    Váš kód je analyzován a vykreslen na SVG v prohlížeči během psaní, se světlými a tmavými motivy.
  4. 4
    Exportujte SVG nebo PNG
    Stáhněte diagram jako škálovatelné SVG nebo 2× PNG a vložte do dokumentů, slidů nebo README.

Váš kód diagramu — který může popisovat interní systémy — se vykresluje zcela v prohlížeči a nikdy se nenahraje.

Související nástroje

📝

Editor Markdownu

Pište a prohlížejte si Markdown v reálném čase. Podporuje nadpisy, tučné písmo, kurzívu, bloky kódu, tabulky a seznamy.

Vyzkoušet
🟦

Generátor CSS Grid

Vizuálně navrhněte CSS grid — stopy, jednotky a mezery — a zkopírujte vygenerovaný CSS a HTML.

Vyzkoušet
🌳

Generátor ASCII stromu

Převeďte odsazený seznam na přehledný strom složek (├── └──) pro soubory README a dokumentaci. Výstup v Unicode nebo prostém ASCII. Běží zcela ve vašem prohlížeči.

Vyzkoušet

Časté dotazy