Dependencies and milestones
Schedule work after another task and mark delivery, approval, or review checkpoints as milestones.
Project timeline planning
Mermaid Gantt Chart Online Editor
Create a Mermaid Gantt chart online to plan tasks, milestones, durations, dependencies, and delivery phases. Edit the timeline source, preview the schedule, and export SVG or PNG.
Build a Mermaid Gantt chart online
Start with a compact release plan, then adjust dates, durations, dependencies, milestones, and sections while the schedule stays visible.
Build a Mermaid Gantt chart online
Changes render automatically in the preview.
gantt-chart.mmd10 lines
Live previewWaiting
Keep timeline logic in reviewable text
Mermaid Gantt syntax records task timing, status, sections, and dependencies in a compact format that can evolve with a delivery plan.
Sections and task status
Group related work and distinguish active, completed, critical, and planned tasks.
Live Mermaid preview
See the rendered result update as you edit and keep syntax feedback beside the source.
No local setup
Work in a modern browser without installing Mermaid CLI, a desktop app, or an editor extension.
Continue in OnUML
Move the current source into the full editor for AI generation, repair, sharing, and saved projects.
How to create a Mermaid Gantt chart
Set a consistent date format, group the work, and express dependencies before adding detail that does not affect schedule decisions.
- 01
Add the gantt declaration, a clear title, and the dateFormat used by explicit task dates.
- 02
Create sections for phases, teams, or workstreams that readers need to compare.
- 03
Give important tasks stable IDs so later tasks can use after dependencies.
- 04
Add durations, milestones, and status markers that communicate the current plan.
- 05
Review overlaps and critical handoffs, then export the schedule or continue editing.
Mermaid Gantt syntax and schedule decisions
A readable Gantt chart focuses on sequencing, timing, and ownership boundaries instead of reproducing every item from a project tracker.
Use one date format consistently
Declare dateFormat before tasks and write explicit dates in that format so the source remains predictable and easy to review.
Create stable task dependencies
Assign IDs to tasks that other work depends on, then use after to express sequencing without manually recalculating every start date.
Use milestones for decision points
A milestone marks an event such as approval, launch, handoff, or a contractual deadline. Use a 0d duration when the event should represent one exact point in time.
Keep the chart at planning level
Include tasks that change schedule understanding. Move fine-grained execution checklists to the project tracker.
Mermaid Gantt chart example
The example plans requirements, prototyping, implementation, and a release milestone using two sections and dependency-based dates.
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, 0dCompare planning diagrams
Choose the right text-based diagram workflow
See how Mermaid and PlantUML support documentation workflows and where schedule diagrams fit into a larger diagram system.
Read the Mermaid vs PlantUML guide →Related Mermaid tools
Continue with the general editor, browse this release’s tool directory, or compare the diagram with a related modeling view.
Mermaid Online Editor
Write Mermaid source, preview the result, and export SVG or PNG.
Open tool →Mermaid Tools
Choose a focused Mermaid editor for the diagram you need to create.
Open tool →Mermaid Flowchart Online Editor
Create process flows, decisions, and system workflows from Mermaid text.
Open tool →Frequently asked questions
What is a Mermaid Gantt chart online editor?
It is a browser tool for writing Mermaid gantt syntax, previewing a project timeline, and exporting the schedule as SVG or PNG.
How do I set the date format?
Add a dateFormat directive near the start of the chart, such as YYYY-MM-DD, and use that format for explicit task dates.
Can Mermaid Gantt tasks depend on each other?
Yes. Give the earlier task an ID and schedule another task with after followed by that ID.
Can I add milestones?
Yes. Mark a task as milestone. Mermaid positions it from the task start and duration; use 0d when a release, approval, or handoff should appear at one exact time.
Can I show completed or critical tasks?
Yes. Task tags such as done, active, and crit communicate status and scheduling importance.
Can I export the Gantt chart as SVG or PNG?
Yes. Check the timeline preview and then download SVG for scalable documentation or PNG for slides and image-based sharing.