Mermaid Gantt Chart Syntax
A Gantt chart opens with gantt, sets a dateFormat, then lists tasks grouped into sections with a start and a duration or a dependency.
| Construct | Meaning | Example |
|---|---|---|
dateFormat YYYY-MM-DD | Declares how dates in the chart are parsed. Required before any task with a literal date. | gantt
dateFormat YYYY-MM-DD
Task one :t1, 2026-01-01, 3d |
section Name | Groups the tasks that follow it under a labelled row band. | gantt
dateFormat YYYY-MM-DD
section Design
Wireframes :a1, 2026-01-01, 3d |
Task :id, start, duration | A task's id, start date (or after reference), and duration, comma-separated after the colon. | gantt
dateFormat YYYY-MM-DD
Task one :t1, 2026-01-01, 5d |
after t1 | Starts this task once the referenced task id finishes, instead of a literal date. | gantt
dateFormat YYYY-MM-DD
Task one :t1, 2026-01-01, 3d
Task two :t2, after t1, 2d |
done / active | Status tags: done renders the bar complete, active highlights the task in progress. | gantt
dateFormat YYYY-MM-DD
Task one :done, t1, 2026-01-01, 3d
Task two :active, t2, after t1, 2d |
milestone | Draws a zero-duration diamond marker instead of a bar. | gantt
dateFormat YYYY-MM-DD
Task one :t1, 2026-01-01, 3d
Go live :milestone, m1, after t1, 0d |
Everything together
Mermaid source
gantt
title Product Launch Timeline
dateFormat YYYY-MM-DD
section Design
Wireframes :a1, 2026-09-01, 5d
Visual design :a2, after a1, 7d
section Engineering
Build backend :done, b1, 2026-09-01, 14d
Integration testing :crit, b2, after a2 b1, 5d
section Launch
Go live :milestone, m1, after b2, 0d