Go back to HackMD Tutorial Home
中文教學 首頁
Give us feedback or report a bug

How to create Gantt chart

You can check the syntax in Both mode to understand the structure better.

Steps

1. You need to define a Gantt chart block using three backticks and then writing 'mermaid'.
2. Name this Gantt chart after title.
3. Create task blocks with section.
4. Separate different tasks under the same section by "line breaks", and assign durations.

Here is a simple Gantt chart

Syntax

gantt
    title A Gantt Diagram

section Section 1 
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d

section Another section
Task in sec      :2014-01-12 , 12d
anther task      : 24d

 

Customize the sections and tasks.

Steps

1. Same as above, defining a Gantt chart block using three backticks and Mermaid.
2. Name this Gantt chart after title.
3. Define the display format for dates.
4. Create task blocks with section.
5. Divide the task blocks into different tasks, name them, and assign durations.

Syntax

gantt
    title Project AAA
    dateFormat  MM-DD
	axisFormat  %m-%d
		
section My website
    Plan : crit, done, plan, 05-15, 10d
    Start working : active, work, after plan, 180d
    Test : test, 08-01, 70d
		
section Programming
    CSS:b1, after implement copyright, 30d
    JavaScript  :b2, after b1, 20d
    Integration : after b2, 40d
    
section Design
    Sketch: active, wire, 06-12  , 18d
    Layout: implement, after wire, 24d
    UX test: crit, uxt, after implement, 24d
		
section Blog
    Blog writing: copyright, 07-29, 15d