Example gantt chart code
This is the Mermaid source loaded in the editor above. Copy it into a Markdown file inside a ```mermaid block and GitHub, GitLab, Notion or Obsidian will render it.
gantt
title Website Launch Plan
dateFormat YYYY-MM-DD
axisFormat %b %d
excludes weekends
section Planning
Requirements :done, req, 2026-01-05, 5d
Wireframes :done, wire, after req, 4d
section Build
Frontend :active, fe, after wire, 10d
Backend API : be, after wire, 8d
Integration : int, after fe be, 3d
section Launch
QA and fixes :crit, qa, after int, 4d
Go live :milestone, live, after qa, 0dGantt chart syntax cheat sheet
| Syntax | What it does |
|---|---|
| gantt | Start a Gantt chart. |
| dateFormat YYYY-MM-DD | How dates in tasks are written. axisFormat %b %d sets the axis labels. |
| section Name | Group the following tasks under a heading. |
| Task :id, 2026-01-05, 5d | Task with id, start date and duration (d, w, h). An end date also works. |
| after id1 id2 | Start when the listed tasks are finished. |
| done / active / crit / milestone | Status tags before the id, comma-separated. |
| excludes weekends | Skip weekends (or listed dates) when counting durations. |
How to make a Mermaid gantt chart
- 1Start the code with gantt and add a title.
- 2Set the date format with dateFormat YYYY-MM-DD.
- 3Group tasks under section headings.
- 4Add tasks with an ID, a start date or dependency, and a duration.
- 5Export as SVG or PNG, or copy a share link.
Dates and durations
dateFormat sets how you write dates in the task lines, for example dateFormat YYYY-MM-DD. axisFormat controls how dates appear on the axis and uses strftime-style codes such as %b %d.
A task line looks like Design :des1, 2026-01-05, 10d, meaning task ID des1 starts on that date and lasts 10 days. Durations can use units such as d for days and w for weeks.
Dependencies and status tags
Replace the start date with after des1 to start a task when another ends, as in Build :build, after des1, 15d. Moving one task then moves everything that depends on it.
Put tags before the ID to style tasks: done, active, crit for critical-path items, and milestone for zero-length markers such as Launch :milestone, m1, 2026-03-01, 0d.
Excluding weekends
Add excludes weekends so durations count working days only. You can also exclude specific dates, such as holidays, in the same line.
Use one section per team or phase so the chart stays easy to scan.