Skip to content
Diagrams and visualizations using Mermaid
Diagrams and visualizations using Mermaid
More
Share
Explore
Diagrams and visualizations using Mermaid

icon picker
Gantt Chart

A Gantt chart is a type of bar chart that illustrates a project schedule and the amount of time it would take for any one project to finish.
⁠
Syntax documentation
⁠
⁠

Syntax


Theme:
default
⁠
⁠
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends

section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
Functionality added :milestone, 2014-01-25, 0d

section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h

section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
⁠
⁠
⁠

Milestones

dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min
task2 : 10min
task3 : 5min
Final milestone : milestone, m2, 18:14, 2min
⁠
⁠
⁠
Syntax
Milestones
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.