Project timeline planning

Mermaid Gantt Chart Online Editor

Plan a dated release schedule with Mermaid Gantt syntax. Set task dates and durations, connect dependent work, and mark milestones in the editor above before exporting the schedule for a planning discussion.

Build a Mermaid Gantt chart online

The release-plan example below combines phases and after dependencies. Its dates are illustrative; update the start date to match your plan.

OnUML

Draft

Loading diagram preview...

Keep dates and dependencies understandable

Use a Gantt chart when work has dates, durations, and dependencies. The source records the plan; it is not a live task tracker or a resource-allocation system.

Dates and durations

Choose a dateFormat and express each task with a start, an end, or a duration.

Dependent tasks

Give a prerequisite a stable ID and use after to start the next task when it finishes.

Phases and milestones

Group work with section and mark approval or delivery checkpoints with milestone.

Status and non-working days

Mark done, active, or crit tasks and exclude weekends when durations should skip them.

Turn a release plan into a timeline

Make dependencies explicit before adding detailed tasks that do not change the schedule discussion.

01
Declare gantt and dateFormat, then add sections and the first dated task.
02
Assign task IDs, link later tasks with after, and add milestones or excluded days where needed.
03
Check the resulting start and end dates against your plan, then export the chart for documentation or slides.

Gantt syntax for task dates, dependencies, and status

Dates and task IDs affect scheduling. Status tags affect presentation and do not mean the tool has analyzed the critical path.

Mermaid Gantt chart syntax reference →

Task ID, start date, and duration

After the colon, give a task an ID, a date matching dateFormat, and a duration. dateFormat parses task dates; axisFormat formats the visible axis.

gantt
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    section Design
    Requirements :req, 2026-09-01, 3d

Dependencies with after

Reference the prerequisite ID, not its visible title. A task scheduled with after moves when the referenced task end changes.

gantt
    dateFormat YYYY-MM-DD
    section Delivery
    Build :build, 2026-09-01, 5d
    Review :review, after build, 2d

Exclude non-working days

excludes weekends removes weekend days from task-duration calculations. A task crossing excluded days can therefore end later on the calendar.

gantt
    dateFormat YYYY-MM-DD
    excludes weekends
    section Delivery
    Build :build, 2026-09-04, 3d

Status tags and a milestone

Place done, active, crit, or milestone before the task ID. A 0d milestone represents a single time point; crit is a marker you set, not a calculated critical path.

gantt
    dateFormat YYYY-MM-DD
    section Release
    Build :done, build, 2026-09-01, 3d
    Review :crit, review, after build, 2d
    Launch :milestone, launch, after review, 0d

Mermaid Gantt chart example

The release plan groups design and delivery work. Requirements, prototyping, implementation, and launch are linked so the dependency chain is visible.

gantt
    title Product release plan
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    section Design
    Requirements :done, req, 2026-09-01, 3d
    Prototype :active, proto, after req, 4d
    section Delivery
    Implementation :dev, after proto, 7d
    Release :milestone, release, after dev, 0d

req, proto, and dev are task IDs used by after; task titles can change without changing those references.
done and active describe the status assigned in the source, not updates read from a project tracker.
Try adding excludes weekends, then check which end dates move and whether that matches your working calendar.

Frequently asked questions

Why is a task date not parsed correctly?

Check that explicit dates match dateFormat, that metadata is comma-separated, and that tags appear before IDs and dates. Use a consistent format such as YYYY-MM-DD.

How do I start a task after another one?

Give the earlier task an ID and use after followed by that ID, for example Review :review, after build, 2d.

Does a 3d task always finish three calendar days later?

Not when excluded dates fall inside it. excludes weekends and specific excluded dates are skipped during duration calculation, which can extend the calendar end date.

Is crit an automatically calculated critical path?

No. crit is a tag you add to a task. It visually marks the task; the editor does not claim to calculate a resource-aware or dependency-derived critical path.

Must every milestone use 0d?

No. Mermaid positions a milestone using its start and duration. Use 0d when the event should represent one exact time rather than a duration-based position.

Will this chart update from my task tracker?

This page renders the dates and status in your Mermaid source. Edit them when the plan changes and export a new chart; no task-tracker synchronization is provided here.

Compare Mermaid and PlantUML

Compare syntax and modeling capabilities when choosing a diagram language for technical documentation.

Read the diagram language comparison →