{%hackmd rJ_1SdPkxx %} # How to create Gantt chart You can check the syntax in [Both mode](https://hackmd.io/YX0iJWTFR8ONR0cFuWkqjQ) 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`. 5. Separate different tasks under the same section by "line breaks", and assign durations. ### Here is a simple Gantt chart ```mermaid gantt title Gantt chart 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 ``` ### Syntax ```markdown= 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. ```mermaid gantt %% Declare this as a Gantt chart title Project AAA %% Let's give it a title dateFormat MM-DD %% This syntax must be in date format axisFormat %m-%d %% Vertical Axis Date Format section My website %% Declare a block Plan : crit, done, plan, 05-15, 10d %%Syntax： %%Task Names on the Gantt Chart : [crit], [active|done], task name, [date|after task name], duration of time 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 ``` ### Syntax ```markdown= 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 ```