TryMermaid

Mermaid Gantt Chart Maker

Write Gantt charts in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

Gantt chart example

Rendering preview…

gantt
    title Website redesign
    dateFormat YYYY-MM-DD
    section Design
    Wireframes    :done, des1, 2026-01-05, 7d
    Visual design :active, des2, after des1, 10d
    section Build
    Frontend      :dev1, after des2, 14d
    Launch        :milestone, after dev1, 0d
Open this example in the editor Start a blank diagram

What is a Gantt chart?

A Gantt chart is a project schedule drawn as horizontal bars on a calendar, one bar per task. The length of a bar shows how long the task takes, and its position shows when it starts and what it depends on. In Mermaid a Gantt chart starts with the gantt keyword.

When to use a Gantt chart

  • Planning project phases and milestones
  • Showing task dependencies on a roadmap
  • Sharing release or launch schedules
  • Tracking which tasks are done, active or critical

How to make a Gantt chart in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with gantt on the first line.

  2. Step 2

    Set the date format

    Add dateFormat YYYY-MM-DD so Mermaid knows how to read your dates, and an optional title line.

  3. Step 3

    Add sections and tasks

    Group tasks under section lines. Write each task as a name, a colon, then an id, a start date and a duration, for example Wireframes :des1, 2026-01-05, 7d.

  4. Step 4

    Link tasks and export

    Start a task after another with after des1, mark progress with done, active or crit, then export PNG or SVG.

Gantt chart syntax cheat sheet

ElementSyntaxWhat it does
Date formatdateFormat YYYY-MM-DDHow dates are written
Sectionsection DesignGroup of tasks
TaskName :id, 2026-01-05, 7dId, start date and duration
DependencyName :id2, after id, 3dStarts when another task ends
Status:done, … :active, … :crit, …Done, in progress or critical
MilestoneLaunch :milestone, after id, 0dSingle point in time
Skip weekendsexcludes weekendsTasks stretch over weekends
Axis labelsaxisFormat %b %dDate format on the axis

Gantt chart FAQ

How do I make one task start after another?

Use after followed by the other task's id in place of a start date, for example Frontend :dev1, after des2, 14d. Mermaid works out the start date, so the schedule moves when earlier tasks change.

Can a Mermaid Gantt chart skip weekends?

Yes. Add excludes weekends near the top of the chart and tasks stretch over weekends instead of counting them. You can also exclude specific dates, such as holidays, by listing them in the chart’s date format.

Other Mermaid diagram types