Build a Gantt chart in Mermaid syntax

Edit a timeline of tasks, dates, durations, and dependencies.

freeworks offlinenothing uploaded
ToolGantt Chart Editor
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Tasks are parsed with start dates, durations or end dates, dependencies, and status tags; a time scale maps dates to horizontal positions and rows represent task records. Dependencies can shift a task when its predecessor changes.

  • Explicit durations and dependencies keep a schedule coherent as dates move.

Worked example

Sprint Plan
Generate a Gantt chart for a sprint
Input
											Title: Sprint 1
Date format: YYYY-MM-DD
Sections: [{"name":"Design","tasks":[{"name":"Wireframes","id":"w1","status":"done","start":"2024-01-01","duration":"3d"},{"name":"Mockups","status":"active","start":"after w1","duration":"5d"}]},{"name":"Development","tasks":[{"name":"Frontend","status":"","start":"2024-01-09","duration":"10d"}]}]
Output
												gantt
    title Sprint 1
    dateFormat YYYY-MM-DD
    section Design
        Wireframes : done, w1, 2024-01-01, 3d
        Mockups : active, after w1, 5d
    section Development
        Frontend : 2024-01-09, 10d

When to use this

Release plans, construction schedules, and project reviews edit Gantt timelines.

Edge cases

  • A duration without a start anchor cannot be placed.
  • Calendar exclusions change elapsed working time.
  • A circular dependency makes a schedule impossible to order.

References