??作者简介:小北编程(专注于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 甘特图支持自定义节点样式,使其具备更丰富的表现力。
无论是哪个阶段,坚持努力都是成功的关键。不要停下脚步,继续前行,即使前路崎岖,也请保持乐观和勇气。相信自己的能力,你所追求的目标定会在不久的将来实现。加油!