Markdown 甘特图绘制详解

发布时间:2024年01月19日

??作者简介:小北编程(专注于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
```
2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 A task Another task Task in sec another task Section Another A Gantt Diagram

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

三、详细语法介绍

标题

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

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

任务

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

```mermaid
gantt
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1, 20d
```
2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 A task Another task

部分

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

```mermaid
gantt
    section Planning
    Task 1           :a1, 2024-01-01, 7d
    Task 2           :after a1, 5d
```
2024-01-01 2024-01-02 2024-01-03 2024-01-04 2024-01-05 2024-01-06 2024-01-07 2024-01-08 2024-01-09 2024-01-10 2024-01-11 2024-01-12 2024-01-13 Task 1 Task 2 Planning

依赖关系

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

```mermaid
gantt
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1, 20d
```
2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 A task Another task

规定日期格式

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

dateFormat YYYY-MM-DD

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

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

表达式取值示例描述
YYYY20144 位数年
YY142 位数年
Q1…4季度数
M MM1…12月份数
MMM MMMMJanuary…Dec月份名称
D DD1…31月中天数
Do1st…31st月中第几天
DDD DDDD1…365年中天数
X1410715640.579Unix 时间戳(秒)
x1410715640579Unix 时间戳(毫秒)
H HH0…2324 小时制小时数
h hh1…1212 小时制小时数
a Aam pm上午、下午
m mm0…59分钟数
s ss0…59秒钟数
S0…9十分之一秒
SS0…99百分之一秒
SSS0…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”
%dzero-padded day of the month as a decimal number [01,31]
%espace-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
%Hhour (24-hour clock) as a decimal number [00,23]
%Ihour (12-hour clock) as a decimal number [01,12]
%jday of the year as a decimal number [001,366]
%mmonth as a decimal number [01,12]
%Mminute as a decimal number [00,59]
%Lmilliseconds as a decimal number [000, 999]
%p上午或下午
%Ssecond as a decimal number [00,61]
%Uweek number of the year (Sunday as the first day of the week) as a decimal number [00,53]
%wweekday as a decimal number [0(Sunday),6]
%Wweek 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”
%yyear 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
```
2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 A task Task in sec another task Another task Section Another A Gantt Diagram

四、使用场景及实例

```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
```
2024-03-10 2024-03-17 2024-03-24 2024-03-31 2024-04-07 2024-04-14 2024-04-21 2024-04-28 项目启动 项目计划 需求分析 软件设计 软件编码 软件测试 项目交付 软件协同开发课程 这是个甘特图的栗子🌰

说明:

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

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

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

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

五、总结

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

请添加图片描述

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

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

文章来源:https://blog.csdn.net/u014696856/article/details/135699168
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。