Gantt chart
A Gantt chart is a type of bar chart used to illustrate a project schedule and the time required to complete a project. A Gantt chart shows the number of days between the start and finish dates of the terminal elements and summary elements of a project.
Notes
A Gantt chart records each scheduled task as a continuous bar extending from left to right. The x-axis represents time, and the y-axis records the different tasks and the order in which they are completed.
More importantly, when a date, a number of days, or a specific set of dates is excluded from a task, the Gantt chart accommodates these changes by extending to the right by the same number of days, rather than creating gaps inside the task.
Copy
Embed
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
However, if the excluded dates fall between two tasks that start consecutively, the excluded dates will be skipped and left blank on the chart, and the subsequent task will start after the excluded dates end. As shown below:
Copy
Embed
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 charts are useful for tracking the time required to complete a project, but with some adjustments they can also be used to graphically represent "non-working days".
Syntax
Copy
Embed
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
Tasks are consecutive by default: the start date of the next task defaults to the end date of the previous task.
The task title and its metadata are separated by a colon (:), and metadata items are separated by commas (,). Valid tags include active, done, crit, and milestone. Tags are optional, but if used they must be placed first. After the tags are processed, the remaining metadata items are interpreted as follows:
- If a single item is specified, it determines when the task ends. It can be a specific date or time, or a duration. If a duration is specified, it is added to the task's start date to determine the task's end date, taking any exclusions into account.
- If two items are specified, the latter item is interpreted in the same way as in the previous case. The first item can specify an explicit start date or time (in the format specified by dateFormat), or can reference another task via after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter case, the task's start date will be set according to the latest end date of any referenced tasks.
- If three items are specified, the last two items are interpreted as in the previous cases. The first item represents the task's ID, which can be referenced using the later <taskID> syntax.
| Metadata syntax | Start date | End date | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate interpreted using dateformat | endDate interpreted using dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate interpreted using dateformat | Start date + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | The end date of the previously specified task otherTaskID | endDate interpreted using dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | The end date of the previously specified task otherTaskID | Start date + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate interpreted using dateformat | The start date of the previously specified task otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | The end date of the previously specified task otherTaskID | The start date of the previously specified task otherTaskID | taskID |
| <startDate>, <endDate> | startdate interpreted using dateformat | 使用 dateformat 解释的 enddate | Not applicable |
| <startDate>, <length> | startdate interpreted using dateformat | Start date + length | Not applicable |
| after <otherTaskID>, <endDate> | The end date of the previously specified task otherTaskID | 使用 dateformat 解释的 enddate | Not applicable |
| after <otherTaskID>, <length> | The end date of the previously specified task otherTaskID | Start date + length | Not applicable |
| <startDate>, until <otherTaskId> | startdate interpreted using dateformat | The start date of the previously specified task otherTaskID | Not applicable |
| after <otherTaskId>, until <otherTaskId> | The end date of the previously specified task otherTaskID | The start date of the previously specified task otherTaskID | Not applicable |
| <endDate> | The end date of the previous task | 使用 dateformat 解释的 enddate | Not applicable |
| <length> | The end date of the previous task | Start date + length | Not applicable |
| until <otherTaskId> | The end date of the previous task | The start date of the previously specified task otherTaskID | Not applicable |
Duration format
When specifying <length>, use a number followed by one of the following unit suffixes:
| Unit | Suffix | Example |
|---|---|---|
| Millisecond | ms | 50ms |
| Second | s | 30s |
| Minute | m | 30m |
| Hour | h | 4h |
| Day | d | 7d |
| Week | w | 3w |
| Month | m | 2m |
| Year | y | 1y |
Decimal values are also supported (for example, 2.5d). Invalid duration markers (for example, 3dX) will be ignored, and the task will default to a duration of zero.
For simplicity, the table does not show multiple tasks listed using the after syntax. Here is an example:
Copy
Embed
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
title is an optional string displayed at the top of the Gantt chart that describes the entire diagram.
Excludes
excludes is an optional property that accepts specific dates (in YYYY-MM-DD format), days of the week (for example "sunday"), or "weekends", but the word "weekdays" cannot be used. These dates will be marked on the chart and excluded from the task duration calculation. This means that if the task duration includes excluded dates, the excluded days will be added to the task end time, to ensure that the task duration matches what is specified in the code.
Weekend
When excluding weekends, you can set the weekend to Friday and Saturday, or Saturday and Sunday. By default, the weekend is Saturday and Sunday. To define the weekend start day, you can add an optional weekend property on a new line, followed by friday or saturday.
Copy
Embed
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 declaration
You can divide the diagram into sections to separate different parts of a project (such as development and documentation).
To do this, use the section syntax at the beginning of a line and give it a name. Note that, unlike the title of the whole diagram, this name is required.
Milestones
You can add milestones to the diagram. Milestones differ from tasks because they represent a specific point in time and are identified by the milestone syntax. The following is an example of using a milestone: the exact position of a milestone is determined by the milestone's start date and the duration of the task, as shown below:
Copy
Embed
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
Vertical markers
vert adds vertical lines to a Gantt chart to easily highlight important dates, such as deadlines, important events, or checkpoints. These markers extend across the entire chart and are positioned according to the dates you provide. Unlike milestones, vertical markers do not occupy a row. They are purely visual reference points that help break up the timeline and make important moments more easily identifiable.
Copy
Embed
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
Setting the date
dateFormat defines the date input format for Gantt chart elements, and axisFormat defines the date output format when rendering the chart.
Input date format
The default input date format is YYYY-MM-DD; you can customize dateFormat.
Copy
Embed
dateFormat YYYY-MM-DD
The following format options are supported:
| 输入 | Example | Description |
|---|---|---|
| YYYY | 2026 | 4-digit year |
| YY | 26 | 2-digit year |
| Q | 1..4 | Quarter number |
| M MM | 1..12 | Month number |
| D DD | 1..31 | Day of the month |
| Do | 1st..31st | Day of the month with ordinal |
| DDD DDDD | 1..365 | Day of the year |
| X | 1410715640.579 | Unix timestamp |
| x | 1410715640579 | Unix millisecond timestamp |
| H HH | 0..23 | 24-hour time |
| h hh | 1..12 | 12-hour time, used with a A |
| a A | am pm | AM or PM |
| m mm | 0..59 | Minute |
| s ss | 0..59 | Second |
| S | 0..9 | Tenth of a second |
| SS | 0..99 | Hundredth of a second |
| SSS | 0..999 | Thousandth of a second |
| Z ZZ | +12:00 | An offset from UTC, in the format +-HH:mm, +-HHmm, or Z |
The axis output date format
The default output date format is YYYY-MM-DD. You can customize axisFormat, for example 2026-Q1 means the first quarter of 2026.
Copy
Embed
axisFormat %Y-%m-%d
The following format strings are supported:
| Format,Definition | |
|---|---|
| %a | The abbreviated name of the weekday |
| %A | The full name of the weekday |
| %b | The abbreviated name of the month |
| %B | The full name of the month |
| %c | Localized date and time |
| %d | Day, decimal number [01,31] |
| %e | Day, a space-padded decimal number [1,31], equivalent to %_d |
| %H | Hour (24-hour clock), decimal number [00,23] |
| %I | Hour (12-hour clock), decimal number [01,12] |
| %j | Day of the year, decimal number [001,366] |
| %m | Month, decimal number [01,12] |
| %M | Minute, decimal number [00,59] |
| %L | Millisecond, decimal number [000, 999] |
| %p | AM or PM |
| %S | Second, decimal number [00,59] |
| %U | Week of the year (with Sunday as the first day of the week), decimal number [00,53] |
| %w | Weekday, a space-padded decimal number [0,6], where 0 represents Sunday |
| %W | Week of the year (with Monday as the first day of the week), decimal number [00,53] |
| %x | A localized date representation, such as: 2026-09-18 |
| %X | A localized time representation, such as: 14:30:00 |
| %y | Year without century, decimal number [00,99], for example 26 represents the year 2026 |
| %Y | Year with century, decimal number |
| %Z | Timezone name abbreviation, for example "-0700" |
| %% | Escape character, used to display the percent sign % itself |
Axis ticks
The default output tick is automatic. You can customize tickInterval, for example 1day or 1week.
Copy
Embed
tickInterval 1day
The pattern is
Copy
Embed
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
A week-based tickInterval starts on Sunday by default. If you want to specify a different weekday on which the tickInterval starts, use the weekday option, as in the following code:
Copy
Embed
gantt
tickInterval 1week
weekday monday
Compact mode output
Compact mode allows you to display multiple tasks on the same line. Use the preceding YAML setting to control the display mode of the diagram and enable compact mode for the Gantt chart.
Copy
Embed
---
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
Comments can be entered in a Gantt chart and will be ignored by the parser. Comments must be on their own line and must begin with %% (a double percent sign). Any text from the start of the comment to the next line break will be treated as a comment, including any diagram syntax.
Copy
Embed
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
Today marker
You can style the marker for the current date or hide it. To style it, add a value to the todayMarker key.
Copy
Embed
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
To hide the marker, set todayMarker to off.
Copy
Embed
todayMarker off
Example
Bar Gantt chart
Copy
Embed
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
Timeline (with comments, CSS, and frontmatter configuration)
Copy
Embed
---
# 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
