{%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

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

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.

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

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