Mermaid Diagram Generator n Editor

Free Online Gantt Chart Maker

A Gantt chart lays project tasks along a timeline, grouped into sections, with dependencies drawn as one task starting after another finishes. It answers the question a status meeting always asks: what is blocking what, and when does it actually land.

Here the whole chart is a short list of tasks with a start date or a dependency and a duration. Reorder or reschedule a task by editing one line — the bars and dependency lines redraw themselves.

A product launch timeline

Mermaid source
gantt
    title Product Launch Timeline
    dateFormat  YYYY-MM-DD
    section Design
    Wireframes            :a1, 2026-09-01, 5d
    Visual design          :a2, after a1, 7d
    section Engineering
    Build backend          :b1, 2026-09-01, 14d
    Build frontend         :b2, after a2, 10d
    Integration testing    :crit, b3, after b1 b2, 5d
    section Launch
    Marketing prep         :c1, 2026-09-10, 10d
    Go live                :milestone, m1, after b3 c1, 0d
A product launch timelineOpen in editor →

Each task gets an id after the colon so later tasks can reference it. after b1 b2 makes a task wait for two dependencies at once. crit flags a task red as being on the critical path, and milestone draws a zero-duration diamond instead of a bar.

A two-week sprint plan

Mermaid source
gantt
    title Sprint 14
    dateFormat YYYY-MM-DD
    section Backend
    API refactor         :done,   t1, 2026-08-01, 3d
    Rate limiting         :active, t2, after t1, 4d
    section Frontend
    Dashboard redesign    :        t3, 2026-08-03, 6d
A two-week sprint planOpen in editor →

done and active are status tags: done renders the bar as complete, active highlights the task currently in progress, and a task with no tag renders as simply planned.

Questions

How do I mark a task as done or in progress?

Add done or active as the first word after the colon, before the task id — for example Task :done, t1, 2026-01-01, 3d. A task with no status tag renders as planned but not started.

How does the after keyword work?

Instead of a literal date, give a task's start as after <id>, where <id> is the id of an earlier task. You can list several ids separated by spaces to wait for all of them, which is how a milestone waits on two parallel workstreams.

How do I add a milestone?

Give the task the milestone tag and a duration of 0d — for example Go live :milestone, m1, after b3, 0d. Mermaid draws it as a diamond marker on the timeline instead of a bar.

Related tools