Mermaid Gantt Chart Cheat Sheet

Tasks, sections and dates, laid out along a time axis.

Every picture on this page was drawn by

Mernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

Sections and tasks

A task is a title, a colon, then a start and a length. dateFormat says how to read the dates.

gantt
  dateFormat YYYY-MM-DD
  title Release plan
  section Build
  Compile :a1, 2026-01-06, 3d
  Test    :a2, after a1, 5d

A Gantt chart with one section called Build holding two bars, one after the other.

Status tags

done, active and crit are tags, and they have to come first in the list.

gantt
  dateFormat YYYY-MM-DD
  section Build
  Compile :done, a1, 2026-01-06, 3d
  Test    :active, a2, 2026-01-09, 3d
  Ship    :crit, a3, 2026-01-12, 2d

Three Gantt bars in one section, the first filled, the second outlined and the third highlighted in red.

Depending on another task

after a1 starts a task when the one with that id ends.

gantt
  dateFormat YYYY-MM-DD
  section Build
  Compile :a1, 2026-01-06, 3d
  Test    :a2, after a1, 5d
  Ship    :a3, after a2, 2d

Three Gantt bars in a row, each starting where the previous one ends.

Milestones

A milestone is a zero-length task — a marker on the axis rather than a bar.

gantt
  dateFormat YYYY-MM-DD
  section Release
  Work :a1, 2026-01-06, 10d
  Launch :milestone, m1, 2026-01-20, 0d

A Gantt bar for the work, with a diamond marker at its right-hand end for the launch.

Mermaid Gantt Chart Cheat Sheet

Sections and tasks

Status tags

Depending on another task

Milestones

Draw it in Mernyx.