Mermaid syntaxe: tahák

Nejkratší diagram, který funguje

Flowchart potřebuje jeden deklarační řádek a jednu šipku. TD znamená shora dolů; pro širší procesy se hodí LR, zleva doprava.

flowchart TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A

A, B a C jsou id uzlů — interní jména, která se nikdy nevykreslí. Text v hranatých závorkách je popisek a styl závorek určuje tvar.

Tvary uzlů

Tvar se volí podle páru oddělovačů kolem popisku. Tyhle stojí za zapamatování:

💡Popisek uzavřete do uvozovek, obsahuje-li závorky, dvojtečky nebo uvozovky: A["Load (raw) data"]. Bez uvozovek parser interpunkci vyhodnotí jako syntaxi.

Šipky

Délka šipky má také význam: --> je jedna úroveň, ---> posune cíl o úroveň dál. Je to nejjednodušší způsob, jak mermaid ovlivnit rozvržení.

Seskupování přes subgraph

subgraph nakreslí kolem uzlů popsaný rámeček. Podgrafy lze vnořovat a šipky mohou volně křížit jejich hranice.

flowchart LR
  subgraph api["API"]
    H[Handler] --> S[(Postgres)]
  end
  subgraph worker["Worker"]
    Q[Queue] --> W[Job]
  end
  H --> Q

Barvy a styly

style obarví jeden uzel. classDef spolu s class obarví celou skupinu, což se hodí nad tři čtyři uzly.

flowchart TD
  A[OK] --> B[Failed]
  style A fill:#16a34a,stroke:#333,color:#fff
  classDef bad fill:#dc2626,stroke:#333,color:#fff
  class B bad

Barvy jsou součástí zdroje diagramu, takže přežijí export a putují se souborem. Nic tu nezávisí na nastavení motivu v nástroji, který diagram vykresluje.

Jeden příklad pro každý typ diagramu

Sekvenční diagram

sequenceDiagram
  participant User
  participant API
  participant DB
  User->>API: request
  API->>DB: query
  DB-->>API: rows
  API-->>User: response

Class diagram

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

State diagram

stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  Running --> Idle: stop
  Running --> [*]: finish

ER diagram

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    string name
    string email
  }

Gantt diagram

gantt
  title Project
  dateFormat YYYY-MM-DD
  section Phase 1
  Task 1 :a1, 2026-01-01, 5d
  Task 2 :after a1, 5d

Kde se mermaid vykresluje sám od sebe

• GitHub — blok ```mermaid v uvozovkách se vykreslí v issues, pull requestech, komentářích i README souborech.
• GitLab — stejný blok, v issues, merge requestech i na wiki.
• Notion — kódový blok s jazykem nastaveným na Mermaid se vykreslí vedle zdroje.
• Obsidian — mermaid blok v uvozovkách se vykreslí v náhledu.
• Dokumentační weby — Docusaurus, MkDocs Material i VitePress podporují mermaid bloky.

To je ten skutečný důvod, proč diagramy uchovávat jako mermaid místo obrázků: diagram žije ve stejném textovém souboru jako věc, kterou popisuje, a code review v něm vidí, co se změnilo.