mermaid.md

$ cat mermaid.md

2025-11-105 min čteníMermaid · AI · Dokumentace

Ať to nakreslí LLM: generování Mermaid diagramů pomocí AI

Kreslím hodně diagramů. Ne proto, že bych kreslení miloval, ale protože živím se integrací systémů a nejrychlejší způsob, jak nějaký systém pochopit, je vidět jeho tvar. S diagramy byl ale vždycky stejný problém: nástroj. Otevřete nějakou kreslicí appku, taháte boxy, perete se s automatickým rozložením a po dvaceti minutách máte obrázek, který zastará ve chvíli, kdy zavřete záložku. Prakticky jsem je přestal dělat.

Pak jsem změnil jednu věc. Místo kreslení popisuju a diagram jako text napíše LLM. Formátem je Mermaid a tahle kombinace se nenápadně stala jedním z mých nejoblíbenějších využití AI. Žádný hype, prostě reálná úspora času.

Co Mermaid vlastně je

Mermaid je nástroj na diagramy jako kód. Napíšete pár řádků textu ve stylu Markdownu a renderer z nich udělá diagram. To je celé. Flowchart vypadá takhle:

flowchart LR
    A[Uživatel] --> B{Přihlášen?}
    B -->|ano| C[Dashboard]
    B -->|ne| D[Login]
    D --> B

Pokryje většinu toho, co se v softwarové dokumentaci objevuje: flowcharty, sekvenční diagramy, class diagramy, stavové automaty, ER diagramy, k tomu Ganttovy diagramy, koláčové grafy, user journeys, mindmapy a pár dalších. Prvních pět používám denně.

Co tomu dává smysl: vykreslí se skoro všude, kde vývojáři už tak pracují. GitHub a GitLab renderují Mermaid nativně v Markdown souborech, issues, pull requestech i ve wiki. Notion, Obsidian a náhled Markdownu ve VS Code taky. K rychlému ověření je v prohlížeči zdarma Mermaid Live Editor. Text napíšete jednou a objeví se jako skutečný obrázek tam, kde to tým stejně čte.

Proč to LLM tak sedne

Tady je věc, kterou lidi přehlížejí. Model neumí kreslit. Neumí chytit box ani posunout šipku. Jenže Mermaid není kreslení, je to psaní, a psát strukturovaný text je přesně to, v čem je LLM dobré.

Celá ta otravná část diagramování, tedy ruční rozložení, prostě zmizí. Nechci obrázek, chci text, který se stane obrázkem. A ten text má všechny vlastnosti, které potřebuju:

Jak to reálně používám

Dva směry a oba používám pořád.

Z popisu, na přemýšlení. Když promýšlím, jak má nějaký systém zapadnout dohromady, proberu to s modelem a poprosím o Mermaid flowchart nebo sekvenční diagram toho, co jsme zrovna řešili. Jakmile to vidím vykreslené, hned vyplavou díry. Šipka mířící obráceně, chybějící chybová větev, box, který dělá dvě věci a měl by být dva boxy. Diagram tady není výstup, je to nástroj na myšlení, který je teď zadarmo.

Z existujícího kódu, na dokumentaci. Tohle je větší výhra. Ukážu modelu kus kódu, route handler, stavový automat, sadu databázových modelů, a nechám ho vytvořit odpovídající diagram. Sekvenční diagram z API flow. ER diagram ze schématu. Stavový diagram ze status enumu a jeho přechodů. Je to vážně rychlé, když chci čitelnou mapu něčeho, co jsem zdědil nebo napsal před půl rokem a napůl zapomněl.

Jedna poctivá výhrada: model může detaily splést, hlavně u většího nebo nepřehledného kódu. Takže s prvním výstupem zacházím jako s návrhem, ne jako se zdrojem pravdy. Přečtu si ho proti kódu, opravím řádky, které sedí špatně, a teprve pak ho commitnu. Vykreslení tu hodně pomáhá, protože špatný diagram většinou i vypadá špatně, takže kontrola je rychlá.

Proč u toho zůstávám

Skutečný posun není v tom, že AI kreslí hezké obrázky. Je v tom, že cena diagramu spadla skoro na nulu, takže je dělám i tam, kde bych je dřív odflákl. Rychlý náčrt, abych se sladil s kolegou. Diagram v README, aby další člověk nemusel reverzně luštit, jak funguje přihlášení. Stavový automat, který nakreslím jen proto, abych si ověřil vlastní úvahu.

Diagramy jako text byly dobrý nápad už předtím. Až jejich spojení s modelem, který plynule píše text, mě donutilo dělat je ve výchozím stavu. Pokud jste se diagramům vyhýbali kvůli otravným nástrojům, nástroj už není ta překážka.

zpět na blog