前言

甘特图这图很适合任务排期，在各种敏捷开发系统或者任务编排软件都能看到身影。

基础语法

字段解析

字段 解释
title 标题
dateFormat 日期格式
section 区域块
excludes 排除日期
axisFormat 图标 x轴日期格式调整,比如只显示月日%m-%d

任务修饰符

字段 解释
:done 完成
:active 任务激活
:crit 强调、关键任务
after 在某个日期之后, after des1 2d(任务 x des1日期之后两天)
:d 相对上个任务结束时间排期

- d
- h
- 天数
- 小时

基本姿势

  1. gantt
  2.     dateFormat YYYY-MM-DD HH MM
  3.     title 这是一个演示的甘特图
  5.     section x云35迭代
  6.     主题3.0  :active,2019-12-10,5d
  7.     @h3/antd :crit,2019-12-15,7d
  8.     单元测试 :3d

Gantt(甘特图） - 图1

排除周六日及任务推后

  1. gantt
  2.     dateFormat YYYY-MM-DD
  3.     title 这是一个演示的甘特图
  4.     excludes weekdays saturday,sunday
  5.     section x云35迭代
  6.     主题3.0  :active,des1,2019-12-10,5d
  7.     @h3/antd :crit,after des1 3d,7d

Gantt(甘特图） - 图2

X轴日期显示调整

  1. gantt
  2.     dateFormat YYYY-MM-DD HH MM
  3.     title 这是一个演示的甘特图
  4.     excludes weekdays saturday,sunday
  5.   axisFormat %m-%d
  7.     section x云35迭代
  8.     主题3.0  :active ,a1 ,2019-12-10,5d
  9.     @h3/antd :crit, after a1 3d,7d
  11.   section x云34迭代
  12.   报表批量编辑 :done,2019-11-10, 2019-12-01
  1. # axisFormat 可用的参数
  3. %a - abbreviated weekday name.
  4. %A - full weekday name.
  5. %b - abbreviated month name.
  6. %B - full month name.
  7. %c - date and time, as "%a %b %e %H:%M:%S %Y".
  8. %d - zero-padded day of the month as a decimal number [01,31].
  9. %e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
  10. %H - hour (24-hour clock) as a decimal number [00,23].
  11. %I - hour (12-hour clock) as a decimal number [01,12].
  12. %j - day of the year as a decimal number [001,366].
  13. %m - month as a decimal number [01,12].
  14. %M - minute as a decimal number [00,59].
  15. %L - milliseconds as a decimal number [000, 999].
  16. %p - either AM or PM.
  17. %S - second as a decimal number [00,61].
  18. %U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
  19. %w - weekday as a decimal number [0(Sunday),6].
  20. %W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
  21. %x - date, as "%m/%d/%Y".
  22. %X - time, as "%H:%M:%S".
  23. %y - year without century as a decimal number [00,99].
  24. %Y - year with century as a decimal number.
  25. %Z - time zone offset, such as "-0700".
  26. %% - a literal "%" character.

Gantt(甘特图） - 图3

官方综合例子

  1. gantt
  2.        dateFormat  YYYY-MM-DD
  3.        title Adding GANTT diagram functionality to mermaid
  5.        section A section
  6.        Completed task            :done,    des1, 2014-01-06,2014-01-08
  7.        Active task               :active,  des2, 2014-01-09, 3d
  8.        Future task               :         des3, after des2, 5d
  9.        Future task2              :         des4, after des3, 5d
  11.        section Critical tasks
  12.        Completed task in the critical line :crit, done, 2014-01-06,24h
  13.        Implement parser and jison          :crit, done, after des1, 2d
  14.        Create tests for parser             :crit, active, 3d
  15.        Future task in critical line        :crit, 5d
  16.        Create tests for renderer           :2d
  17.        Add to mermaid                      :1d
  19.        section Documentation
  20.        Describe gantt syntax               :active, a1, after des1, 3d
  21.        Add gantt diagram to demo page      :after a1  , 20h
  22.        Add another diagram to demo page    :doc1, after a1  , 48h
  24.        section Last section
  25.        Describe gantt syntax               :after doc1, 3d
  26.        Add gantt diagram to demo page      :20h
  27.        Add another diagram to demo page    :48h

Gantt(甘特图） - 图4

总结

熟悉了这个，写任务排期就跟写 markdown列表一样，速度很快。

请不要和专业的任务排期软件对比，没有可比性！两个的出发点和量级都不是同等的。