Jak napsat vývojový diagram Mermaid:směr, uzly a šipky.

Směr

První řádek pojmenuje typ diagramu a směr. Funguje flowchart i starší graph.

• TD nebo TB: shora dolů
• BT: zdola nahoru
• LR: zleva doprava
• RL: zprava doleva

LR zvolte pro krátký proces, který se vejde na šířku stránky, a TD pro delší.

Tvary uzlů

Uzel je identifikátor, za nímž může v závorkách následovat jeho text. Závorky určují tvar:

flowchart LR
    a[Rectangle]
    b(Rounded)
    c([Stadium])
    d[[Subroutine]]
    e[(Database)]
    f((Circle))
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]

Uzel bez závorek zobrazí jen svůj identifikátor. Na uzel se lze později odkázat samotným identifikátorem, takže tvar a text se píšou jen jednou.

Spoje a popisky

Spoje propojují dva uzly. Tvar šipky ukazuje druh spojení:

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F
    F -- text --> G

• --> šipka, --- čára bez hrotu
• -.-> tečkovaná šipka, ==> tlustá
• -->|label| nebo -- label --> dá text na spoj
• A --> B & C spojí jeden uzel s více a A --> B --> C řetězí spoje

Přidáním pomlček spoj prodloužíte, například ---->, když uzel potřebuje víc místa.

Podgrafy

Podgraf seskupí uzly do rámečku s popiskem. Začíná slovem subgraph a končí slovem end:

flowchart TD
    subgraph client [Client]
        A[Browser] --> B[App]
    end
    subgraph server [Server]
        C[API] --> D[(Database)]
    end
    B --> C

Slovo v závorkách je název a slovo před ním je identifikátor, na který se lze odkázat. Podgraf může mít uvnitř vlastní řádek direction LR, ale směr se ignoruje, pokud uzel uvnitř vede ven.

Kompletní příklad

Vše dohromady: malý proces vydání s rozhodnutím, návratem zpět a seskupeným krokem:

flowchart TD
    A([Start]) --> B[Write the change]
    B --> C{Tests pass?}
    C -->|No| B
    C -->|Yes| D[Open a pull request]
    subgraph review [Review]
        D --> E{Approved?}
        E -->|No| B
    end
    E -->|Yes| F[(Merge)]

Čtěte shora: tvar stadionu označuje začátek, kosočtverce jsou otázky, šipky s popisky jsou odpovědi a rámeček kolem dvou uzlů je revize. Když každé rozhodnutí pojmenujete jako otázku a každou šipku jako odpověď, vývojový diagram je srozumitelný bez vysvětlování.

Komentáře a styly

Řádek začínající %% je komentář a nekreslí se. Chcete-li uzly obarvit, definujte třídu a použijte ji:

flowchart TD
    %% the happy path
    A[Start]:::good --> B[Done]:::good
    classDef good fill:#d4f4dd,stroke:#2d7a46

Se styly šetřete. Většina vývojových diagramů se čte lépe s méně barvami a styly mohou ve světlém a tmavém vzhledu vypadat jinak.

Časté chyby

• Slovo end malými písmeny jako text uzlu rozbije diagram. Napište End nebo text dejte do uvozovek.
• Identifikátor uzlu začínající o nebo x hned za spojem, například A---oB, se čte jako spoj s kolečkem nebo křížkem. Přidejte mezeru nebo ho napište velkým písmenem.
• Speciální znaky v popisku. Hranaté a kulaté závorky a dvojtečky potřebují dvojité uvozovky: A["Save (draft)"].
• Chybí první řádek. Bez flowchart TD se nic nenakreslí.
• Příliš mnoho uzlů. Vývojový diagram o třiceti obdélnících se špatně čte. Rozdělte ho nebo použijte podgrafy.

Když diagram selže, Mermaid ukáže chybovou zprávu a text zůstane ve vašem souboru k opravě.

Jak se kreslí

Bloky Mermaid v souborech Markdown kreslí GitHub a také DotMD: offline, ve světlém nebo tmavém vzhledu podle stránky. V editoru příkaz Insert → Diagram vloží do dokumentu funkční vývojový diagram a náhled se při psaní překresluje. Stejný návod pokrývá sekvenční, třídní, stavové, ER i Ganttovy diagramy. Samotnou syntaxi ohraničení najdete v článku bloky kódu v Markdownu.

Otázky k vývojovým diagramům Mermaid

Další otázky