Docs
Gantt Chart Syntax

Gantt Chart Syntax

A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.

Adapted from the official mermaid documentation, learn more here.

Syntax

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, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-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, 2014-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, 2014-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


gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-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, 2014-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, 2014-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 by default sequential. A task start date defaults to the end date of the preceding task.

A colon, :, separates the task title from its metadata. Metadata items are separated by a comma, ,. Valid tags are active, done, crit, and milestone. Tags are optional, but if used, they must be specified first. After processing the tags, the remaining metadata items are interpreted as follows:

  1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
  2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by dateFormat) or reference another task using after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
  3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the later <taskID> syntax.
Metadata syntaxStart dateEnd dateID
<taskID>, <startDate>, <endDate>startdate as interpreted using dateformatendDate as interpreted using dateformattaskID
<taskID>, <startDate>, <length>startdate as interpreted using dateformatStart date + lengthtaskID
<taskID>, after <otherTaskId>, <endDate>End date of previously specified task otherTaskIDendDate as interpreted using dateformattaskID
<taskID>, after <otherTaskId>, <length>End date of previously specified task otherTaskIDStart date + lengthtaskID
<taskID>, <startDate>, until <otherTaskId>startdate as interpreted using dateformatStart date of previously specified task otherTaskIDtaskID
<taskID>, after <otherTaskId>, until <otherTaskId>End date of previously specified task otherTaskIDStart date of previously specified task otherTaskIDtaskID
<startDate>, <endDate>startdate as interpreted using dateformatenddate as interpreted using dateformatn/a
<startDate>, <length>startdate as interpreted using dateformatStart date + lengthn/a
after <otherTaskID>, <endDate>End date of previously specified task otherTaskIDenddate as interpreted using dateformatn/a
after <otherTaskID>, <length>End date of previously specified task otherTaskIDStart date + lengthn/a
<startDate>, until <otherTaskId>startdate as interpreted using dateformatStart date of previously specified task otherTaskIDn/a
after <otherTaskId>, until <otherTaskId>End date of previously specified task otherTaskIDStart date of previously specified task otherTaskIDn/a
<endDate>End date of preceding taskenddate as interpreted using dateformatn/a
<length>End date of preceding taskStart date + lengthn/a
until <otherTaskId>End date of preceding taskStart date of previously specified task otherTaskIDn/a
Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.

For simplicity, the table does not show the use of multiple tasks listed with the after keyword. Here is an example of how to use it and how it's interpreted:

gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
    kiwi   :d, 2017-07-20, until b c

Title

The title is an optional string to be displayed at the top of the Gantt chart to describe the chart as a whole.

Excludes

The excludes is an optional attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays". These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.

Section statements

You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.

To do so, start a line with the section keyword and give it a name. (Note that unlike with the title for the entire chart, this name is required.

Milestones

You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword milestone. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: initial date+duration/2.

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

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

Setting dates

dateFormat defines the format of the date input of your gantt elements. How these dates are represented in the rendered chart output are defined by axisFormat.

Input date format

The default input date format is YYYY-MM-DD. You can define your custom dateFormat.

dateFormat YYYY-MM-DD

The following formatting options are supported:

InputExampleDescription
YYYY20144 digit year
YY142 digit year
Q1..4Quarter of year. Sets month to first month in quarter.
M MM1..12Month number
MMM MMMMJanuary..DecMonth name in locale set by dayjs.locale()
D DD1..31Day of month
Do1st..31stDay of month with ordinal
DDD DDDD1..365Day of year
X1410715640.579Unix timestamp
x1410715640579Unix ms timestamp
H HH0..2324 hour time
h hh1..1212 hour time used with a A.
a Aam pmPost or ante meridiem
m mm0..59Minutes
s ss0..59Seconds
S0..9Tenths of a second
SS0..99Hundreds of a second
SSS0..999Thousandths of a second
Z ZZ+12:00Offset from UTC as +-HH:mm, +-HHmm, or Z

More info in: https://day.js.org/docs/en/parse/string-format/

Output date format on the axis

The default output date format is YYYY-MM-DD. You can define your custom axisFormat, like 2020-Q1 for the first quarter of the year 2020.

axisFormat %Y-%m-%d

The following formatting strings are supported:

FormatDefinition
%aabbreviated weekday name
%Afull weekday name
%babbreviated month name
%Bfull month name
%cdate and time, as "%a %b %e %H:%M:%S %Y"
%dzero-padded day of the month as a decimal number [01,31]
%espace-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
%Hhour (24-hour clock) as a decimal number [00,23]
%Ihour (12-hour clock) as a decimal number [01,12]
%jday of the year as a decimal number [001,366]
%mmonth as a decimal number [01,12]
%Mminute as a decimal number [00,59]
%Lmilliseconds as a decimal number [000, 999]
%peither AM or PM
%Ssecond as a decimal number [00,61]
%Uweek number of the year (Sunday as the first day of the week) as a decimal number [00,53]
%wweekday as a decimal number [0(Sunday),6]
%Wweek number of the year (Monday as the first day of the week) as a decimal number [00,53]
%xdate, as "%m/%d/%Y"
%Xtime, as "%H:%M:%S"
%yyear without century as a decimal number [00,99]
%Yyear with century as a decimal number
%Ztime zone offset, such as "-0700"
%%a literal "%" character

More info in: https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format

Output in compact mode

The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.

---
displayMode: compact
---
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
 
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :a2, 2014-01-20, 25d
    Another one      :a3, 2014-02-10, 20d

---
displayMode: compact
---

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :a2, 2014-01-20, 25d
    Another one      :a3, 2014-02-10, 20d

Comments

Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.

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

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
Sequence DiagramClass Diagram