Preskočiť na hlavný obsah
LibraTool logoLibraTool

Editor diagramov Mermaid zadarmo

Píšte vývojové diagramy, sekvenčné diagramy, Ganttove grafy a ďalšie v syntaxi Mermaid so živým náhľadom. Exportujte ako SVG alebo PNG. Beží výlučne vo vašom prehliadači.

💡 Píšte diagramy v syntaxi Mermaid — vývojové diagramy, sekvenčné diagramy, Ganttove diagramy, diagramy tried a ďalšie — a exportujte ich ako SVG alebo PNG. Všetko beží vo vašom prehliadači: text diagramu sa nikdy nenahráva a vykresľovací engine Mermaid sa načítava z tejto stránky, nie z cudzieho CDN.

Bežné použitia

  • Vytvorte vývojový diagramVytvorte vývojový diagram z textu a exportujte ho ako obrázok.
  • Nakreslite sekvenčný diagramDiagramovať, ako spolu systémy alebo ľudia komunikujú v čase.
  • Pridajte diagram do READMEVytvorte diagramy, ktoré GitHub natívne renderuje vo vašom README.
  • Vytvorte Ganttov grafRozložte časovú os projektu ako Ganttov graf z textu.
  • Vytvorte diagram triedyDiagramovať triedy a ich vzťahy na návrh softvéru.

Ako to funguje

Mermaid vám umožňuje napísať diagramy ako text a necháte ich automaticky vykresliť — skvelé na udržiavanie diagramov v kontrole verzií. Toto je živý editor, ktorý sa vykresľuje, ako píšete.

  1. 1
    Engine Mermaid sa načíta
    Knižnica Mermaid sa načíta z LibraTool pri prvom použití nástroja a potom ju prehliadač uloží do vyrovnávacej pamäte.
  2. 2
    Napíšete kód diagramu
    Vývojové diagramy, sekvenčné diagramy, Ganttove grafy, triedne diagramy, koláčové grafy a ďalšie — pomocou textovej syntaxe Mermaid.
  3. 3
    Vykresľuje sa živě
    Váš kód sa analyzuje a vykresľuje na SVG vo vašom prehliadači pri písaní, so svetlou a tmavou témou.
  4. 4
    Exportujte SVG alebo PNG
    Stiahnutie diagramu ako škálovateľný SVG alebo 2× PNG na vrh do docs, slides alebo README.

Váš kód diagramu — ktorý môže popisovať interné systémy — sa vykresľuje úplne vo vašom prehliadači a nikdy sa nenahrá.

Súvisiace nástroje

📝

Editor Markdown

Píšte a prezerajte Markdown v reálnom čase. Podporuje nadpisy, tučné, kurzívu, bloky kódu, tabuľky a zoznamy.

Vyskúšajte
🟦

Generátor CSS mriežky

Vizuálne navrhujte CSS mriežku — stopy, jednotky a medzery — a skopírujte vygenerovaný CSS a HTML.

Vyskúšajte
🌳

Generátor ASCII stromu

Zmeňte odsadený zoznam na prehľadný strom priečinkov (├── └──) pre README a dokumentáciu. Výstup v Unicode alebo čistom ASCII. Beží výlučne vo vašom prehliadači.

Vyskúšajte

Často kladené otázky