Gantt chart
Plan projects on a clear timeline
What is a Gantt chart?
A Gantt chart lays tasks on a calendar with durations, dependencies and milestones. It is the project-management standard for showing who does what, when, and what depends on what.
Gantt charts show up in steering committees and release plans, where the audience wants dates rather than logic. Written as text, they gain an unusual advantage: the plan is reviewed in the same pull request as the work it describes. Their weakness is that they age badly — a Gantt is a snapshot of intent, and nothing in Mermaid tells you it stopped matching reality three weeks ago.
Live example
gantt
title Product Launch
dateFormat YYYY-MM-DD
section Design
Wireframes :a1, 2026-01-05, 10d
UI design :a2, after a1, 14d
section Build
Backend API :b1, 2026-01-12, 21d
Frontend :b2, after a2, 18d
section Launch
Beta testing :c1, after b2, 10d
Go live :milestone, after c1, 0dWhen to use it
Common mistakes
dateFormat does not match your dates
With dateFormat YYYY-MM-DD, a task starting 05/01/2026 is not rejected — it is parsed into some other date and the chart silently stretches over months. Make the two agree, or declare dateFormat DD/MM/YYYY instead.
A colon inside the task name
Everything before the first colon is the label, so Phase 1: discovery :a1, 2026-01-05, 7d renders a task called “Phase 1” and quietly drops the rest of the name. Use a dash in task names instead.
Reusing a task id
Ids have to be unique. When two tasks share one, after resolves to the last declaration, so a dependent task jumps weeks forward with no error at all. Prefix ids by section — d1, b1, l1 — to keep them distinct.
Basic syntax
gantt
dateFormat YYYY-MM-DD
section Phase 1
Task A :a1, 2026-01-01, 7d
Task B :after a1, 5ddateFormat YYYY-MM-DD axisFormat %d/%mdateFormat tells Mermaid how to read the dates you type; axisFormat controls how they are printed along the axis. The two are independent and often differ.
Backend API :active, b1, 2026-01-12, 21dA task line is label, then tags, id, start and duration. Tags are done, active, crit and milestone; the start can be a date or after b1.
excludes weekends todayMarker stroke-width:4px,stroke:#e11excludes removes weekends or named dates from the working calendar. todayMarker restyles the current-date line, and todayMarker off hides it entirely.
section Launch Go live :milestone, m1, after c1, 0dSections group tasks into workstreams, each with its own colour band. A milestone with a zero duration renders as a diamond instead of a bar.
Questions about this diagram
Can tasks depend on each other?
Yes — use “after taskId” to chain tasks, and milestones to mark key dates. Sections group tasks by workstream or team.
Is a text-based Gantt better than a project tool?
For communication, yes: it lives in your docs, versions with git, and updates in seconds. For resource management, pair it with your PM tool.
How do I share a Gantt chart with people who do not use Mermaid?
Export PNG for slides and email, SVG for anything that will be zoomed, or publish the diagram as a public page and send the link — a link keeps showing the current version after you update the plan.
Can a Mermaid Gantt chart show assignees or percent complete?
No. There is no resource column and no progress bar; the only status information is the done, active and crit tags on a task. Keep capacity planning in your project tool and use the chart for communication.
Does Mermaid draw arrows between dependent tasks?
No. Writing after b1 sets the start date of a task but draws no dependency arrow, so the link stays invisible to the reader. Say it in the task name, or use a flowchart when the dependency graph is the message.
How do I mark today’s date on the chart?
Mermaid draws a marker at the current date by default, taken from the clock of whoever renders the diagram. todayMarker stroke-width:4px,stroke:#e11 restyles it, and todayMarker off removes it — useful when the chart is a reusable template rather than a live plan.
Gantt chart or another diagram type?
Gantt chart or timeline?
A Gantt is for work that has not happened yet: durations, dependencies, a critical path. A timeline is for events that have a date but no duration — releases, incidents, company history. If nothing in your list has a length, you want a timeline.
Gantt chart or flowchart?
Both describe a plan. The flowchart keeps the branching — what happens if the audit fails — and ignores the calendar; the Gantt keeps the calendar and flattens every branch into one nominal path. Steering committees want the Gantt, delivery teams often need both.
Create your Gantt chart now
Describe it in plain language — the AI writes the Mermaid code for you.
Open Mermaid Studio