Markdown 语法详解大全(超级版)（三）——甘特图语法详解

Markdown 语法详解大全(超级版)（一）
Markdown 语法详解大全(超级版)（二）
Markdown 语法详解大全(超级版)（三）
Markdown 语法详解大全(超级版)（四）
Markdown 语法详解大全(超级版)（五）
Markdown 语法详解大全(超级版)（六）

一、甘特图简介

Gantt图（甘特图）是一种用于图形化展示项目计划和进度的工具。
　　它由 Karol Adamiecki 于 1896 年首次开发，并由美国工程师 Henry Gantt 在 1910 年代独立开发，它说明了项目时间表以及完成任何一个项目所需的时间。
　　甘特图是一种条形图，将每个计划任务记录为一个从左向右延伸的连续条形。甘特图说明了项目的终端元素和摘要元素的开始日期和完成日期之间的天数。
　　Gantt图通过横轴x 轴表示时间，纵轴y 轴表示任务或活动，并使用水平条形图来展示任务的起始时间、结束时间和持续时间，记录不同的任务及其完成顺序。
　　每个任务的条形图在时间轴上进行排列，可以清楚地展示出任务之间的先后关系、任务的持续时间以及整个项目的进度。
　　Gantt图还可以显示任务的依赖关系、资源分配和里程碑等信息，帮助项目管理人员进行项目计划的安排和跟踪。
　　

二、Gantt图特点

Gantt图是一种用于项目管理的工具，它以条形图的形式展示项目的时间计划和进度。Gantt图是一种直观、可视化的工具，可以帮助项目管理人员有效规划和管理项目，提高项目的执行效率和成功率。
　　Gantt图具有以下特点：

• 1. 可视化：
     Gantt图以直观的方式展示项目的时间轴和任务的排列顺序，使项目计划和进度一目了然。
• 2. 时间管理：
     Gantt图可以帮助项目管理人员合理安排项目的时间，确保任务按照预定计划顺利进行。
• 3. 任务分配：
     Gantt图可以清楚地显示每个任务分配给哪个人或团队，以及任务的优先级和相互依赖关系。
• 4. 进度跟踪：
     通过更新Gantt图，可以及时了解项目进展情况，识别延迟或问题，并及时采取措施进行调整。
• 5. 交流和协作：
     Gantt图可以作为项目计划和进度的共享工具，方便团队成员之间的交流和协作，确保大家都了解和参与项目进展。
• 6. 可调整性：
     Gantt图可以根据需要进行调整和修改，以适应项目计划或进度的变化。

三、实例解释甘特图语法

我们先来看一下Markdown甘特图的样子

3.1、例子

下面是两个完整的 Markdown 语法的例子，演示了如何使用 Gantt 图表来显示项目的时间计划和里程碑

（1）、项目时间计划

gantt
    dateFormat  YYYY-MM-DD
    title  2023项目时间计划
    section  项目策划
    计划阶段             :a1, 2023-01-01, 30d
    section  项目开发
    开发阶段             :a2, after a1, 60d
    section  测试阶段
    测试阶段             :a3, after a2, 30d
    section  上线发布
    发布阶段             :a4, after a3, 14d
    section  项目完成
    项目完成             :a5, after a4, 0d

实例渲染效果如下：

　　这是一个简单的 Gantt 图表示例，它显示了一个项目的时间计划。 　　图表使用 `mermaid` 语法来生成，其中 `dateFormat` 用于指定日期的格式，`title` 用于设置图表的标题，`section` 用于定义图表的不同部分，而任务则使用 `:a1` 的形式指定，并指定任务的开始日期和持续时间。

在上述示例中，项目时间计划被分为四个阶段：策划、开发、测试和发布。每个阶段都有相应的任务，例如计划阶段、开发阶段等。任务之间使用 after 关键字来指定它们的顺序。

使用 Markdown 的 Gantt 图表可以帮助团队和项目经理更好地理解项目的时间计划，并与团队成员共享项目的进度和里程碑。
　　

（2）、项目进度表

gantt
dateFormat  YYYY-MM-DD
title 2022年项目进度表

section 项目计划
需求分析  :done,    des1, 2022-01-01,2022-01-05
设计阶段  :done,  des2, 2022-01-06,2022-01-10
开发阶段  :active,  des3, 2022-01-11,2022-01-20
测试阶段  :         des4, 2022-01-21,2022-01-25
部署上线  :         des5, 2022-01-26,2022-01-30

section 里程碑
需求分析完成:done,    done, 2022-01-05
设计阶段完成:done,  done, 2022-01-10
开发阶段完成:done,  done, 2022-01-20
测试阶段完成:done,  done, 2022-01-25
部署上线完成:active,  active, 2022-01-30

实例渲染效果如下：

　　该例子展示了一个项目进度表，包括项目计划和里程碑两个部分。

在项目计划部分，分别列出了需求分析、设计阶段、开发阶段、测试阶段和部署上线这几个任务，使用冒号后面的符号来表示任务的状态（例如done表示已完成，active表示正在进行）。然后给出了每个任务的开始日期和结束日期。在里程碑部分，列出了每个阶段的完成情况。
　　以上代码可以在Markdown编辑器中直接使用，并生成一个漂亮的Gantt图展示项目进度。

3.2、Markdown甘特图语法

甘特图的Markdown语法代码：

• ```mermaid甘特图内容```

3.3、甘特图语法实例详解

3.3.1、实例1_任务完成状况

实例渲染效果如下：

代码实现过程：

图表使用 mermaid 语法来生成，
（1）、第一行：gantt

gantt

指明这是个Markdown gantt甘特图

（2）、第二行： dateFormat YYYY-MM-DD

dateFormat  YYYY-MM-DD

dateFormat 用于指定日期的格式，​ 此例中，YYYY表示的是年，MM表示的月，DD表示是日。YYYY-MM-DD：4位数字年份-2位数字月份数-2位数字日期

（3）、第三行： title 任务完成状况

title 任务完成状况

title 用于设置图表的标题，这是一个可选字符串，显示在甘特图的顶部，用于描述整个图表。

（4）、第四行：section <区块名>

        section 现有任务
        已完成               :done,    des1, 2024-01-06,2024-01-08
        进行中               :active,  des2, 2024-01-07, 2d
        计划中               :         des3, after des2, 1d

区块语句
您可以将甘特图分成不同的部分，例如分离项目的不同部分，例如开发和文档编写。
请以section关键字开头并为其命名。
section 用于定义图表的不同部分，注意 与整个图表的标题不同，此名称是必需的。
而任务则使用 :a1 的形式指定，并指定任务的开始日期和持续时间。
done表示该工作已完成.
active表示该工作正激活，处于正在进行中.

（5）代码

gantt
        dateFormat  YYYY-MM-DD
        title 任务完成状况
        section 现有任务
        已完成               :done,    des1, 2024-01-06,2024-01-08
        进行中               :active,  des2, 2024-01-07, 2d
        计划中               :         des3, after des2, 1d

3.3.2、实例2_里程碑

里程碑实际上是事物历史或发展中的重要或重大事件。 因此，项目里程碑是在项目生命周期中发生的重要或重大事件。

项目里程碑也可以表明项目阶段的完成。 项目里程碑（重大事件或已完成阶段）可以在项目开始、期间或结束时。

项目里程碑是帮助您了解项目是否正在进行中的标记。 正如公路上的里程标记可以帮助汽车司机了解他们现在在哪里以及他们必须走多远，项目里程碑可以帮助项目经理了解项目的进展情况。

因此，项目里程碑是有效的调度工具。

您可以向图表中添加里程碑。里程碑与任务不同，因为它们表示单个时刻，并由关键字 标识 。
　　里程碑的确切位置由里程碑的初始日期和任务的“持续时间”确定，因此：初始日期 + 持续时间/2。
　　
实例渲染效果如下：

代码实现过程：

图表使用 mermaid 语法来生成，

（1）、第一行：gantt

gantt

指明这是个Markdown gantt甘特图

（2）、第二行： dateFormat HH:mm

dateFormat HH:mm

dateFormat 用于指定日期的格式，HH:mm 声明是24 小时制

（3）、第三行： title 项目里程碑

title 项目里程碑

title 用于设置图表的标题，这是一个可选字符串，显示在甘特图的顶部，用于描述整个图表。

（4）、第四行：axisFormat %H:%M

axisFormat %H:%M

axisFormat关键字用以指定时间轴的单位格式，默认的时间格式是YYYY-MM-DD.
用axisFormat关键字来指定时间单位格式时，每一个组合都是由一个%引导，
%H 24小时制十进制数表示小时
%M 十进制表示分钟[00, 59]

里程碑的确切位置由里程碑的初始日期和任务的“持续时间”确定，因此：初始日期 + 持续时间/2。

（5）、第五行： 初始里程碑 : milestone, m1, 17:49, 2m

初始里程碑 : milestone, m1, 17:49, 2m

确定初始里程碑的位置。里程碑与任务不同，因为它们代表时间上的单一瞬间，并由关键字milestone标识。以下是如何使用里程碑的示例。正如您所注意到的那样，里程碑的确切位置由起始日期和该任务的“持续时间”决定：初始日期+持续时间/2。

（6）、第六行：描述各个任务的数据

    任务 A : 12m
    任务 B : 5m

（7）、第七行： 最终里程碑: milestone, m2, 18:08, 4m

最终里程碑: milestone, m2, 18:08, 4m

确定最终里程碑的位置

（8）、代码

gantt
    dateFormat HH:mm
    title 项目里程碑
    axisFormat %H:%M
    初始里程碑 : milestone, m1, 17:49, 2m
    任务 A : 12m
    任务 B : 5m
    最终里程碑: milestone, m2, 18:08, 4m

四、相关语法参数

4.1、元数据语法

默认情况下，任务是按顺序执行的。
任务开始日期默认为前一个任务的结束日期。
冒号：将任务标题与其元数据分隔开。
元数据项用逗号、、分隔，。
有效的标签包括活动active、完成 done、临界值crit和里程碑milestone。
标签是可选的，但如果使用，必须先指定。
处理标签后，剩余的元数据项解释如下：
如果指定了单个项目，它将确定任务何时结束。它可以是特定的日期/时间或持续时间。如果指定了持续时间，则将其添加到任务的开始日期中，以确定任务的结束日期，同时考虑到任何排除情况。
如果指定了两个项目，则最后一个项目的解释与前一个情况相同。第一项可以指定明确的开始日期/时间（采用dateFormat指定的格式），也可以在[otherTaskID2之后引用另一个任务[其他任务ID3]]…]。在后一种情况下，任务的开始日期将根据任何引用任务的最新结束日期设置。
如果指定了三个项目，则最后两个项目将被解释为与前一个情况相同。第一项将表示任务的ID，可以使用后面的语法引用它。

元数据语法	开始日期	结束日期	身份证
<taskID>,<startDate>, <endDate>	startdate使用dateformat	endDate使用dateformat	taskID
<taskID>, <startDate>, <length>	startdate使用dateformat	开课日期 +length	taskID
<taskID>, after <otherTaskId>, <endDate>	先前指定任务的结束日期otherTaskID	endDate使用dateformat	taskID
<taskID>, after <otherTaskId>, <length>	先前指定任务的结束日期otherTaskID	开课日期 +length	taskID
<taskID>, <startDate>, until <otherTaskId>	startdate使用dateformat	以前指定的任务的开始日期otherTaskID	taskID
<taskID>, after <otherTaskId>, until <otherTaskId>	先前指定任务的结束日期otherTaskID	以前指定的任务的开始日期otherTaskID	taskID
<startDate>, <endDate>	startdate使用dateformat	enddate使用dateformat	不适用
<startDate>, <length>	startdate使用dateformat	开课日期 +length	不适用
after <otherTaskID>, <endDate>	先前指定任务的结束日期otherTaskID	enddate使用dateformat	不适用
after <otherTaskID>, <length>	先前指定任务的结束日期otherTaskID	开课日期 +length	不适用
<startDate>, until <otherTaskId>	startdate使用dateformat	以前指定的任务的开始日期otherTaskID	不适用
after <otherTaskId>, until <otherTaskId>	先前指定任务的结束日期otherTaskID	以前指定的任务的开始日期otherTaskID	不适用
<endDate>	前一个任务的结束日期	enddate使用dateformat	不适用
<length>	前一个任务的结束日期	开课日期 +length	不适用
until <otherTaskId>	前一个任务的结束日期	以前指定的任务的开始日期otherTaskID	不适用

注意：
在（v10.9.0+）中添加了对关键字until的支持。这可用于定义一个正在运行的任务，直到其他特定任务或里程碑开始。

为简单起见，该表没有显示使用after关键字列出的多个任务。

4.1、标题

title 标题是显示在甘特图顶部的可选字符串，用于设置图表的标题，描述整个图表。这是一个可选字符串，显示在甘特图的顶部。

4.2、设置日期

日期设置
dateFormat 定义甘特元素的日期输入格式。这些日期在渲染的图表输出中的表示方式由 axisFormat 定义。

4.2.1、输入的日期格式

默认的输入日期格式为 YYYY-MM-DD。您可以定义自定义 dateFormat。

dateFormat YYYY-MM-DD

支持以下格式选项：

输入	例	描述
YYYY	2014	4 位数字年份
YY	14	2 位数字年份
Q	1…4	一年的季度。将 month 设置为 quarter 中的第一个月。
M MM	1…12	月份数
MMM MMMM	一月。。12 月	区域设置中的月份名称dayjs.locale()
D DD	1…31	每月的日期
Do	第一。。第 31 名	具有序数的月份中的日期
DDD DDDD	1…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

4.2.2、excludes排除日期

excludes是一个可选属性，接受YYYY-MM-DD格式的特定日期、一周中的几天（“星期日”）或“周末”，但不接受“工作日”一词。这些日期将标记在图表上，并从任务的持续时间计算中排除。这意味着，如果在任务间隔内有排除的日期，则“跳过”的天数将添加到任务的末尾，以确保持续时间符合代码中的指定。

周末（v\11.0.0+）
排除周末时，可以将周末配置为周五和周六或周六和周日。默认情况下，周末为周六和周日。要定义周末开始日，可以在周五或周六之后的新行中添加一个可选属性weekend。

可以用excludes语句排除周末或某指定日期.
例如 excludes weekends 表示排除周末
excludes sunday 表示排除星期六
excludes 2024-6-20 表示排除2024-6-20
但是要注意，没有excludes weekdays.

当“排除”特定于任务的日期、日期或日期集合时，甘特图将通过向右延长相等天数来适应这些更改，而不是通过在任务内创建间隙。
但是，如果排除的日期位于设置为连续开始的两个任务之间，则排除的日期将以图形方式跳过并留空，并且下一个任务将在排除的日期结束后开始。
甘特图可用于跟踪项目完成之前所需的时间，但它也可以用于以图形方式表示“非工作日”，只需进行一些调整。

gantt
        dateFormat  YYYY-MM-DD
        title 不包括周五至周六周末的甘特图
        excludes weekends
        section 现有任务
        任务1               :a1, 2024-01-01, 30d
        任务2               :after a1, 20d

实例渲染效果如下：

4.2.3、轴上的输出日期格式

默认的输出日期格式为YYYY-MM-DD。
您可以自定义的axisFormat，例如2020-Q1表示2020年第一季度。

axisFormat %Y-%m-%d

支持以下格式字符串：

格式	定义
%a	缩写的工作日名称
%A	完整的工作日名称
%b	缩写月份名称
%B	完整的月份名称
%c	日期和时间，如 “%A %B %E %H：%M：%S %Y”
%d	用2位十进制数字表示月份中的天数，不足的补零[01,31]
%e	用2位十进制数字表示月份中的天数，不足的补空格[ 1,31]; 等同于使用 %_d
%H	用2位十进制数字表示小时数，hour （24 小时制） [00,23]
%I	用2位十进制数字表示小时数，不足的补零（12小时制） [01,12]
%j	用3位十进制数字表示年份中的天数，不足的补零 [001,366]
%m	用2位十进制数字表示年份中的月数，不足的补零 [01,12]
%M	用2位十进制数字表示分钟数，不足的补零 [00,59]
%L	用3位十进制数字表示毫秒数，不足的补零 [000, 999]
%p	AM 或 PM
%S	用2位十进制数字表示秒数，不足的补零 [00,61]
%U	用2位十进制数字表示年份中的周数，不足的补零 (星期日作为一周的第一天) [00,53]
%w	用十进制数字表示星期几 [0(Sunday),6]
%W	用2位十进制数字表示年份中的周数 (星期一作为一周的第一天) [00,53]
%x	日期, 以“%m/%d/%Y”的形式
%X	时间, 以 “%H:%M:%S”的形式
%y	不包括世纪的年份，表示为2位十进制数，不足补零 [00,99]
%Y	包括世纪的年份，表示为4位十进制,数，不足补零
%Z	时区偏移量，例如 “-0700”
%%	文本 “%” 字符,单个百分号 “%”

更多信息： https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format

4.3、轴刻度 （v10.3.0+）

默认的输出刻度是自动的。您可以自定义刻度间隔，例如1天或1周。

tickInterval 1day

模式为：

/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;

更多信息： https://github.com/d3/d3-time#interval_every

基于周的tickIntervals默认从周日开始一周。如果要指定tickInterval应开始的另一个工作日，请使用weekday选项：

代码：
gantt
tickInterval 1week
weekday monday

警告
v10.3.0中添加了毫秒和秒支持

4.4、section 区块分割 和 task 任务条

section关键字是用来表示任务的分块的，不同的任务隶属于不同的section. section后同行的内容全部作为该section的区块名称.

​ 一个section下可以并排排入多个同级的task任务. 每一个task对应一个甘特图进度条.
​ 每一个task后，跟进的是状态（可缺省）、任务名（可缺省）、开始时间（或任务位置）、延续时长（或结束时间）.

​ 写成语法格式为：
task显示名 : 状态（可缺省） 任务名（可缺省） 开始时间（或任务位置） 延续时长（或结束时间）
​ 其中，任务名可用作位置标记，比如：

gantt
title 一个甘特图例子
section Sb
任务1 : desA, 2023-6-5, 2d
任务2 : after desA, 3d

实例渲染效果如下：

gantt
title 一个甘特图例子
section Sb
任务A :  2023-2-1, 2d
任务B : 2023-2-6, 2023-2-13

实例渲染效果如下：

4.5、task bar state 进度条状态

task进度条有几种状态：

• <default>：表示的状态即为缺省下的状态，具体来说，就是已计划但尚未实施.
• \done：done表示该工作已完成.
• active：active表示该工作正激活，处于正在进行中.
• crit：表示该任务为关键任务. crit状态可以与其他状态复用.

gantt
	title 一个甘特图例子
	section sectionA
	taskA: done, 2024-2-4, 1d
	taskB: 2024-2-3, 3d
	taskC: active, 2024-2-6, 4d
	taskD: crit, 2024-2-9, 2d

实例渲染效果如下：

4.6、使用紧凑模式显示

紧凑模式允许您在同一行中显示多个任务。通过预先设置YAML设置来设置图表的显示模式，可以为甘特图启用紧凑模式。
注意 只有mermaid v10.2.3+才支持紧凑模式

gantt
    title 一个甘特图
    dateFormat  YYYY-MM-DD

    section Section
    一个任务           :a1, 2014-01-01, 30d
    另一个任务     :a2, 2014-01-20, 25d
    另一个      :a3, 2014-02-10, 20d

实例渲染效果如下：

4.7、注释

可以在甘特图中输入注释，这些注释将被解析器忽略。
注释必须单独占据一行，并且必须以%%（双百分号）开头。
从注释开始到下一个换行符之间的任何文本都将被视为注释，包括任何图表语法。

gantt
    title 这是一个甘特图示例
    %% 这是一段注释
    dateFormat YYYY-MM-DD
    section 阶段1
        任务1          :a1, 2024-01-01, 30d
        任务2    :after a1, 20d
    section 阶段2
        任务3 :2024-01-12, 12d
        任务4    :24d

实例渲染效果如下：

4.8、样式

甘特图的样式是通过定义一些CSS类来实现的。在渲染过程中，这些类将从位于src/diagrams/gantt/styles.js的文件中提取。

使用的类

类	描述
grid.tick	网格线的样式
grid.path	网格边框的样式
.taskText	任务文本样式
.taskTextOutsideRight	右侧超出活动栏的任务文本的样式。
.taskTextOutsideLeft	左侧超出活动栏的任务文本的样式。
todayMarker	“今日标记”的切换和样式

样例样式表:

.grid .tick {
  stroke: lightgrey;
  opacity: 0.3;
  shape-rendering: crispEdges;
}
.grid path {
  stroke-width: 0;
}

#tag {
  color: white;
  background: #fa283d;
  width: 150px;
  position: absolute;
  display: none;
  padding: 3px 6px;
  margin-left: -80px;
  font-size: 11px;
}

#tag:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0;
  border-width: 10px;
  border-bottom-color: #fa283d;
  top: -20px;
}
.taskText {
  fill: white;
  text-anchor: middle;
}
.taskTextOutsideRight {
  fill: black;
  text-anchor: start;
}
.taskTextOutsideLeft {
  fill: black;
  text-anchor: end;
}

4.9、今天标记(当前日期标记)

您可以设置当前日期的标记样式或隐藏该标记。要设置其样式，请为 key 添加一个值。
您可以针对“当前日期标记”设置样式或隐藏“当前日期标记”。
要进行样式设置，请为todayMarker关键字。

todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5

隐藏标记, 设置 todayMarker关闭。

todayMarker off

显示标记, 设置 todayMarker打开。

todayMarker on

4.10、配置

可以调整甘特图的渲染边距。（调整用于渲染甘特图的边距。）
这是通过定义配置对象的ganttConfig部分来实现的。如何使用CLI在mermaidCLI页面中进行了描述。
mermaid.ganttConfig可以设置为带有配置参数的JSON字符串或相应的对象。

mermaid.ganttConfig = {
  titleTopMargin: 25, // 图表上方文本的页边空白
  barHeight: 20, // 图表中条形的高度
  barGap: 4, // 甘特图中不同活动之间的边距
  topPadding: 75, // 标题和甘特图之间以及轴和甘特图之间的边距。
  rightPadding: 75, // 活动右侧为节名分配的空间
  leftPadding: 75, // 活动左侧为节名称分配的空间
  gridLineStartPadding: 10, // 网格线的垂直起始位置
  fontSize: 12, // 字体大小
  sectionFontSize: 24, //章节字体大小
  numberSectionStyles: 1, // 交替截面样式的数量
  axisFormat: '%d/%m', // 轴的日期/时间格式
  tickInterval: '1 week', // 轴刻度
  topAxis: true, // 设置此标志后，日期标签将添加到图表顶部
  displayMode: 'compact', // 打开紧凑模式
  weekday: 'sunday', // 一周的间隔应该从哪一天开始
};

可以配置的参数:

参数	描述	默认值
mirrorActor	开启/关闭在图表下方和上方的actor的渲染。	false
bottomMarginAdj	调整图形结束的位置。带有CSS宽边框样式可能会生成意外的裁剪，因此存在这个配置参数。	1

4.11、互动

可以将单击事件绑定到任务。点击可以导致javascript回调或链接，该链接将在当前浏览器选项卡中打开。注意：使用securityLevel='strict’时禁用此功能，使用securityLevel='lose’时启用此功能。

click taskId call callback(arguments)
click taskId href URL

taskId是任务的id
callback是在显示图形的页面上定义的javascript函数的名称，如果没有指定其他参数，则将以taskId作为参数调用该函数。

在html上下文中使用交互式链接的完整示例：

<body>
  <pre class="mermaid">
    gantt
      dateFormat  YYYY-MM-DD

      section Clickable
      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
      Print arguments         :cl2, after cl1, 3d
      Print task              :cl3, after cl2, 3d

      click cl1 href "https://mermaidjs.github.io/"
      click cl2 call printArguments("test1", "test2", test3)
      click cl3 call printTask()
  </pre>

  <script>
    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

五、示例

5.1、条形图（使用甘特图）

gantt
    title Git问题-自上次更新以来的天数
    dateFormat X
    axisFormat %s
    section 第19062节
    71   : 0, 71
    section 第19401节
    36   : 0, 36
    section 第193节
    34   : 0, 34
    section 第7441节
    9    : 0, 9
    section 第1300节
    5    : 0, 5

实例渲染效果如下：

gantt
        dateFormat  YYYY-MM-DD
        title 现有任务甘特图
        section 现有任务
        已完成               :done,    des1, 2022-01-06,2014-01-08
        进行中               :active,  des2, 2022-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d

实例渲染效果如下：

gantt
    title 购买设备成本
    dateFormat  YYYY-MM-DD
    section 设备购买
    设备需求           :done,    des1, 2022-01-01, 2022-01-05
    设备选型           :active,  des2, 2022-01-06, 2022-01-10
    设备采购           :         des3, 2022-01-11, 2022-01-15
    设备付款           :         des4, 2022-01-16, 2022-01-20
    section 设备交付
    设备交付           :         des5, 2022-01-21, 2022-01-25
    设备验收           :         des6, 2022-01-26, 2022-01-30
    设备调试           :         des7, 2022-01-31, 2022-02-04
    section 成本支付
    设备首付款         :         des8, 2022-01-16, 2022-01-20
    设备尾款           :         des9, 2022-01-31, 2022-02-04

实例渲染效果如下：

Markdown 语法详解大全(超级版)（一）
Markdown 语法详解大全(超级版)（二）
Markdown 语法详解大全(超级版)（三）
Markdown 语法详解大全(超级版)（四）
Markdown 语法详解大全(超级版)（五）
Markdown 语法详解大全(超级版)（六）