Редактор диаграмм Ганта Mermaid
Диаграмма Ганта раскладывает работу по календарю: что и когда идёт, что пересекается и что не может начаться, пока не закончится другое. Берите её, когда суть — сроки и зависимости. Если нужен только порядок, а не даты, блок-схема легче и не протухает, как только план поедет.
План релиза с зависимостями и вехой
Диаграммой Ганта, а не картинкой из полосок, это делает `after a1`: зависимость объявлена, поэтому сдвиг первой задачи тянет за собой всё, что идёт следом. Веха отмечает фиксированную дату, которая не занимает времени.
gantt
title Релиз 2.4
dateFormat DD.MM.YYYY
axisFormat %d.%m
excludes weekends
section Разработка
Контракт API :done, a1, 12.01.2026, 10d
Реализация :active, a2, after a1, 20d
Внутреннее тестирование : a3, after a2, 8d
section Выпуск
Обкатка на стенде : b1, after a3, 5d
Решение о выпуске :milestone, m1, after b1, 0d
Выкатка в продакшн :crit, b2, after m1, 3dРазобранные примеры
1. Минимальная корректная диаграмма
`dateFormat` говорит Mermaid, как ЧИТАТЬ написанные вами даты; `axisFormat` управляет тем, как они ПОКАЗАНЫ на оси. Это разные настройки, и путаница между ними — главное разочарование при работе с Гантом.
gantt
title Спринт 14
dateFormat DD.MM.YYYY
section Работа
Сделать поиск :02.03.2026, 10d2. Идентификаторы задач и зависимости
Идентификатор у задачи позволяет следующим писать `after <id>`. Как только зависимости объявлены, вы меняете дату старта в одном месте, и остальной план подтягивается сам.
gantt
title Миграция данных
dateFormat DD.MM.YYYY
section Подготовка
Аудит схемы :a1, 02.02.2026, 5d
Написать маппинги :a2, after a1, 8d
section Выполнение
Репетиция :a3, after a2, 3d
Переключение :a4, after a3, 1d3. Ключевые слова состояния
`done`, `active` и `crit` меняют то, как рисуется полоса. Это самый дешёвый способ заставить диаграмму отвечать на вопрос «где мы сейчас», а не только «каков был план».
gantt
title Платформа, первый квартал
dateFormat DD.MM.YYYY
section Инфраструктура
Чистка Terraform :done, t1, 12.01.2026, 12d
Обновление Kubernetes :active, t2, 26.01.2026, 15d
Разбор расходов : t3, after t2, 5d
section Безопасность
Аудит зависимостей :crit, s1, 19.01.2026, 6d4. Вехи
Веха — это точка, а не отрезок: дайте ей `0d`. Используйте их для дат, которые задаёт что-то вне проекта: конференция, срок по договору, заморозка кода.
gantt
title План запуска
dateFormat DD.MM.YYYY
section Разработка
Заморозка функциональности :milestone, m1, 01.04.2026, 0d
Отлов ошибок : e1, 01.04.2026, 5d
Ветка релиза :milestone, m2, after e1, 0d
section Коммуникации
Снятие эмбарго для прессы :milestone, m3, 15.04.2026, 0d5. Исключение выходных и праздников
`excludes weekends` не даёт длительностям считать субботу и воскресенье, так что задача на 10 дней занимает две рабочие недели, а не заканчивается посреди выходных. Праздники исключаются по одной дате — для России это принципиально: майские и новогодние каникулы иначе съезжают весь план.
gantt
title Ввод нового сервиса
dateFormat DD.MM.YYYY
excludes weekends, 01.05.2026, 09.05.2026, 12.06.2026
section Развёртывание
Подготовить инфраструктуру :p1, 06.05.2026, 5d
Настроить CI/CD :p2, after p1, 5d
section Передача
Регламент и обучение :p3, after p2, 4dСправочник синтаксиса диаграммы Ганта
Из шести типов Гант самый строгий в одном месте — строке задачи — и самый снисходительный во всём остальном. Именно поэтому так много ошибок в нём проходит молча.
| Синтаксис | Значение |
|---|---|
| gantt | Открывает диаграмму. |
| title Текст | Заголовок диаграммы. |
| dateFormat DD.MM.YYYY | Как РАЗБИРАТЬ написанные вами даты. |
| dateFormat YYYY-MM-DD | Формат ISO, используется по умолчанию. |
| axisFormat %d.%m | Как ПОКАЗЫВАТЬ даты на оси. Настройка, отличная от dateFormat. |
| excludes weekends | Не считать субботы и воскресенья в длительностях. |
| excludes 09.05.2026 | Исключить конкретную дату. Так убираются праздники. |
| section Название | Группирует задачи в подписанную полосу. |
| Задача :id, 01.01.2026, 10d | Задача с явным началом и длительностью. |
| Задача :id, after другая, 10d | Задача, стартующая по завершении `другой`. |
| Задача :done, id, ... | Завершена — рисуется приглушённо. |
| Задача :active, id, ... | В работе — рисуется с подсветкой. |
| Задача :crit, id, ... | Критическая — рисуется акцентным цветом. |
| Название :milestone, id, дата, 0d | Момент времени, а не отрезок. |
| 10d / 3w / 2h | Длительность в днях, неделях, часах. Единица обязательна. |
Шесть ошибок Ганта — и только одна из них ошибка
Именно этим Гант отличается от остальных пяти типов. Воспроизведено на Mermaid 11.12.2: ровно одна из шести ниже останавливает отрисовку. Остальные пять дают вполне правдоподобный и при этом неверный график — а это куда опаснее, потому что диаграмму, которая нарисовалась, никто не перепроверяет.
Что вы видите
Parse error, заканчивается на: Expecting 'taskData', got 'NL'
Почему
Строка задачи без двоеточия. Двоеточие отделяет отображаемое название от данных, и без него разбирать нечего. Это единственная ошибка в списке, которую Mermaid отвергает прямо.
Решение
Поставьте двоеточие между названием и идентификатором.
gantt
dateFormat DD.MM.YYYY
section Работа
Проектирование a1, 12.01.2026, 5dgantt
dateFormat DD.MM.YYYY
section Работа
Проектирование :a1, 12.01.2026, 5dЧто вы видите
Диаграмма рисуется, но даты уезжают на два месяца назад
Почему
Это специфическая для нас ошибка и самая дорогая в списке. Мы пишем даты как 01.03.2026, имея в виду 1 марта, но `dateFormat` по умолчанию — `YYYY-MM-DD`, и дату с разделителями Mermaid разбирает на американский манер, месяцем вперёд. Измерено: `01.03.2026` при `dateFormat YYYY-MM-DD` ставит задачу на 3 января. Ни предупреждения, ни ошибки — график получается красивый и смещённый на два месяца.
Решение
Объявите `dateFormat DD.MM.YYYY` и пишите даты так, как привыкли. Проверено: с этим форматом `01.03.2026` попадает ровно на 1 марта.
gantt
dateFormat YYYY-MM-DD
section S
Проектирование :a1, 01.03.2026, 10dgantt
dateFormat DD.MM.YYYY
section S
Проектирование :a1, 01.03.2026, 10dЧто вы видите
Диаграмма рисуется, но ось внезапно растягивается на много месяцев
Почему
`after` указывает на несуществующий идентификатор — обычно опечатка или переименованный идентификатор. Mermaid не предупреждает: он ставит задачу в произвольную точку, и ось растягивается, чтобы её покрыть. Две задачи по десять дней могут оказаться на оси длиной в восемь месяцев.
Решение
Проверьте, что каждый `after <id>` точно совпадает с объявленным идентификатором. Резкая смена масштаба оси — верный признак.
gantt
dateFormat DD.MM.YYYY
section S
Проектирование :a1, 12.01.2026, 10d
Реализация :a2, after proekt, 10dgantt
dateFormat DD.MM.YYYY
section S
Проектирование :a1, 12.01.2026, 10d
Реализация :a2, after a1, 10dЧто вы видите
Название задачи обрывается на первом двоеточии
Почему
Двоеточие внутри названия задачи. Первое двоеточие — разделитель, поэтому всё после него читается как данные: `Этап 1: проектирование` рисуется как задача с названием просто `Этап 1`, а слово «проектирование» исчезает.
Решение
Не ставьте двоеточие в названии задачи. Используйте тире или перенесите подробность в название секции.
gantt
dateFormat DD.MM.YYYY
section S
Этап 1: проектирование :a1, 12.01.2026, 10dgantt
dateFormat DD.MM.YYYY
section S
Этап 1 — проектирование :a1, 12.01.2026, 10dЧто вы видите
Полоса схлопывается в ничто
Почему
Длительность без единицы измерения. `5` — это не пять дней: единица обязательна, и без неё задача не получает осмысленной длины. График всё равно рисуется, и задача выглядит так, будто не занимает времени вовсе.
Решение
Всегда пишите единицу: `5d`, `3w`, `2h`.
gantt
dateFormat DD.MM.YYYY
section S
Проектирование :a1, 12.01.2026, 5gantt
dateFormat DD.MM.YYYY
section S
Проектирование :a1, 12.01.2026, 5dЧто вы видите
Длительности верны, но даты окончания расходятся с реальностью
Почему
Нет `excludes weekends`. По умолчанию задача на 10 дней — это десять календарных дней вместе с выходными, поэтому всё, что длиннее рабочей недели, на графике заканчивается раньше, чем на практике. У нас к этому добавляются январские каникулы и майские праздники: на квартальном плане расхождение становится таким, что его уже неудобно объяснять на совещании.
Решение
Добавьте `excludes weekends` ближе к началу, а следом даты праздников — если только работа действительно не идёт семь дней в неделю.
gantt
dateFormat DD.MM.YYYY
section S
Миграция :a1, 01.06.2026, 10dgantt
dateFormat DD.MM.YYYY
excludes weekends
section S
Миграция :a1, 01.06.2026, 10dЗаметки о рендеринге
Измерено на том Mermaid 11.12.2, который использует сайт. Гант ведёт себя иначе, чем все остальные типы.
Единственный тип с фиксированной шириной отрисовки
Все прочие диаграммы на сайте растут в ту сторону, в которую растёт их содержимое. Диаграмма Ганта всегда имеет 1264 пикселя ширины viewBox — хоть при трёх задачах, хоть при сорока; меняется только высота, измеренная в диапазоне примерно от 172 до 1060 пикселей. Ось сжимается или растягивается под эту фиксированную ширину, поэтому план на два года и план на две недели выглядят одинаково плотными. Если полосы получились нечитаемо тонкими, дело в диапазоне дат, а не в количестве задач.
Точки в дате не спасают: разбор всё равно американский
Повторю здесь, потому что это самая дорогая ловушка при работе на русском. Измерено: при `dateFormat YYYY-MM-DD` дата `01.03.2026` не вызывает ошибки и не предупреждает, а встаёт на 3 января — разделитель-точка не подсказывает движку, что это день и месяц. То же самое происходит с косой чертой. Объявленный `dateFormat DD.MM.YYYY` решает вопрос полностью и позволяет писать даты привычным образом. Это первая строка, которую стоит добавить в любую русскую диаграмму Ганта.
Экспорт в PNG точен до пикселя
Гант рисует подписи обычным SVG-текстом, а не встроенным HTML, поэтому — в отличие от блок-схемы, диаграмм классов, состояний и ER — его можно растрировать напрямую. Экспортированный PNG в точности совпадает с экраном: без перерисовки и без сдвигов типографики.
Именно он больше всех пострадал от бага экспорта в PNG
Поскольку Mermaid выдаёт `width="100%"` и не указывает высоту, браузер вычислял размер экспорта относительно бокса по умолчанию 300×150, и широкая невысокая пропорция Ганта делала результат наихудшим из возможных: диаграмма 1280×148 экспортировалась в PNG 600×58. Теперь экспорт читает viewBox, и та же диаграмма выходит в 2560×296. Полезно знать, если у вас остались старые PNG с диаграммами Ганта: увеличить их не получится.
Грамматика снисходительна везде, кроме двоеточия
Пропущенные секции, неизвестные ключевые слова состояния, даты не в том формате и длительности без единиц — всё это рисуется. Отвергается только строка задачи без двоеточия. Эта асимметрия — самое полезное, что стоит знать про написание диаграмм Ганта: тот факт, что диаграмма нарисовалась, почти ничего не говорит о её правильности.
Когда лучше взять другую диаграмму
Если даты — это догадки, диаграмма Ганта покажет их с точностью, которой они не заслужили, и кто-нибудь вам их припомнит. Блок-схема, показывающая порядок без дат, честнее и не требует правок, когда план сдвигается.
Если план меняется каждую неделю, текстовый Гант под контролем версий по-настоящему хорош — по диффу видно, что поехало, — но диаграмма, которую никто не обновляет, хуже, чем её отсутствие. Трезво оцените, какую из двух вы делаете.
А для всего, что связано с выравниванием загрузки, ёмкостью команды или распределением по людям, это неподходящий инструмент. Mermaid рисует полоски на календаре; он не знает, кто делает работу и не занят ли этот человек уже.
Другие типы диаграмм
Автор Dominik Malsch · Обновлено: