Mermaid Gantt Charts for Project Planning

Gantt Charts in Mermaid

A Gantt chart is a bar chart that illustrates a project schedule. Mermaid's gantt syntax lets you define tasks, their durations, dependencies, and milestones — all in plain text that can live alongside your code.

Basic Structure

gantt
    title Project Alpha Timeline
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    section Planning
    Requirements gathering :a1, 2024-01-01, 14d
    Architecture design    :a2, after a1, 10d

    section Development
    Backend API           :b1, after a2, 21d
    Frontend UI           :b2, after a2, 28d
    Integration testing   :b3, after b1, 7d

Key Concepts

• dateFormat defines how dates are parsed (e.g., YYYY-MM-DD).
• axisFormat controls how dates appear on the x-axis (e.g., %b %d = "Jan 15").
• section groups related tasks visually.

Task Syntax

Each task follows this pattern:

Task name : [status,] [id,] start, duration_or_end

Status keywords: done, active, crit (critical path).

gantt
    dateFormat YYYY-MM-DD
    section Sprint 1
    User stories          :done, us1, 2024-01-01, 5d
    Development           :active, dev1, after us1, 10d
    Code review           :crit, cr1, after dev1, 3d

Dependencies

Use after taskId to chain tasks:

gantt
    dateFormat YYYY-MM-DD
    Task A :a, 2024-01-01, 7d
    Task B :b, after a, 5d
    Task C :c, after a, 3d
    Task D :d, after b c, 4d

Task D starts after both B and C are complete. This models a join dependency.

Milestones

A milestone is a zero-duration task:

gantt
    dateFormat YYYY-MM-DD
    section Launch
    Final QA         :qa, 2024-03-01, 5d
    Launch milestone :milestone, m1, after qa, 0d

Gantt charts render best with 5-20 tasks. For very large projects, break the timeline into multiple focused charts per phase or team.