Диаграмма Ганта
Диаграмма Ганта — это столбчатая диаграмма, используемая для отображения хода проекта и времени, необходимого для завершения проекта. Диаграмма Ганта показывает количество дней между датами начала и завершения конечных и сводных элементов проекта.
Примечания
Диаграмма Ганта записывает каждую запланированную задачу как непрерывную полосу, простирающуюся слева направо. Ось x представляет время, ось y фиксирует различные задачи и порядок их выполнения.
Что ещё важнее, когда даты, дни или определённый набор дат задачи исключаются, диаграмма Ганта приспосабливается к этим изменениям, продлевая полосу вправо на то же количество дней, а не создавая разрыв внутри задачи .
Копировать
Встраивание
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
Однако если исключённые даты находятся между двумя последовательно начинающимися задачами, исключённые даты будут пропущены и оставлены пустыми на диаграмме, после чего задача начнётся после окончания исключённых дат. Как показано ниже:
Копировать
Встраивание
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
Диаграмма Ганта полезна для отслеживания времени, необходимого для завершения проекта, но с некоторыми корректировками её также можно использовать для графического представления «нерабочих дней».
Синтаксис
Копировать
Встраивание
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
Задачи по умолчанию выполняются последовательно, датой начала следующей задачи по умолчанию считается дата завершения предыдущей.
Заголовок задачи и её метаданные разделяются двоеточием (:), а элементы метаданных разделяются запятыми (,). Допустимые теги включают active, done, crit и milestone. Теги необязательны, но если используются, должны стоять в самом начале. После обработки тегов остальные элементы метаданных интерпретируются следующим образом:
- Если указан один элемент, он определяет, когда задача завершается. Это может быть конкретная дата или время либо длительность. Если указана длительность, она прибавляется к дате начала задачи для определения даты завершения задачи с учётом любых исключений.
- Если указаны два элемента, второй элемент интерпретируется так же, как в предыдущем случае. Первый элемент может задавать явную дату или время начала (формат задаётся dateFormat) либо ссылаться на другую задачу через after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. В последнем случае дата начала задачи будет установлена по наиболее поздней дате завершения любой упомянутой задачи.
- Если указаны три элемента, последние два элемента интерпретируются так же, как в предыдущем случае. Первый элемент обозначает ID задачи и может быть указан с помощью синтаксиса later <taskID>.
| Синтаксис метаданных | Дата начала | Дата завершения | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate, интерпретируемая с помощью dateformat | endDate, интерпретируемая с помощью dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate, интерпретируемая с помощью dateformat | Дата начала + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Дата завершения ранее указанной задачи otherTaskID | endDate, интерпретируемая с помощью dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Дата завершения ранее указанной задачи otherTaskID | Дата начала + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate, интерпретируемая с помощью dateformat | Дата начала ранее указанной задачи otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Дата завершения ранее указанной задачи otherTaskID | Дата начала ранее указанной задачи otherTaskID | taskID |
| <startDate>, <endDate> | startdate, интерпретируемая с помощью dateformat | 使用 dateformat 解释的 enddate | Не применяется |
| <startDate>, <length> | startdate, интерпретируемая с помощью dateformat | Дата начала + length | Не применяется |
| after <otherTaskID>, <endDate> | Дата завершения ранее указанной задачи otherTaskID | 使用 dateformat 解释的 enddate | Не применяется |
| after <otherTaskID>, <length> | Дата завершения ранее указанной задачи otherTaskID | Дата начала + length | Не применяется |
| <startDate>, until <otherTaskId> | startdate, интерпретируемая с помощью dateformat | Дата начала ранее указанной задачи otherTaskID | Не применяется |
| after <otherTaskId>, until <otherTaskId> | Дата завершения ранее указанной задачи otherTaskID | Дата начала ранее указанной задачи otherTaskID | Не применяется |
| <endDate> | Дата завершения предыдущей задачи | 使用 dateformat 解释的 enddate | Не применяется |
| <length> | Дата завершения предыдущей задачи | Дата начала + length | Не применяется |
| until <otherTaskId> | Дата завершения предыдущей задачи | Дата начала ранее указанной задачи otherTaskID | Не применяется |
Формат длительности
При указании <length> используется число, за которым следует один из следующих суффиксов единиц измерения:
| Единица измерения | Суффикс | Пример |
|---|---|---|
| Миллисекунда | ms | 50ms |
| Секунда | s | 30s |
| Минута | m | 30m |
| Час | h | 4h |
| День | d | 7d |
| Неделя | w | 3w |
| Месяц | m | 2m |
| Год | y | 1y |
Также поддерживаются десятичные значения (например, 2.5d). Недействительные маркеры длительности (например, 3dX) игнорируются, и задача по умолчанию получает нулевую длительность.
Для простоты в этой таблице не показаны несколько задач, перечисленных с помощью синтаксиса after. Ниже приведён пример:
Копировать
Встраивание
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
Заголовок
title — это необязательная строка, отображаемая в верхней части диаграммы Ганта и описывающая всю диаграмму.
Исключение
excludes — необязательное свойство, принимающее определённые даты (в формате YYYY-MM-DD), день недели (например, "sunday") или "weekends", но нельзя использовать слово "weekdays". Эти даты будут отмечены на диаграмме и исключены из расчёта длительности задачи. Это означает, что если период выполнения задачи содержит исключённые даты, исключённые дни будут добавлены ко времени завершения задачи, чтобы длительность задачи соответствовала указанной в коде.
Выходные
При исключении выходных можно установить выходные на пятницу и субботу или на субботу и воскресенье. По умолчанию выходными являются суббота и воскресенье. Чтобы определить день начала выходных, можно добавить в новой строке необязательное свойство weekend, за которым следует friday или saturday.
Копировать
Встраивание
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
Объявление раздела
Вы можете разделить диаграмму на разделы, отделив различные части проекта (например, разработку и документацию).
Для этого используйте синтаксис section в начале строки и задайте ему имя. Обратите внимание, что, в отличие от заголовка всей диаграммы, это имя обязательно.
Веха
Вы можете добавлять вехи на диаграмму. Вехи отличаются от задач тем, что представляют собой конкретный момент времени и обозначаются синтаксисом milestone. Ниже приведён пример использования вех: точное положение вехи определяется датой начала вехи и длительностью задачи, как показано ниже:
Копировать
Встраивание
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
Вертикальная отметка
vert обозначает добавление вертикальной линии в диаграмму Ганта, чтобы легко выделять важные даты, например сроки, важные события или контрольные точки. Эти отметки простираются по всей диаграмме и позиционируются в соответствии с указанной вами датой. В отличие от вех, вертикальные отметки не занимают строку. Они являются чисто визуальными ориентирами, помогающими разбить временную шкалу и сделать важные моменты более заметными.
Копировать
Встраивание
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
Настройка даты
dateFormat определяет формат ввода дат для элементов диаграммы Ганта, axisFormat определяет формат вывода дат при рендеринге диаграммы.
Формат входной даты
Формат входной даты по умолчанию — YYYY-MM-DD; вы можете настроить dateFormat.
Копировать
Встраивание
dateFormat YYYY-MM-DD
Поддерживаются следующие параметры формата:
| 输入 | Пример | Описание |
|---|---|---|
| YYYY | 2026 | Год из 4 цифр |
| YY | 26 | Год из 2 цифр |
| Q | 1..4 | Номер квартала |
| M MM | 1..12 | Номер месяца |
| D DD | 1..31 | День месяца |
| Do | 1st..31st | День месяца с порядковым числительным |
| DDD DDDD | 1..365 | День года |
| X | 1410715640.579 | Временная метка Unix |
| x | 1410715640579 | Временная метка Unix в миллисекундах |
| H HH | 0..23 | Время в 24-часовом формате |
| h hh | 1..12 | Время в 12-часовом формате, используется вместе с a A |
| a A | am pm | До полудня или после полудня |
| m mm | 0..59 | Минута |
| s ss | 0..59 | Секунды |
| S | 0..9 | Десятая доля секунды |
| SS | 0..99 | Сотая доля секунды |
| SSS | 0..999 | Тысячная доля секунды |
| Z ZZ | +12:00 | Смещение относительно UTC в формате +-HH:mm, +-HHmm или Z |
Формат вывода даты оси
Формат выходной даты по умолчанию — YYYY-MM-DD. Вы можете настроить axisFormat, например 2026-Q1 обозначает первый квартал 2026 года.
Копировать
Встраивание
axisFormat %Y-%m-%d
Поддерживаются следующие строки формата:
| Формат,Определение | |
|---|---|
| %a | Сокращённое название дня недели |
| %A | Полное название дня недели |
| %b | Сокращённое название месяца |
| %B | Полное название месяца |
| %c | Локализованные дата и время |
| %d | Дата, десятичное число [01,31] |
| %e | Дата, десятичное число, дополненное пробелами [1,31], эквивалентно %_d |
| %H | Час (24-часовой формат), десятичное число [00,23] |
| %I | Час (12-часовой формат), десятичное число [01,12] |
| %j | День года, десятичное число [001,366] |
| %m | Месяц, десятичное число [01,12] |
| %M | Минуты, десятичное число [00,59] |
| %L | Миллисекунды, десятичное число [000, 999] |
| %p | До полудня или после полудня |
| %S | Секунды, десятичное число [00,59] |
| %U | Номер недели в году (первый день недели — воскресенье), десятичное число [00,53] |
| %w | День недели, десятичное число, дополненное пробелами [0,6], где 0 обозначает воскресенье |
| %W | Номер недели в году (первый день недели — понедельник), десятичное число [00,53] |
| %x | Локализованное представление даты, например: 2026-09-18 |
| %X | Локализованное представление времени, например: 14:30:00 |
| %y | Год без века, десятичное число [00,99], например 26 обозначает 2026 год |
| %Y | Год с веком, десятичное число |
| %Z | Аббревиатура названия часового пояса, например "-0700" |
| %% | Экранирующий символ для отображения самого знака процента % |
Деления оси
Деления вывода по умолчанию — автоматические. Вы можете настроить tickInterval, например 1day или 1week.
Копировать
Встраивание
tickInterval 1day
Шаблон таков:
Копировать
Встраивание
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
tickInterval на основе недели по умолчанию начинается с воскресенья. Если вы хотите указать другой день недели, с которого начинается tickInterval, используйте параметр weekday, как в следующем коде:
Копировать
Встраивание
gantt
tickInterval 1week
weekday monday
Вывод в компактном режиме
Компактный режим позволяет отображать несколько задач в одной строке. Режим отображения диаграммы управляется предыдущей настройкой YAML, которая включает компактный режим для диаграммы Ганта.
Копировать
Встраивание
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
В диаграмму Ганта можно вводить комментарии, которые парсер игнорирует. Комментарий должен занимать отдельную строку и начинаться с %% (двойного знака процента). Любой текст от начала комментария до следующего символа перевода строки считается комментарием, включая любой синтаксис диаграммы.
Копировать
Встраивание
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
Отметка сегодняшнего дня
Вы можете задать стиль для отметки текущей даты или скрыть эту отметку. Чтобы задать стиль, добавьте значение для ключа todayMarker.
Копировать
Встраивание
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Чтобы скрыть отметку, установите todayMarker в off.
Копировать
Встраивание
todayMarker off
Пример
Столбчатая диаграмма Ганта
Копировать
Встраивание
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
Временная шкала (включая комментарии, CSS и конфигурацию frontmatter)
Копировать
Встраивание
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
