Markdown Gantt chart maker

Plan a project with a Gantt chart. List tasks, dates and dependencies in a Mermaid block to turn a schedule into a timeline you can share.

Mermaid Gantt syntax

A Gantt chart is a title, a date format and a list of tasks grouped into sections. You name each task, give it a start and a length, and Mermaid lays out the timeline. Here is each piece you can write.

Tasks and sections

Set a date format, then list tasks under a section. Each task has a name, an id, a start date and a length.

You write

gantt
  title Project plan
  dateFormat YYYY-MM-DD
  section Design
  Research   :a1, 2024-01-01, 5d
  Wireframes :a2, after a1, 4d
  section Build
  Front end  :a3, after a2, 7d
  Back end   :a4, after a2, 6d

You get

Dependencies

Use after and a task id to start a task when another finishes.

You write

gantt
  dateFormat YYYY-MM-DD
  section Work
  Draft  :d1, 2024-01-01, 4d
  Review :d2, after d1, 2d
  Ship   :d3, after d2, 1d

You get

Task status

Add a status keyword before the id to colour a task.

You write

gantt
  dateFormat YYYY-MM-DD
  section Status
  Done task   :done, t1, 2024-01-01, 3d
  Active task :active, t2, 2024-01-04, 3d
  Critical    :crit, t3, 2024-01-07, 3d
  Planned     :t4, 2024-01-10, 3d

You get

Milestones

Give a task the milestone keyword and a zero length to mark a moment.

You write

gantt
  dateFormat YYYY-MM-DD
  section Launch
  Build :b1, 2024-01-01, 5d
  Ship  :milestone, after b1, 0d

You get

Cheat sheet

Write this	You get
`title Text`	Chart title
`dateFormat YYYY-MM-DD`	How dates in the file are written
`section Name`	Start a group of tasks
`Task :id, 2024-01-01, 3d`	A task with an id, start date and length
`Task :after id, 3d`	Start a task when task id finishes
`:done`	Mark a task complete
`:active`	Mark a task in progress
`:crit`	Mark a task critical
`:milestone`	A zero-length milestone