ganttv0.9.4
What is a Gantt diagram?
Project timelines with dependencies and milestones.
gantt
When to use it
Use a Gantt when…
01
Quarterly roadmaps
02
Construction or content production schedules
03
Any project with dependencies and dates
Syntax basics
The minimal syntax
Copy this and you have a working gantt. Build from here.
gantt.mmd
gantt title Q2 launch dateFormat YYYY-MM-DD section Design Wireframes :a1, 2026-04-01, 7d Hi-fi mocks :after a1, 10d section Build API :2026-04-12, 14d UI :2026-04-15, 18d section Ship QA :2026-05-02, 7d Launch :milestone, 2026-05-12, 0d
Common patterns
Patterns worth memorizing
after dependencies
`:after a, 5d` — chain tasks without typing dates twice.
Milestones
`:milestone, 2026-05-01, 0d` shows a diamond marker, good for launches.
crit / done
Status keywords colour bars: `crit` (red), `done` (gray), `active` (highlighted).
Common gotchas
The things that will trip you up
Mermaid silently ignores misspellings — these are the failures we see most.
- 01
`dateFormat` must match your input dates exactly — typos give silent off-by-one days.
- 02
Mermaid Gantt isn't a scheduler: it renders what you wrote, it doesn't solve dependencies.
- 03
Section headers don't get colors; group with sections for layout, not branding.
Related diagram types