Markdown 甘特图绘制详解

??作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注?、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

一、前言

Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。

本节将重点介绍如何通过 Mermaid 绘制「甘特图」。

甘特图 (Gantt chart) 也被称为横道图、条状图（Bar chart）。通常用于展示项目进度，它的核心对象是「时间」，并在时间的基础上，展示了「成本」和「范围」之间的联系

二、甘特图语法基础

基本的甘特图由「标题」、「日期格式约定」、「分组及任务」三部分组成。

在Mermaid中，使用甘特图语法非常简单，以下是一个基本的甘特图示例：

```mermaid
gantt
    title A Gantt Diagram
    section Section
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-02-12  , 12d
    another task    : 24d
```

在上述例子中，我们使用gantt关键字开始定义一个甘特图，通过section关键字定义不同的部分，然后用任务名、起始日期、持续时间来描述任务。

三、详细语法介绍

标题

使用title关键字来添加甘特图的标题，例如：

```mermaid
gantt
    title 这是一个标题
```

任务

通过在甘特图中添加任务，使用任务名、起始日期、持续时间的格式，例如：

```mermaid
gantt
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1, 20d
```

部分

使用section关键字来划分不同的部分，提高图表的可读性，例如：

```mermaid
gantt
    section Planning
    Task 1           :a1, 2024-01-01, 7d
    Task 2           :after a1, 5d
```

依赖关系

在任务之间建立依赖关系，使用after关键字，例如：

```mermaid
gantt
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1, 20d
```

规定日期格式

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

dateFormat YYYY-MM-DD

通过设置 dateFormat 属性，可以指定甘特图定义日期时的解析方式。

日期的格式支持以下情形：

表达式	取值示例	描述
YYYY	2014	4 位数年
YY	14	2 位数年
Q	1…4	季度数
M MM	1…12	月份数
MMM MMMM	January…Dec	月份名称
D DD	1…31	月中天数
Do	1st…31st	月中第几天
DDD DDDD	1…365	年中天数
X	1410715640.579	Unix 时间戳（秒）
x	1410715640579	Unix 时间戳（毫秒）
H HH	0…23	24 小时制小时数
h hh	1…12	12 小时制小时数
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	时区

轴上的输出日期格式

默认输出日期格式为YYYY-MM-DD。可以自定义axisFormat，例如2020-Q1。

axisFormat  %Y-%m-%d

支持以下格式字符串：

格式	定义
%a	工作日缩写名称
%A	工作日的完整名称
%b	月份名称缩写
%B	月份全名
%c	日期和时间，如 “%a %b %e %H:%M:%S %Y”
%d	zero-padded day of the month as a decimal number [01,31]
%e	space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
%H	hour (24-hour clock) as a decimal number [00,23]
%I	hour (12-hour clock) as a decimal number [01,12]
%j	day of the year as a decimal number [001,366]
%m	month as a decimal number [01,12]
%M	minute as a decimal number [00,59]
%L	milliseconds as a decimal number [000, 999]
%p	上午或下午
%S	second as a decimal number [00,61]
%U	week number of the year (Sunday as the first day of the week) as a decimal number [00,53]
%w	weekday as a decimal number [0(Sunday),6]
%W	week number of the year (Monday as the first day of the week) as a decimal number [00,53]
%x	日期，如 “%m/%d/%Y”
%X	时间，如 “%H:%M:%S”
%y	year without century as a decimal number [00,99]
%Y	年份，世纪为十进制数
%Z	时区偏移量，例如 “-0700”
%%	一个 “%” 字面字符

交互

可以将点击事件绑定到任务。单击可以打开链接，该链接将在当前浏览器选项卡中打开。

click taskId href URL

注释

可以在甘特图中输入注释，解析器将忽略这些注释。注释需要单独起一行且必须以 %% 开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何图语法。

```mermaid
gantt
    title A Gantt Diagram
    %% this is a comment
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-01-12  , 12d
    another task      : 24d
```

四、使用场景及实例

```mermaid
gantt
title 这是个甘特图的栗子🌰
dateFormat MM-DD
section 软件协同开发课程
项目启动 :done,des1,03-09,7d
项目计划 :done,des2,after des1,6d
需求分析 :done,des3,after des2,9d
软件设计 :done,des4,after des3,12d
软件编码 :crit,active,des5,04-07,20d
软件测试 :des6,04-14,15d
项目交付 :des7,after des6,4d
```

说明：

• gantt：指定这是一个甘特图。
• title：设置甘特图的标题。
• dateFormat：指定日期的格式。
• section：定义一个项目阶段。

任务条目包括任务名称、状态（如done、active等）、描述、开始日期和持续时间。

在上面的示例中，我们展示了一个简单的软件协同开发课程的甘特图，其中包括项目启动、项目计划、需求分析、软件设计、软件编码、软件测试和项目交付等阶段。

通过使用Markdown的甘特图语法，你可以清晰地展示项目的时间轴和各项任务的关系，使项目计划更加直观和易于理解。

五、总结

Mermaid 为 Markdown 扩展了使用普通文本生成甘特图的语法及渲染支持；
Mermaid 可以用文本形式描述甘特图中的「标题」、「日期格式约定」、「分组及任务」；
Mermaid 甘特图支持自定义节点样式，使其具备更丰富的表现力。

文章写作不易，您的支持是我最大的动力，请👉关注?、点赞👍、收藏📂、评论💬。

---

无论是哪个阶段，坚持努力都是成功的关键。不要停下脚步，继续前行，即使前路崎岖，也请保持乐观和勇气。相信自己的能力，你所追求的目标定会在不久的将来实现。加油！