Mermaid diagram types

Mermaid Gantt charts

A Mermaid Gantt chart is a project timeline written as text: sections group tasks, each task gets a start (or a dependency) and a duration, and the renderer draws the bars. No spreadsheet, no project-management tool — a plan you can diff in Git.

A release plan with chained tasks and a launch milestone.

Gantt charts in Mermaid are ideal for lightweight roadmaps in READMEs and RFCs: close enough to communicate the plan, cheap enough to update in seconds when it changes.

When to use a gantt chart

  • Lightweight project roadmaps in docs and READMEs
  • Release planning in RFCs
  • Sprint or milestone overviews
  • Migration timelines with dependencies

The Mermaid code

Copy it anywhere Mermaid renders — or see the full syntax reference.

gantt
    title Q3 release plan
    dateFormat YYYY-MM-DD
    section Build
      Design      :a1, 2026-07-01, 5d
      Implement   :a2, after a1, 10d
    section Ship
      QA          :a3, after a2, 4d
      Docs        :a4, after a2, 3d
      Launch      :milestone, after a3, 0d

Frequently asked questions

How do I create a Gantt chart in Mermaid?
Start with `gantt`, set `dateFormat YYYY-MM-DD`, then group tasks under `section` headings. Each task line is `name : id, start, duration` — for example `Design :a1, 2026-07-01, 5d`. Use `after a1` instead of a date to chain a task to another, and `milestone` for zero-length markers.
Can Mermaid Gantt charts show dependencies?
Yes — `after <taskId>` starts a task when another finishes, which is how you express dependencies. Multiple tasks can depend on the same predecessor, and a task can wait on several with `after a1 a2`.
Is Mermaid a replacement for project-management tools?
For tracking work, no — there are no assignees, progress, or notifications. For communicating a plan inside documentation, it's often better: the chart lives next to the spec, renders on GitHub, and updating it is a one-line text edit.

Gantt chart templates

Other Mermaid diagram types