Mermaid 甘特图

发表于 更新于 本文字数： 2.6k 阅读时长 ≈ 2 分钟

参考资料

案例

1
2
3
4
5
6
7
8
9
10
11
12
gantt
  title 项目进度
  dateFormat YYYY-MM-DD
  section 设计
  任务1: a1, 2022-01-01, 3d
  任务2: a2, after a1, 2d
  %% 注释内容
  section 开发
  任务3: b1, after a2, 4d
  里程碑: milestone, after b1
  section 测试
  任务4:c1, after b1, 2d

修改坐标轴格式

坐标轴（横坐标）默认输出日期格式为 YYYY-MM-DD，以天作为单位，如何以分钟或者秒作为横坐标的单位呢：

1
axisFormat %Y-%m-%d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
%a - 缩写的星期几名称。
%A - 完整的星期几名称。
%b - 缩写的月份名称。
%B - 完整的月份名称。
%c - 日期和时间，格式为 "%a %b %e %H:%M:%S %Y"。
%d - 以十进制数表示的零填充的月份中的日期 [01,31]。
%e - 以十进制数表示的空格填充的月份中的日期 [ 1,31]；等同于 %_d。
%H - 小时（24小时制）的十进制数表示 [00,23]。
%I - 小时（12小时制）的十进制数表示 [01,12]。
%j - 以十进制数表示的一年中的日期 [001,366]。
%m - 以十进制数表示的月份 [01,12]。
%M - 以十进制数表示的分钟 [00,59]。
%L - 以十进制数表示的毫秒数 [000, 999]。
%p - 上午（AM）或下午（PM）。
%S - 以十进制数表示的秒数 [00,61]。
%U - 以十进制数表示的一年中的周数（以星期日作为一周的第一天） [00,53]。
%w - 以十进制数表示的星期几 [0（星期日）,6]。
%W - 以十进制数表示的一年中的周数（以星期一作为一周的第一天） [00,53]。
%x - 日期，格式为 "%m/%d/%Y"。
%X - 时间，格式为 "%H:%M:%S"。
%y - 以十进制数表示的不带世纪的年份 [00,99]。
%Y - 以十进制数表示的带世纪的年份。
%Z - 时区偏移，例如 "-0700"。
%% - 字面上的 "%" 字符。

例如需要将坐标轴改为小时和分钟，那么：

1
2
3
4
5
6
7
gantt
    title 甘特图
+   axisFormat %H-%M
+   dateFormat  HH:mm
    section 样本1
    任务1:a1,00:00, 70s
    任务2:after a1, 100s

image.png

将坐标轴改成分钟和秒，那么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
gantt
    title 效率计算
+   axisFormat %M:%S
+   dateFormat  mm:ss
%% 进样
    section 流程1
    步骤1: milestone,a0,0,0s
    步骤2: a1,after a0,8.6s
    步骤3: a2,after a1,3s
    步骤4: a3,after a2,10s
    section 流程2
    步骤2: b1,after a2,8.6s
    步骤3: b2,after b1,3s
    步骤4: b3,after b2,10s

image.png

给里程碑取别名

1
2
3
4
5
6
7
gantt
    dateFormat HH:mm
    axisFormat %H:%M
+   Initial milestone : milestone, m1, 17:49, 2m
    Task A : 10m
    Task B : 5m
+   Final milestone : milestone, m2, 18:08, 4m

image.png

某效率计算

案例分析如下，对于有同步运行的动作，可通过这种时间重叠的方式，求出仪器检测样本的最快时间：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
gantt
    title 水分检测效率计算
    axisFormat %M-%S
    dateFormat  mm-ss
   
    section 样本1
    开始检测: milestone,SF1-0,0,0s
    样本瓶就位:SF1-1,after SF1-0,10s
    夹取注射器: SF1-2,after SF1-0,10s
    开盖:SF1-3,after SF1-1,10s
    润洗3次注射器: SF1-4,after SF1-2,45s
    抽取样品: SF1-5,after SF1-4,10s
    拧盖:SF1-6,after SF1-5,10s
    称重: SF1-7,after SF1-5,20s
    注入仪器:SF1-8,after SF1-7,20s
    称重: SF1-9,after SF1-8,20s
    注射器放托盘: SF1-10,after SF1-9,10s
    水分检测:SF1-11,after SF1-8,240s

    section 样本2
    样本瓶就位:SF2-1,after SF1-10,10s
    夹取注射器: SF2-2,after SF1-10,10s
    开盖:SF2-3,after SF2-1,10s
    润洗3次注射器: SF2-4,after SF2-2,45s
    抽取样品: SF2-5,after SF2-4,10s
    拧盖:SF2-6,after SF2-5,10s
    称重: SF2-7,after SF2-5,20s
    注入仪器:SF2-8,after SF2-7,20s
    称重: SF2-9,after SF2-8,20s
    注射器放托盘: SF2-10,after SF2-9,10s
    水分检测:SF2-11,after SF2-8,240s

    section 样本3
    样本瓶就位:SF3-1,after SF2-10,10s
    夹取注射器: SF3-2,after SF2-10,10s
    开盖:SF3-3,after SF3-1,10s
    润洗3次注射器: SF3-4,after SF3-2,45s
    抽取样品: SF3-5,after SF3-4,10s
    拧盖:SF3-6,after SF3-5,10s
    称重: SF3-7,after SF3-5,20s
    注入仪器:SF3-8,after SF3-7,20s
    称重: SF3-9,after SF3-8,20s
    注射器放托盘: SF3-10,after SF3-9,10s
    水分检测:SF3-11,after SF3-8,240s

image.png

Tips：每个样本检测需要执行的操作都是一样的。第一个样本的代码写完后，后续可以通过查找替换的方式，进行批量替换。例如在样本一中将 SF1-1 第一个 1 替换为 2，即 SF2-1，样本 2 的代码便很快可以修改完毕。