Блок-схемы Mermaid

Блок-схемы (flowcharts) — самый универсальный тип диаграмм в Mermaid. Они подходят для описания процессов, алгоритмов, пайплайнов и любых последовательностей шагов с условиями.

Базовый синтаксис

Блок-схема начинается с ключевого слова graph или flowchart, после которого указывается направление:

graph TD
    A[Начало] --> B[Шаг 1]
    B --> C{Условие?}
    C -- Да --> D[Шаг 2]
    C -- Нет --> E[Конец]
    D --> E

Направления

graph LR
    A[Вход] --> B[Обработка] --> C[Выход]

Формы узлов

Форма узла определяет его тип и задаётся скобками вокруг текста:

graph TD
    A[Прямоугольник]
    B(Скруглённый)
    C{Ромб — условие}
    D[(Цилиндр — БД)]
    E((Круг))
    F>Флаг]
    G[/Параллелограмм/]
    H[\Обратный параллелограмм\]
    I{{Шестиугольник}}
    J[["Подпрограмма"]]

Типы связей

graph LR
    A -->|Стрелка с текстом| B
    C --- D
    E -.->|Пунктир| F
    G ==>|Жирная| H
    I --o J
    K --x L
    M <--> N

Текст на связи добавляется через |текст| или -- текст -->:

graph TD
    A -->|успех| B
    A -- ошибка --> C

Подграфы

Для группировки узлов используйте subgraph:

graph TD
    subgraph Фронтенд
        A[React App] --> B[API Client]
    end

    subgraph Бэкенд
        C[Go Handler] --> D[(PostgreSQL)]
    end

    B --> C

Подграфы также поддерживают направление:

graph LR
    subgraph top["Верхний уровень"]
        direction TB
        A --> B
        B --> C
    end
    top --> D

Стили узлов

Стили назначаются через style или через классы:

graph TD
    A[Успех]:::success
    B[Ошибка]:::error
    C[Процесс]

    classDef success fill:#22c55e,stroke:#16a34a,color:#fff
    classDef error fill:#ef4444,stroke:#dc2626,color:#fff

    A --> C --> B

Также можно задать стиль конкретному узлу:

graph LR
    A[Важный узел] --> B[Обычный]
    style A fill:#4f6ef7,stroke:#3b5bdb,color:#fff,stroke-width:2px

Пример: процесс деплоя

graph TD
    DEV[👨‍💻 Разработка] --> PR[Pull Request]
    PR --> CI{CI Pipeline}
    CI -- Падение --> DEV
    CI -- Успех --> REVIEW[Code Review]
    REVIEW -- Замечания --> DEV
    REVIEW -- Одобрен --> MERGE[Мерж в main]
    MERGE --> BUILD[Build]
    BUILD --> STAGING[Staging]
    STAGING --> QA{QA проверка}
    QA -- Баги --> DEV
    QA -- ОК --> PROD[🚀 Production]

    style PROD fill:#22c55e,color:#fff,stroke:#16a34a
    style DEV fill:#4f6ef7,color:#fff,stroke:#3b5bdb

Ссылки в узлах

Узлы можно сделать кликабельными:

graph LR
    A[Документация] --> B[API Reference]
    click A href "/docs" "Открыть документацию"
    click B href "/docs/api" "Открыть API"

Emoji и Unicode

Mermaid поддерживает emoji прямо в тексте узлов:

graph LR
    A[🚀 Деплой] --> B[✅ Готово]
    A --> C[❌ Ошибка]
    C --> D[🔄 Retry]
    D --> A