# Mermaid Gantt Chart Cheat Sheet

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

## Sections and tasks

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

```mermaid
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.](/diagrams/gantt/tasks.svg)

## Status tags

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

```mermaid
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.](/diagrams/gantt/status.svg)

## Depending on another task

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

```mermaid
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.](/diagrams/gantt/dependencies.svg)

## Milestones

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

```mermaid
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.](/diagrams/gantt/milestone.svg)

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.