Шпаргалка з синтаксису 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

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

Кольори — частина вихідного коду діаграми, тож вони зберігаються при експорті та подорожують разом із файлом. Тут нічого не залежить від налаштувань теми в інструменті, що відображає діаграму.

По одному прикладу на кожен тип діаграми

Діаграма послідовності

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
  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 у потрійних лапках відображається в режимі попереднього перегляду.
• Сайти документації — Docusaurus, MkDocs Material та VitePress підтримують блоки mermaid.

Це справжня причина зберігати діаграми як mermaid, а не як зображення: діаграма живе в тому самому текстовому файлі, що й те, що вона описує, і код-рев'ю бачить, що саме в ній змінилося.