Диаграммы Ганта Mermaid

Диаграммы Ганта в Mermaid — это быстрый способ визуализировать план работ, итерации, зависимости между задачами и вехи прямо в статье базы знаний FlowEra.

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

gantt
    title Релиз v2.0
    dateFormat YYYY-MM-DD

    section Бэкенд
    API аутентификации    :done, auth, 2024-01-01, 2024-01-07
    WebSocket сервер      :done, ws, 2024-01-06, 5d
    База данных           :active, db, 2024-01-10, 7d

    section Фронтенд
    Дизайн UI             :done, ui, 2024-01-01, 5d
    Компоненты React      :active, react, after ui, 10d
    Интеграция с API      :api-int, after db, 5d

    section QA
    Тестирование          :testing, after api-int, 5d
    Деплой                :milestone, deploy, after testing, 0d

Форматы дат

Формат задаётся директивой dateFormat:

Альтернативно можно использовать относительные длительности: 5d, 2w, 1m.

Типы задач

Комбинируются через запятую: done, crit.

gantt
    title Статусы задач
    dateFormat YYYY-MM-DD

    section Примеры
    Завершено         :done, 2024-01-01, 3d
    В работе          :active, 2024-01-04, 3d
    Критический путь  :crit, 2024-01-07, 3d
    Веха              :milestone, 2024-01-10, 0d
    Обычная задача    :2024-01-11, 3d

Зависимости

Используйте именованные задачи и ключевое слово after:

gantt
    title Зависимости задач
    dateFormat YYYY-MM-DD

    section Backend
    Дизайн API      :done, api-design, 2024-01-01, 2d
    Реализация API  :api-impl, after api-design, 5d
    Тесты API       :api-tests, after api-impl, 2d

    section Frontend
    Компоненты      :fe, after api-design, 7d
    Интеграция      :integration, after api-impl, after fe, 3d

Исключение выходных дней

gantt
    title Sprint 1
    dateFormat YYYY-MM-DD
    excludes weekends

    section Задачи
    Задача A    :2024-01-01, 5d
    Задача B    :after Задача A, 3d

Пример: план итерации

gantt
    title Sprint 23 — Модуль базы знаний
    dateFormat YYYY-MM-DD
    excludes weekends

    section Планирование
    Grooming бэклога        :done, grooming, 2024-03-04, 1d
    Sprint planning         :done, planning, 2024-03-05, 1d

    section Разработка
    Редактор Tiptap         :done, editor, 2024-03-06, 3d
    Mermaid плагин          :done, mermaid, after editor, 2d
    Коллаборация (Y.js)     :active, crit, collab, after mermaid, 4d
    Офлайн-режим            :offline, after collab, 3d

    section QA & Деплой
    Code Review             :cr, after offline, 1d
    QA тестирование         :crit, qa, after cr, 2d
    Деплой на staging       :milestone, staging, after qa, 0d
    Деплой на prod          :milestone, crit, prod, 2024-03-25, 0d

Несколько меток на задаче

gantt
    title Пример меток
    dateFormat YYYY-MM-DD

    section Работы
    Дизайн (Алина)          :done, 2024-01-01, 2d
    Разработка (Иван)       :active, crit, 2024-01-03, 5d
    Ревью (Команда)         :2024-01-08, 2d

Отображение осей

Масштаб оси времени настраивается автоматически в зависимости от диапазона дат. Для коротких диапазонов (дни) отображаются дни недели, для длинных (месяцы) — месяцы.