Mermaid template

Gantt Chart

Project timelines with sections, tasks, durations, and dependencies.

Source

Open in editor
gantt
    title Website Launch Plan
    dateFormat YYYY-MM-DD
    section Design
        Wireframes       :done, w, 2026-06-01, 5d
        Visual design    :active, v, after w, 7d
    section Build
        Frontend         :f, after v, 10d
        API              :a, after v, 8d
    section Ship
        QA & polish      :q, after f, 4d
        Launch           :milestone, after q, 0d

Gantt charts lay tasks on a calendar. Group tasks into sections, give each a start date or an `after` dependency, and a duration — Mermaid handles the layout.

Tags like :active, :done, :crit color-code progress and highlight the critical path.