Шпаргла за mermaid синтаксу

Најкраћи дијаграм који ради

Flowchart-у треба једна линија декларације и једна стрелица. TD значи одозго надоле; за широке процесе боље одговара LR, слева удесно.

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

A, B и C су id-јеви чворова — интерна имена, никад исцртани. Текст у заградама је ознака, а стил заграда бира облик.

Облици чворова

Облик бира пар граничника око ознаке. Ево оних које вреди запамтити:

💡Стављајте ознаку под наводнике када садржи заграде, две тачке или наводнике: A["Load (raw) data"]. Без наводника парсер вашу интерпункцију тумачи као синтаксу.

Стрелице

Дужина стрелице је такође битна: --> је један ниво, ---> гура мету за још један ниво даље. То је најједноставнија контрола распореда коју mermaid нуди.

Груписање подграфовима

subgraph исцртава означени оквир око чворова. Подграфови се могу угнеждивати, а стрелице слободно прелазе њихове границе.

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

Боја и стилови

style боји један чвор. classDef заједно са class боји цео скуп чворова — то вам треба после трећег или четвртог чвора.

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

Боје су део изворног кода дијаграма, па преживљавају извоз и путују заједно са фајлом. Ништа овде не зависи од подешавања теме у алату који то рендерује.

По један пример за сваки тип дијаграма

Sequence дијаграм

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

Дијаграм класа

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

Дијаграм стања

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

Дијаграм веза између ентитета

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

Gantt дијаграм

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

Где се mermaid рендерује сам од себе

• GitHub — блок ограђен са ```mermaid се рендерује у issue-има, pull request-овима, коментарима и README фајловима.
• GitLab — исти такав блок, у issue-има, merge request-овима и wiki-ју.
• Notion — блок кода са језиком постављеним на Mermaid се рендерује поред изворног кода.
• Obsidian — блок ограђен као mermaid се рендерује у режиму прегледа.
• Сајтови за документацију — Docusaurus, MkDocs Material и VitePress подржавају mermaid блокове.

То је прави разлог да дијаграме држите као mermaid, а не као слике: дијаграм живи у истом текстуалном фајлу као и оно што описује, а код-ревју види шта се у њему променило.