📅 Mermaid

Gantt chart

Plan projects on a clear timeline

Open this example in the editor Generate one with AI

What is a Gantt chart?

A Gantt chart lays tasks on a calendar with durations, dependencies and milestones. It is the project-management standard for showing who does what, when, and what depends on what.

Live example

Mermaid code

gantt
    title Product Launch
    dateFormat YYYY-MM-DD
    section Design
      Wireframes       :a1, 2026-01-05, 10d
      UI design        :a2, after a1, 14d
    section Build
      Backend API      :b1, 2026-01-12, 21d
      Frontend         :b2, after a2, 18d
    section Launch
      Beta testing     :c1, after b2, 10d
      Go live          :milestone, after c1, 0d

Live example

When to use it

Plan product launches and release schedules

Communicate roadmaps to stakeholders

Track sprint or migration phases with dependencies

Basic syntax

.mmd

gantt
    dateFormat YYYY-MM-DD
    section Phase 1
      Task A :a1, 2026-01-01, 7d
      Task B :after a1, 5d

Questions about this diagram

Can tasks depend on each other?

Yes — use “after taskId” to chain tasks, and milestones to mark key dates. Sections group tasks by workstream or team.

Is a text-based Gantt better than a project tool?

For communication, yes: it lives in your docs, versions with git, and updates in seconds. For resource management, pair it with your PM tool.

Explore other diagram types

🔀 Flowchart 💬 Sequence diagram 🧩 Class diagram 🗄️ Entity-relationship diagram 🔄 State diagram 🥧 Pie chart 🧠 Mind map 🌿 Git graph 🕰️ Timeline 🚶 User journey 🎯 Quadrant chart

Create your Gantt chart now

Describe it in plain language — the AI writes the Mermaid code for you.

Open Mermaid Studio