Mermaid Gantt Chart for a Project Plan
Type a project plan and let Mermaid draw the Gantt chart: sections, tasks, dates, dependencies with after, and a go live milestone. A gift card release for an online shop, made in the free Mermaid live editor.
Step by step
Plans as text
- Gantt from text. A Gantt chart shows what happens and when. In Mermaid you type the plan as text and the bars draw themselves. The example is a release plan for a new gift card feature in an online shop.
Set up
- Diagram type. In the Mermaid live editor, clear the editor and type gantt on the first line. On the next line, add the title: title Gift card release.
gantt title Gift card release - Date format. Add dateFormat YYYY-MM-DD. It tells Mermaid how you write your dates. Year-month-day is the safest choice because it can't be confused with day-month or month-day.
dateFormat YYYY-MM-DD
Tasks
- Sections and tasks. Type section Analysis to start a group. Then add a task: a name, a colon, a short ID, a start date and a length, like Gather requirements :a1, 2026-11-02, 5d. 5d means 5 days. The preview now shows the first bar, 5 days long, under the Analysis section.
section Analysis Gather requirements :a1, 2026-11-02, 5d - Dependencies. Instead of a start date, write after and an ID. Sign off scope :a2, after a1, 2d starts when a1 ends and takes 2 days. If you change a1, every task linked after it moves too. Add section Build with two linked tasks. Build gift cards :b1, after a2, 10d takes 10 days after sign-off. Test with users :b2, after b1, 4d adds 4 days of testing with real users.
Sign off scope :a2, after a1, 2dsection Build Build gift cards :b1, after a2, 10d Test with users :b2, after b1, 4d
Milestone
- Milestone. Add section Launch, then Go live :milestone, after b2, 0d. The milestone tag and a length of 0d tell Mermaid this is a single point in time, so it draws a diamond instead of a bar. The finished chart has 3 sections, 4 tasks and a go live milestone. The diamond marks go live. Because it is linked with after b2, it moves by itself if any task before it slips.
section Launch Go live :milestone, after b2, 0d
Recap
- The rules. The rules: set the date format, group tasks in sections, link them with after, and mark the finish with a milestone.
Common mistakes
- Expecting 5d to mean 5 working days. By default Mermaid counts calendar days, so Saturdays and Sundays are included. Add excludes weekends on its own line after dateFormat to skip them.
- Dates that don't match dateFormat. If you set dateFormat YYYY-MM-DD but type 02/11/2026, Mermaid can't read the date and the chart breaks or the bar lands in the wrong place. Write every date in the format you declared, like 2026-11-02.
- Using after with no ID to point at. after can only link to a task that has an ID, and the ID must be typed the same way, like a1. Give every task you plan to link to a short, unique ID.
- A colon inside the task name. Mermaid treats the first colon as the end of the task name, so a name like Phase 1: Build breaks the line. Leave colons out of task names.
When a business analyst uses this
In a planning workshop, a business analyst can type the analysis, sign-off, build and test tasks into Mermaid while the team watches and get a timeline on the spot. If sign-off slips by 3 days, changing one length moves every linked task and the go live milestone, so the plan stays honest.
Questions people ask
How do I skip weekends in a Mermaid Gantt chart?
Add the line excludes weekends after dateFormat. Mermaid then leaves out Saturdays and Sundays when it works out task lengths.
How do I add a milestone in a Mermaid Gantt chart?
Put milestone first after the colon and give it a length of 0d, like Go live :milestone, after b2, 0d. Mermaid draws it as a diamond.
Can a Mermaid task start when another task ends?
Yes. Write after and the other task's ID instead of a start date, like :a2, after a1, 2d. The task then moves whenever the earlier task changes.
