Markdown mermaid种草(4)_ 甘特图
Markdown mermaid种草(4)_ 甘特图
文章目录
- Markdown mermaid种草(4)_ 甘特图
-
- 1 甘特图简介
- 2 mermaid甘特图语法及参数
-
- 2.1 gantt图开始关键字
- 2.2 title 标题
- 2.3 date Format 时间格式指定
- 2.4 axis Format 时间轴格式
- 2.5 section 区块分割 和 task 任务条
- 2.6 task bar state 进度条状态
- 2.7 today Marker 当前时间线
- 2.8 excludes排除日期
- 2.9 综合举例
1 甘特图简介
甘特图是工程计划中常用的一种图形，用以管理任务的分解、时间的长度和节点计划、以及实际进度和计划进度的差距等等.
甘特图将记录每个计划的任务作为一个连续的条形，从左到右延伸. x 轴表示时间， y 轴记录不同的任务及其完成顺序.
从上面这段描述里我们能够摘取到甘特图的一些重要因素：时间、任务、计划和进度.
对于mermaid甘特图，我们也是要围绕以上要素组织和讨论.
2 mermaid甘特图语法及参数
2.1 gantt图开始关键字
调用mermaid,可以首先从标题开始. 标题的关键字为gantt.
gantt
表明这是一段mermaid用来绘制甘特图的代码. 仅此而已.
2.2 title 标题
title关键字表明当前绘制的甘特图的标题，注意title是可以缺省的.甘特图可以不加标题.
gantt
title This is a title
2.3 date Format 时间格式指定
甘特图指定时间格式的关键字为dateFormat：
gantt
dateFormat YYYY-MM-DD
除了上例中演示的时间格式之外，还可以使用其他的时间格式，dateFormat允许的时间格式一览表：
| 输入 | 举例 | 描述 |
|---|---|---|
| YYYY | 2021 | 4位数表示年份 |
| YY | 21 | 2位数表示年份 |
| Q | 1…4 | 表示季度，设置月份时将直接跳到季度的第一个月份 |
| M MM | 1…12 | 按数字表示的月份 |
| MMM MMMM | Jan…Dec | 按月份简称表示的月份 |
| D DD | 1…31 | 按数字表示的日期 |
| DDD DDDD | 1…365 | 按日期在一年365天中的次序来显示日期 |
| X | 1410715640.579 | Unix的时间戳，秒级 |
| x | 1410715640579 | Unix的时间戳，毫秒级 |
| H HH | 0…23 | 24小时制 |
| h hh | 1…12 | 12小时制，和a A一起用 |
| a A | am pm | 上下午时刻制 |
| m mm | 0…59 | 数字显示的分钟 |
| s ss | 0…59 | 数字显示的秒 |
| S | 0…9 | 十分之一秒显示 |
| SS | 0…99 | 百分之一秒显示 |
| SSS | 0…999 | 千分之一秒显示 |
| Z ZZ | +12:00 | UTC标准时区差距, ±HH:mm, ±HHmm, 或者是Z |
2.4 axis Format 时间轴格式
axisFormat关键字用以指定时间轴的单位格式，默认的时间格式是YYYY-MM-DD.
用axisFormat关键字来指定时间单位格式时，每一个组合都是由一个%引导，如下例所示：
axisFormat %Y-%m-%d
此例中，%Y表示的是年，%m表示的月，%d表示的是天.
| 符号写法 | 含义 | 样例举例 |
|---|---|---|
| %a | 缩写的星期几的名称 | Mon Tue Wed Thu Fri Sat Sun |
| %A | 全称的星期几的名称 | Monday Tuesday Wednesday Thursday Friday Saturday Sunday |
| %b | 缩写的月份名称 | Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec |
| %B | 全称的月份名称 | January February March April May June July August September October November December |
| %c | 日期和时间，和"%a %b %e %H:%M:%S %Y"一样 | Mon Apr 3 12:11:23 2020 |
| %d | 用0填充补位的月份中的日期，十位小数[01,31] | 01 02 03 04 05…31 |
| %e | 用空格填充补位的月份中的日期，十位小数[ 1,31] | _1, _2, _3 … 31(_表示补位的空格) |
| %H | 24小时制十进制数表示小时 | 1 2 3 4 5 … 24 |
| %I | 12小时制十进制数表示小时 | 1 2 3 4 5 … 12 |
| %j | 十进制数表示一年中的第几天[001,366] | 001， 002， 003 … 366 |
| %m | 十进制数表示月份[01,12] | 01, 02, 03 … 12 |
| %M | 十进制表示分钟[00, 59] | 00, 01, 02, 03 … 59 |
| %L | 十进制表示毫秒[000,999] | 000, 001, 002 … 999 |
| %p | AM或者PM | AM PM |
| %S | 十进制表示秒数[00, 61] | 00, 01, 02, 03 … 61 |
| %U | 十进制表示一年中的第几周（星期日为一周之始）[00, 53] | 00, 01, 02, 03 … 53 |
| %w | 用十进制数字表示星期[0(星期天), 6] | 0 1 2 3 4 5 6 |
| %W | 十进制表示一年中的第几周（星期一为一周之始）[00, 53] | 00, 01, 02, 03 … 53 |
| %x | 日期，“%m/%d/%Y” | 5/3/2020 |
| %X | 时间，“%H:%M:%S” | 12:23:32 |
| %y | 十进制的年份表示，没有世纪，仅保留最后两位[00, 99] | 00, 01, 02 … 99 |
| %Y | 完整的年份表示 | 2000 2001 2002 |
| %Z | 时区补偿，如“-0700” | 0800 -0700 |
| %% | %号 | % |
2.5 section 区块分割 和 task 任务条
section关键字是用来表示任务的分块的，不同的任务隶属于不同的section. section后同行的内容全部作为该section的区块名称.
一个section下可以并排排入多个同级的task任务. 每一个task对应一个甘特图进度条.
每一个task后，跟进的是状态（可缺省）、任务名（可缺省）、开始时间（或任务位置）、延续时长（或结束时间）.
写成语法格式为：
task显示名 : 状态（可缺省） 任务名（可缺省） 开始时间（或任务位置） 延续时长（或结束时间）
其中，任务名可用作位置标记，比如：
gantt
section S1
task name1 : desA, 2020-1-5, 2d
task name2 : after desA, 2d
gantt
title Example
section SectionA
task A: 2021-2-5, 5d
task B: 2021-2-6, 2021-2-13
2.6 task bar state 进度条状态
task进度条有三种状态，done，active
其中，
done表示该工作已完成.
active表示该工作正激活，处于正在进行中.
对于关键任务，还提供了一个crit状态，表示该任务为关键任务. crit状态可以与其他状态复用.
可以从下例中看到不同状态的进度条颜色：
gantt
title Example
section sectionA
taskA: done, 2021-2-4, 1d
taskB: 2021-2-5, 1d
taskC: active, 2021-2-6, 3d
taskD: crit, 2021-2-9, 2d
2.7 today Marker 当前时间线
可以打开（默认）/关闭当前时间线的显示. 即 todayMarker
gantt
title Example
section SectionA
task A : 2021-2-3, 10d
task B : 2021-2-14, 12d
gantt
title Example
todayMarker off
section SectionA
task A : 2021-2-3, 10d
task B : 2021-2-14, 12d
2.8 excludes排除日期
可以用excludes语句排除周末或某指定日期.
例如 excludes weekends 表示排除周末
excludes sunday 表示排除星期六
excludes 2020-5-20 表示排除2020-5-20
但是要注意，没有excludes weekdays.
2.9 综合举例
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2021-02-06,2021-02-08
Active task :active, des2, 2021-02-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, 2021-02-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
