Ťahák syntaxe mermaid

Najkratší diagram, ktorý funguje

Flowchart potrebuje jeden deklaračný riadok a jednu šípku. TD znamená zhora nadol; pre široké procesy sa lepšie hodí LR, teda zľava doprava.

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

A, B a C sú id uzlov — interné názvy, ktoré sa nikdy nevykresľujú. Text v zátvorkách je popisok a štýl zátvoriek určuje tvar.

Tvary uzlov

Tvar sa vyberá podľa páru oddeľovačov okolo popisku. Toto sú tie, ktoré sa oplatí zapamätať:

💡Popisok dajte do úvodzoviek, ak obsahuje zátvorky, dvojbodky alebo úvodzovky: A["Load (raw) data"]. Bez úvodzoviek parser vidí vašu interpunkciu ako syntax.

Šípky

Dĺžka šípky má tiež význam: --> je jedna úroveň, ---> posunie cieľ o úroveň nižšie. Je to najjednoduchšia kontrola rozloženia, akú mermaid ponúka.

Zoskupovanie pomocou podgrafov

subgraph nakreslí označený rámček okolo uzlov. Podgrafy sa dajú vnárať a šípky môžu voľne prechádzať cez ich hranice.

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

Farba a štýlovanie

style vyfarbí jeden uzol. classDef spolu s class vyfarbí celú skupinu, čo sa oplatí od troch či štyroch uzlov vyššie.

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

Farby sú súčasťou zdroja diagramu, takže prežijú export a cestujú so súborom. Nič tu nezávisí od nastavenia témy v nástroji, ktorý ho vykresľuje.

Jeden príklad na 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

Entity relationship diagram

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

Gantt chart

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

Kde sa mermaid vykresľuje sám

• GitHub — ohradený ```mermaid blok sa vykreslí v issues, pull requestoch, komentároch a súboroch README.
• GitLab — rovnaký ohradený blok, v issues, merge requestoch a na wiki.
• Notion — blok kódu s jazykom nastaveným na Mermaid sa vykreslí vedľa zdroja.
• Obsidian — ohradený mermaid blok sa vykreslí v režime náhľadu.
• Dokumentačné stránky — Docusaurus, MkDocs Material aj VitePress podporujú mermaid bloky.

To je skutočný dôvod, prečo držať diagramy ako mermaid namiesto obrázkov: diagram žije v tom istom textovom súbore ako vec, ktorú popisuje, a code review vidí, čo sa v ňom zmenilo.