Mermaid Gantt Chart Example

Gantt charts are the standard tool for project planning — used by engineering teams, PMs, and product leads to track timelines, sprints, and milestones. With Mermaid, you can turn a few lines of code into a polished, professional project roadmap.

Open this in the editor instantly — free, no signup

Open Marmady Editor →

Example: Product Launch Timeline

Here is a full product launch roadmap with three phases: Design, Development, and QA. Tasks include dependencies defined using the after keyword:

gantt
    title Product Launch Roadmap
    dateFormat  YYYY-MM-DD
    section Design
    Research & Discovery     :a1, 2026-01-01, 14d
    UI/UX Mockups            :a2, after a1, 12d
    section Development
    Frontend Build           :b1, 2026-01-25, 18d
    API Integration          :b2, after b1, 10d
    section QA & Launch
    Testing & Bug Fixes      :c1, after b2, 7d
    Production Deploy        :milestone, after c1, 1d

Example: Sprint Planning

Use this template to map a two-week sprint with individual stories and tasks:

gantt
    title Sprint 14 — Checkout Feature
    dateFormat  YYYY-MM-DD
    section Backend
    Payment API          :done, 2026-03-01, 3d
    Order Service        :active, 2026-03-04, 4d
    section Frontend
    Cart UI              :done, 2026-03-01, 5d
    Checkout Page        :2026-03-06, 6d
    section Testing
    E2E Tests            :2026-03-12, 3d

Gantt Syntax Reference

title — Name your chart
dateFormat YYYY-MM-DD — Set date input format
section Name — Group tasks by phase or team
:done / :active / :crit — Task status modifiers
:milestone — Renders as a diamond milestone marker
after taskId — Creates a dependency

Visualise your next project

Paste your timeline into Marmady and export a polished Gantt chart as SVG or PDF in seconds. Free, lightweight, built for developers.

Open Marmady Editor →

More Mermaid Examples Flowchart Examples Sequence Diagram Examples How To Use Mermaid