← All diagram types

Mermaid gantt chart syntax: sections, tasks and milestones with examples

Mermaid gantt chart syntax with rendered examples: sections, task durations, after dependencies, milestones and done/active/crit styling.

Gantt charts lay work out on a timeline: phases as sections, tasks as bars, milestones as diamonds. They are the standard figure for project plans, release schedules, and anything else that needs "what happens when, and what blocks what".

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Sections and tasks

A task line is Label :<metadata>, <duration>. The duration form 5d is days; 2w weeks. Declare dateFormat before the tasks and give the chart's first task an explicit start date — a task with only a duration starts where the previous task ended, and the first task has no previous one. section groups tasks under a heading:

mermaid
gantt
  title Launch plan
  dateFormat YYYY-MM-DD
  section Design
    Draft :2026-01-05, 5d
    Review :3d
  section Build
    Implement :10d
Render this to PDF →How diagram blocks work

Tasks lay out in order, each starting where the previous one ends unless a dependency says otherwise — but sequencing restarts at each section, so a task that opens a new section starts at the beginning of the timeline. That is why Implement above starts level with Draft rather than after Review.

Dependencies

Give tasks ids (:a1, 2026-02-02, 2d) and start a later task with after a1 — it begins when a1 ends:

mermaid
gantt
  title Release pipeline
  dateFormat YYYY-MM-DD
  section Prepare
    Branch cut :a1, 2026-02-02, 2d
    Freeze :after a1, 1d
  section Ship
    Staging deploy :after a1, 2d
    Production deploy :1d
Render this to PDF →How diagram blocks work

Statuses and milestones

Status tags — done, active, crit (critical) — colour the bar, and several can be stacked on one task (crit, done); makesPDF colours by the strongest tag: crit, then active, then done. milestone with a zero duration draws a diamond:

mermaid
gantt
  title Migration
  dateFormat YYYY-MM-DD
  section Plan
    Audit :done, 2026-03-02, 3d
    Sign-off :milestone, 0d
  section Execute
    Move data :active, 5d
    Verify :3d
Render this to PDF →How diagram blocks work

Not supported in makesPDF yet: tasks are placed on a day-count axis, laid out sequentially with after dependencies resolved — explicit calendar dates (2026-01-05), dateFormat, axisFormat, excludes and todayMarker are accepted but do not shift or label the timeline. Sequencing restarts per section: where Mermaid carries the previous task across a section boundary, makesPDF starts a section's first task at the beginning of the timeline.