mermaid之甘特图

mermaid中的甘特图

文章目录

    • mermaid中的甘特图
      • 1. 句法
      • 2. 日期格式化
      • 3. 时间格式化

甘特图是一种条形图,常用于说明项目进度表。甘特图说明了项目的终端元素和摘要元素的开始和结束日期。

示例:

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

Mon 06 Mon 13 Mon 20 Mon 27 Mon 03 Mon 10 Mon 17 A task Another task Task in sec another task Section Another A Gantt Diagram

1. 句法

gantt
dateFormat YYYY-MM-DD
title Adding FANTT 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

Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid

2. 日期格式化

具体参考:http://momentjs.com/docs/#/parsing/string-format/

3. 时间格式化

具体参考:https://github.com/mbostock/d3/wiki/Time-Formatting

你可能感兴趣的:(markdown)