Mermaid能绘制的内容

关键字图类型关键字图类型
pie饼状图graph图
flow流程图gantt甘特图
classDiagram类图stateDiagram状态图
journey用户旅程图

图（Graph）

引用站外地址
【个人博客】使用Mermaid在Markdown中绘制流程图
6Young

类图（classDiagram）

引用站外地址
【个人博客】使用Mermaid在Markdown中绘制类图
6Young

其他类型图（pie、stateDiagram、journey）

引用站外地址
【个人博客】使用Mermaid在Markdown中绘制其他类型图
6Young

甘特图

相关参数

title（甘特图标题）

1
title 甘特图的标题

dateFormat（输入时间格式）

1
dateFormat YYYY-MM-DD %%输入数据的时间格式
标记含义标记含义
YYYY四位年h无0补齐的时，12小时制
YY两位年hh两位的时，12小时制
M无0补齐的月m无0补齐的分
MM两位的月mm两位的分
D无0补齐的日s无0补齐的秒
DD两位的日ss两位的秒
H无0补齐的时，24小时制Z ZZUTC时区
HH两位的时，24小时制

axisFormat（输出时间格式）

1
axisFormat %m-%d %%显示在时间轴上的格式
标记含义标记含义
%Y四位年%H两位的时，24小时制
%y两位年%I两位的时，12小时制
%m两位月%M两位的分
%d0补齐的两位日%S两位的秒
%e空格补齐的两位日

excludes（排除的时间）

1
2
excludes weekends 2023-08-09  %%排除的时间
excludes weekends, 2023-08-09  %%排除的时间

在甘特图上排除的时间（显示为灰色），用空格或者逗号分隔。

用weekends可以直接排除所有周末。

todayMarker（“今日”标记）

是否显示当前日期（默认为显示）

参数值：on/off

section（项目名称）

1
2
3
4
section 项目名称
	任务1
	任务2（可选）
	里程碑（可选）

任务

任务描述

1
2
3
%% 任务描述 : [任务状态,] [任务名称,] 开始时间, 时长或结束时间
任务1 : done, a1, 2023-08-01, 3d
任务2 : active, a2, after a1, 2023-08-08

其中开始时间可以使用：after 其他任务名称的方式确定

任务状态

状态描述
done已完成
active激活，进行中
空白默认，尚未实施
crit关键任务，可以与其他状态叠加使用

milestone（里程碑）

1
里程碑 : milestone, a3, 2023-08-07, 1d

关键字milestone声明的任务为里程碑，实际显示的位置为任务时间段的正中间。

具体使用可以将milestone当作一个任务的任务状态进行使用。

甘特图示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```mermaid
gantt
    title 甘特图的标题
    dateFormat YYYY-MM-DD
    axisFormat %m-%d
    excludes weekends
    todayMarker on
    
    section 项目A
        任务1 : done, a1, 2023-08-01, 3d
        任务2 : active, a2, after a1, 2023-08-08
        里程碑 : milestone, a3, 2023-08-07, 1d
    section 项目B
        任务1 : b1, 2023-08-07, 4000m
        任务2 : crit, b2, after a2, 15h