Mermaid Gantt Chart Syntax

What a Mermaid gantt chart is for

A Gantt chart shows tasks as bars on a timeline, with sections, dependencies and milestones. Mermaid computes dates from durations and after clauses, so moving one task shifts everything that depends on it.

Gantt Chart syntax

Basic example

gantt
    title Website relaunch
    dateFormat YYYY-MM-DD
    section Design
        Wireframes        :done, des1, 2026-01-05, 5d
        Visual design     :active, des2, after des1, 7d
    section Build
        Frontend          :dev1, after des2, 10d
        Backend API       :dev2, after des1, 12d
    section Launch
        QA                :qa, after dev1 dev2, 4d
        Go live           :milestone, after qa, 0d

Open this example in the Mermaid editor

More gantt chart examples

Sprint plan excluding weekends

excludes weekends makes 5d mean five working days; crit highlights tasks on the critical path.

gantt
    title Sprint 14
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    excludes weekends
    section Backend
        Payments API       :crit, api, 2026-03-02, 5d
        Webhooks           :hooks, after api, 3d
    section Frontend
        Checkout UI        :ui, 2026-03-02, 6d
        Integrate API      :crit, after api ui, 2d
    section Release
        Code freeze        :milestone, freeze, 2026-03-13, 0d

Open “Sprint plan excluding weekends” in the editor

Common mistakes

• Task ids are optional but needed for after clauses. Without an id, a task starts when the previous one ends.
• Tags (done, active, crit, milestone) must come before the id and dates.
• A colon in a task name ends the name; leave colons out of task titles.

Use it in Markdown

```mermaid
gantt
    title Website relaunch
    dateFormat YYYY-MM-DD
    section Design
        Wireframes        :done, des1, 2026-01-05, 5d
        Visual design     :active, des2, after des1, 7d
    section Build
        Frontend          :dev1, after des2, 10d
        Backend API       :dev2, after des1, 12d
    section Launch
        QA                :qa, after dev1 dev2, 4d
        Go live           :milestone, after qa, 0d
```

GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.

Other Mermaid diagrams

• Mermaid flowchart syntax
• Mermaid sequence diagram syntax
• Mermaid class diagram syntax
• Mermaid state diagram syntax
• Mermaid er diagram syntax
• Mermaid pie chart syntax
• Mermaid mindmap syntax
• Mermaid timeline syntax
• Mermaid git graph syntax
• Mermaid user journey syntax
• Mermaid quadrant chart syntax
• Mermaid xy chart syntax

Sources

• Mermaid docs: Gantt Chart

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions