Markdown中甘特图的使用
- [1. 前言](#1. 前言)
- [2. 语法详解](#2. 语法详解)
-
- [2.1 甘特图语法](#2.1 甘特图语法)
- [3. 使用场景及实例](#3. 使用场景及实例)
- [4. 小结](#4. 小结)
- [5. 其他文章](#5. 其他文章)
- 快来试试吧🖊️
Markdown中甘特图的使用👈点击这里也可查看
1. 前言
Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 "流程图"、"时序图"、"类图"、"状态图"、"甘特图"、"饼图" 等。
本节将重点介绍如何通过 Mermaid 绘制「甘特图」。
甘特图 (Gantt chart) 也被称为横道图、条状图（Bar chart）。通常用于展示项目进度，它的核心对象是「时间 」，并在时间的基础上，展示了「成本 」和「范围」之间的联系。
2. 语法详解
2.1 甘特图语法
2.1.1 一个基本的甘特图
基本上的甘特图由标题，日期格式约定，分组及任务三部分组成。
实例一：
一个基本的甘特图。
代码：
```mermaid
gantt
苹果 :a, 2017-07-20, 1w
香蕉 :crit, b, 2017-07-23, 1d
樱桃 :active, c, after b a, 1d
```
渲染：
2017-07-20 2017-07-21 2017-07-22 2017-07-23 2017-07-24 2017-07-25 2017-07-26 2017-07-27 2017-07-28 苹果 香蕉 樱桃
2.1.2 规定日期格式
通过设置dateFotmat属性，可以指定甘特图定义日期时的解析方式。
日期的格式支持以下情形。
| 表达式 | 取值示例 | 描述 |
|---|---|---|
| YYYY | 2025 | 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 | 时区 |
| 2.1.3 任务的定义 | ||
| Mermaid甘特图中，每个人物隶属于一个分组，一个分组内可以定义多个任务，一张甘特图表中可以包含多个分组。 | ||
| 甘特图中的任务定义格式形如：<任务名>：[crit], [active], [任务ID], [前置任务], <周期>，其中「任务名」和「周期」两项是必要项。 |
实例二：
在甘特图中定义任务。
代码：
```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
2.1.4 定义对象的生命周期
甘特图上的对象都是以时间为基础而存在的，对于时间，我们可能有非常多的定义需求，比如精度上的「年」、「月」、「日」、「时」等，又比如「24H」或者 「12H」这样写法上的不同等。Mermaid 为时间提供了丰富的语法支持。
完整的定义语法如下：
python
%a - 周维度名称（简写形式）。
%A - 周维度名称（完整形式）。
%b - 月维度名称（简写形式）。
%B - 月维度名称（完整形式）.
%c - 日期时间，相当于"%a %b %e %H:%M:%S %Y"。
%d - 月中日期固定宽度写法，取值范围 [01,31].
%e - 月中日期变动宽度写法，取值范围 [ 1,31]；等同于 %_d.
%H - 小时数（24小时制）取值范围 [00,23]。
%I - 小时数（12小时制）取值范围 [01,12]。
%j - 年中日期固定宽度写法，取值范围 [001,366]。
%m - 年中月份固定宽度写法，取值范围 [01,12]。
%M - 分钟数固定宽度写法，取值范围 [00,59]。
%L - 毫秒数固定宽度写法，取值范围 [000, 999]。
%p - 上午 \ 下午。
%S - 秒数固定宽度写法，取值范围 [00,61]。
%U - 年中周数的固定宽度写法，以周日为每周第一天，取值范围 [00,53]。
%w - 周中日期写法，取值范围 [0（周日）,6]。
%W - 年中周数的固定宽度写法，以周一为每周第一天，取值范围 [00,53]。
%x - 日期，等同于 "%m/%d/%Y"。
%X - 时间，等同于 "%H:%M:%S"。
%y - 年，仅后两位，取值范围 [00,99]。
%Y - 年，完整四位。
%Z - 时区，例如："-0700"。
%% - 用于输出百分号 "%" 。3. 使用场景及实例
实例三：
代码：
```mermaid
gantt
dateFormat :YYYY-MM-DD
title :甘特图实例
section 基本任务
已完成任务 :done, des1, 2024-01-06,2024-01-08
进行中任务 :active, des2, 2024-01-09, 3d
未开始任务1 : des3, after des2, 5d
未开始任务2 : des4, after des3, 5d
section 紧急任务
已完成的紧急任务 :crit, done, 2024-01-06,24h
已完成紧急任务1 :crit, done, after des1, 2d
进行中紧急任务2 :crit, active, 3d
未开始紧急任务3 :crit, 5d
未开始一般任务4 :2d
未开始一般任务5 :1d
section 文档编写
进行中文档任务1 :active, a1, after des1, 3d
未开始文档任务2 :after a1 , 20h
未开始文档任务3 :doc1, after a1 , 48h
section 其他部分
其他任务1 :after doc1, 3d
其他任务2 :20h
其他任务3 :48h
```
渲染：
2025-01-12 2025-01-13 2025-01-14 2025-01-15 2025-01-16 2025-01-17 2025-01-18 2025-01-19 2025-01-20 2025-01-21 2025-01-22 2025-01-23 2025-01-24 已完成任务 进行中任务 已完成的紧急任务 已完成紧急任务1 进行中文档任务1 进行中紧急任务2 未开始任务1 未开始文档任务2 未开始文档任务3 未开始紧急任务3 其他任务1 未开始任务2 其他任务2 其他任务3 未开始一般任务4 未开始一般任务5 基本任务 紧急任务 文档编写 其他部分 :甘特图实例
4. 小结
- Mermaid 为 Markdown 扩展了使用普通文本生成甘特图的语法及渲染支持；
- Mermaid 可以用文本形式描述甘特图中的「标题」、「日期格式约定」、「分组及任务」；
- Mermaid 甘特图支持自定义节点样式，使其具备更丰富的表现力。
如果对您有帮助，请您点赞、收藏、关注、转发，让更多的人看到。
5. 其他文章
快来试试吧🖊️