← All diagram types

MERMAID DIAGRAM GUIDE

Mermaid Gantt chart online editor

Plan projects with tasks, milestones, dependencies, and dates. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Gantt editor See an example

WHAT IT IS FOR

Make the important relationships clear

Plan tasks, milestones, dependencies, and delivery dates on a timeline that stays close to the project source code.

Plan product releases
Coordinate engineering work
Communicate milestones and dependencies

Why use Mermaid Studio?

Write the source as versionable Mermaid code.
Preview changes immediately in the browser.
Export the finished diagram as SVG or PNG.
Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

gantt
  title Mermaid Studio Build
  dateFormat YYYY-MM-DD
  section Foundation
  Data model :done, data, 2026-07-28, 1d
  Live editor :active, editor, after data, 3d
  section Product
  Dashboard :dashboard, after editor, 2d
  Sharing :share, after dashboard, 1d

HOW TO START

Create your diagram in four steps

1Choose the project date format.
2Group related tasks into sections.
3Add durations, dependencies, and milestones.
4Review the critical path and update dates as work changes.

WRITING TIPS

Keep the diagram useful

Group related tasks into sections.

Use milestones to mark important delivery points.

FAQ

Frequently asked questions

What is a Mermaid Gantt chart?+

A Mermaid Gantt chart is a code-based project timeline for tasks, sections, dependencies, and milestones.

Can Gantt tasks depend on one another?+

Yes. Mermaid Gantt syntax supports dependencies so a task can begin after another task or milestone.

TEMPLATES

Start from a related template

Release roadmap

Plan product releases, milestones, and dependencies on a timeline.

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Ready to make a Gantt?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio