Синтаксис на mermaid — пълна справка с примери

Най-кратката работеща диаграма

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

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

A, B и C са идентификатори на възли — вътрешни имена, които никога не се изобразяват. Текстът в скобите е етикетът, а стилът на скобите избира формата.

Форми на възлите

Формата се избира чрез двойката разделители около етикета. Тези си струва да се запомнят:

💡Постави етикета в кавички, когато съдържа скоби, двоеточия или кавички: 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

Class диаграма

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

State диаграма

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

Entity relationship диаграма

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 блок се изобразява в issues, pull requests, коментари и README файлове.
• GitLab — същият фенсиран блок, в issues, merge requests и уикито.
• Notion — код блок с език, зададен на Mermaid, се изобразява до изходния код.
• Obsidian — фенсиран mermaid блок се изобразява в режим на преглед.
• Docs сайтове — Docusaurus, MkDocs Material и VitePress поддържат mermaid блокове.

Това е истинската причина диаграмите да остават mermaid, а не изображения: диаграмата живее в същия текстов файл като нещото, което описва, а code review може да види какво точно се е променило в нея.