Mermaid Gantt Charts: Syntax, Dependencies, and Milestones
Build a code-based Mermaid Gantt chart for tasks, dependencies, project sections, and delivery milestones.
By Mermaid Studio Team · Published August 2, 2026 · Updated August 2, 2026
What a Gantt chart should communicate
A Gantt chart is most useful when it communicates sequence, duration, and dependencies. It should help a team answer what is happening now, what is blocked, and which milestone is affected by a change.
Keep the chart at the planning level that matches the audience. A team roadmap and a developer task breakdown do not need the same amount of detail.
Create a project timeline
Start with a date format, then group tasks into sections. Each task gets a status, identifier, start date or dependency, and duration.
A release timeline
gantt
title Product release
dateFormat YYYY-MM-DD
section Design
User flows :done, ux, 2026-08-04, 3d
Prototype :active, prototype, after ux, 4d
section Build
Implementation :build, after prototype, 7d
Release :milestone, release, after build, 0dUse dependencies and milestones carefully
Dependencies are valuable when they represent a real constraint. If every task depends on the previous task, the chart becomes difficult to maintain and hides opportunities for parallel work.
Use milestones for events with a clear outcome, such as a launch, review, or handoff. Keep the milestone label specific enough that a reader knows what completion means.
- • Use sections for ownership or project phase
- • Use `after` when a task follows another task
- • Use milestones for zero-duration delivery points
Keep the plan current
Because the chart is Mermaid code, it can live beside project documentation and be updated during planning reviews. Open the Gantt editor to preview date changes and export the timeline for a status update.