Просмотрщик диаграмм Mermaid

Девять типов диаграмм с первого взгляда

Быстрый старт с блок-схемой

flowchart LR
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great]
    B -- No --> D[Debug]
    D --> B

Ключевые слова направления: TD сверху вниз, LR слева направо, RL справа налево, BT снизу вверх.

Формы узлов: [rect] прямоугольник, (rounded) со скругленными углами, {diamond} ромб, ((circle)) круг, >flag] флаг, [[subroutine]] подпрограмма.

Быстрый старт с диаграммой последовательности

sequenceDiagram
    participant U as User
    participant API
    participant DB
    U->>API: POST /login
    API->>DB: SELECT user
    DB-->>API: record
    API-->>U: 200 + token

->>, сплошная стрелка (запрос), -->>, пунктирная (ответ). participant X as Label назначает короткому имени отображаемую метку.

Частые ошибки

• Нет переноса строки после открывающего ключевого слова. Первая строка должна содержать только flowchart TD или другое открывающее слово, отдельно от остального кода.
• Зарезервированные символы в метках узлов. Круглые и квадратные скобки, а также кавычки внутри метки нужно экранировать или заключить метку в двойные кавычки: A["Node (v2)"].
• Нотация диаграммы классов. Префиксы +public, -private, #protected, ~package; стереотип <<interface>>; <|-- наследование, *-- композиция, o-- агрегация.
• Формат даты в диаграмме Ганта. По умолчанию YYYY-MM-DD; если у вас другой формат, укажите вверху строку dateFormat YYYY-MM-DD.

Где Mermaid действительно отрисовывается

• GitHub отрисовывает блоки кода с меткой mermaid в задачах, пул-реквестах и README.md.
• GitLab тоже: нативная поддержка с 2022 года.
• MkDocs с плагином pymdown-extensions.
• Docusaurus и Hugo через плагины.
• Obsidian со встроенным отрисовщиком.
• VS Code с расширением для предпросмотра Mermaid.