MermanDraw
Open Editor

Mermaid guide

Mermaid Gantt Chart Syntax: Tasks, Sections, Dependencies, and Milestones

A Mermaid Gantt chart is a project schedule written as one task per line. Each task has a name, optional status tags, an ID, a start (a date or after otherTask), and a duration or end date. Mermaid draws the bars, computes dependent start dates, and shades weekends if you ask it to.

It shines for roadmaps in README files and planning docs, where a real project tool is overkill and a screenshot would go stale.

  • project plans
  • release roadmaps
  • sprint visualisation
  • dependency-aware scheduling

Example

Mermaid Gantt example2024-01-072024-01-142024-01-212024-01-282024-02-042024-02-112024-02-182024-02-252024-03-032024-03-102024-03-17Editor & Preview PNG / SVG Export Anonymous Sharing Landing Page Cloudflare Deploy Cheatsheet Type Guides Auto-fix CoreLaunchGrowthMermanDraw Roadmap
gantt
    title MermanDraw Roadmap
    dateFormat YYYY-MM-DD
    section Core
        Editor & Preview     :done,    e1, 2024-01-01, 14d
        PNG / SVG Export     :done,    e2, after e1, 7d
        Anonymous Sharing    :done,    e3, after e2, 7d
    section Launch
        Landing Page         :done,    l1, after e3, 5d
        Cloudflare Deploy    :done,    l2, after l1, 3d
    section Growth
        Cheatsheet           :done,    g1, after l2, 7d
        Type Guides          :active,  g2, after g1, 14d
        Auto-fix             :         g3, after g2, 21d
Open in editor → Cheatsheet →

Syntax

Setup and tasks

gantt
    title Q3 release plan
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    section Build
        Design review     :done,   d1, 2026-07-01, 5d
        Implementation    :active, d2, after d1, 15d
        QA                :        d3, after d2, 7d
    section Launch
        Beta              :crit,   l1, after d3, 5d
        Public release    :milestone, l2, after l1, 0d
Setup and tasks — Mermaid ganttJul 01Jul 03Jul 05Jul 07Jul 09Jul 11Jul 13Jul 15Jul 17Jul 19Jul 21Jul 23Jul 25Jul 27Jul 29Jul 31Aug 01Design review Implementation QA Beta Public release BuildLaunchQ3 release plan

Task line: Name : [tags,] id, start, duration|end. Tags: done, active, crit, milestone. dateFormat parses the dates you write; axisFormat controls the axis labels (d3 time format).

Try this snippet →

Dependencies and excludes

gantt
    dateFormat YYYY-MM-DD
    excludes weekends
    section Work
        Spec   :a, 2026-08-03, 3d
        Build  :b, after a, 5d
        Test   :c, after a b, 2d
Dependencies and excludes — Mermaid gantt2026-08-032026-08-042026-08-052026-08-062026-08-072026-08-082026-08-092026-08-102026-08-112026-08-122026-08-132026-08-142026-08-152026-08-162026-08-17Spec Build Test Work

after a b starts when both finish. excludes weekends (or specific dates) skips non-working days when computing durations.

Try this snippet →

Axis control

gantt
    dateFormat YYYY-MM-DD
    tickInterval 1week
    weekday monday
    section Plan
        Task :2026-09-01, 21d
Axis control — Mermaid gantt2026-09-072026-09-142026-09-21Task Plan
Try this snippet →

Common mistakes

These are the parse errors that come up most, including in code written by ChatGPT and Claude. Paste any failing diagram into the editor and it marks the offending line.

  • Dates that do not match dateFormat (dateFormat YYYY-MM-DD with 03/09/2026).

    Fix: Match the format exactly or change dateFormat. Unparseable dates silently become today.

  • Colons in task names (Phase 1: Design : d1, 2026-01-01, 5d).

    Fix: The first colon ends the name. Use a dash or parentheses in task text.

  • Dependency on an ID that is defined later or misspelled.

    Fix: after x needs x already declared above. Keep IDs short and consistent (d1, d2).

  • Forgetting the ID and writing after on the next task.

    Fix: A task without an explicit ID gets an auto-generated one you cannot reference. Give every task you depend on an ID.

Real-world examples

Complete, copy-ready gantts for common situations. Each one opens in the editor with a click.

Browse all examples →

FAQ

Can I show today's date?

Mermaid draws a vertical "today" marker automatically when today falls inside the chart range. Disable it with todayMarker off.

How do I draw a milestone?

Tag the task milestone and give it a zero duration: Release :milestone, m1, 2026-09-30, 0d. It renders as a diamond.

Does GitHub render Gantt charts?

Yes, inside a mermaid fenced block. For slide decks or chat, export a PNG from MermanDraw instead.