markdown 由简入繁,上手跟我做(九)甘特图

甘特图通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。

例 1

```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2019-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2019-01-12 , 12d
another task : 24d
```

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2019-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2019-01-12  , 12d
    another task      : 24d

例 2

```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
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
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
```

 gantt
 dateFormat YYYY-MM-DD
 title Adding GANTT diagram functionality to mermaid
 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

    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

参数说明

header 1header 2
title标题
dateFormat日期格式
section模块
Completed已经完成
Active当前正在进行
Future后续待处理
crit关键阶段
日期缺失默认从上一项完成后

上一篇 markdown 由简入繁,上手跟我做(八)时序图
markdown 教程(目录)
下一篇 markdown 由简入繁,上手跟我做(十)echarts 图表 - 折线(面积)图