Markdown mermaid种草(4)_ 甘特图

最新推荐文章于 2025-03-03 22:10:44 发布

CarnivoreRabbit

最新推荐文章于 2025-03-03 22:10:44 发布

阅读量6.7k

点赞数 11

分类专栏： Markdown 文章标签： markdown mermaid 甘特图

本文链接：https://blog.youkuaiyun.com/horsee/article/details/113725299

版权

Markdown 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在Markdown中使用Mermaid绘制甘特图，包括gantt图的基本语法、参数设置（如时间格式、进度条状态等）、区块划分和任务管理。通过实例演示了如何创建、定制和解读复杂的项目计划图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Markdown mermaid种草(4)_ 甘特图

文章目录

Markdown mermaid种草(4)_ 甘特图

1 甘特图简介

甘特图是工程计划中常用的一种图形，用以管理任务的分解、时间的长度和节点计划、以及实际进度和计划进度的差距等等.

甘特图将记录每个计划的任务作为一个连续的条形，从左到右延伸. x 轴表示时间， y 轴记录不同的任务及其完成顺序.

从上面这段描述里我们能够摘取到甘特图的一些重要因素：时间、任务、计划和进度.

对于mermaid甘特图，我们也是要围绕以上要素组织和讨论.

2 mermaid甘特图语法及参数

2.1 gantt图开始关键字

调用mermaid,可以首先从标题开始. 标题的关键字为gantt.

gantt

表明这是一段mermaid用来绘制甘特图的代码. 仅此而已.

2.2 title 标题

title关键字表明当前绘制的甘特图的标题，注意title是可以缺省的.甘特图可以不加标题.

gantt
	title This is a title

2.3 date Format 时间格式指定

甘特图指定时间格式的关键字为dateFormat：

gantt
	dateFormat YYYY-MM-DD

除了上例中演示的时间格式之外，还可以使用其他的时间格式，dateFormat允许的时间格式一览表：

输入	举例	描述
YYYY	2021	4位数表示年份
YY	21	2位数表示年份
Q	1…4	表示季度，设置月份时将直接跳到季度的第一个月份
M MM	1…12	按数字表示的月份
MMM MMMM	Jan…Dec	按月份简称表示的月份
D DD	1…31	按数字表示的日期
DDD DDDD	1…365	按日期在一年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

2.4 axis Format 时间轴格式

axisFormat关键字用以指定时间轴的单位格式，默认的时间格式是YYYY-MM-DD.

用axisFormat关键字来指定时间单位格式时，每一个组合都是由一个%引导，如下例所示：

axisFormat %Y-%m-%d

此例中，%Y表示的是年，%m表示的月，%d表示的是天.

符号写法	含义	样例举例
%a	缩写的星期几的名称	Mon Tue Wed Thu Fri Sat Sun
%A	全称的星期几的名称	Monday Tuesday Wednesday Thursday Friday Saturday Sunday
%b	缩写的月份名称	Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
%B	全称的月份名称	January February March April May June July August September October November December
%c	日期和时间，和"%a %b %e %H:%M:%S %Y"一样	Mon Apr 3 12:11:23 2020
%d	用0填充补位的月份中的日期，十位小数[01,31]	01 02 03 04 05…31
%e	用空格填充补位的月份中的日期，十位小数[ 1,31]	_1, _2, _3 … 31(`_`表示补位的空格)
%H	24小时制十进制数表示小时	1 2 3 4 5 … 24
%I	12小时制十进制数表示小时	1 2 3 4 5 … 12
%j	十进制数表示一年中的第几天[001,366]	001， 002， 003 … 366
%m	十进制数表示月份[01,12]	01, 02, 03 … 12
%M	十进制表示分钟[00, 59]	00, 01, 02, 03 … 59
%L	十进制表示毫秒[000,999]	000, 001, 002 … 999
%p	AM或者PM	AM PM
%S	十进制表示秒数[00, 61]	00, 01, 02, 03 … 61
%U	十进制表示一年中的第几周（星期日为一周之始）[00, 53]	00, 01, 02, 03 … 53
%w	用十进制数字表示星期[0(星期天), 6]	0 1 2 3 4 5 6
%W	十进制表示一年中的第几周（星期一为一周之始）[00, 53]	00, 01, 02, 03 … 53
%x	日期，“%m/%d/%Y”	5/3/2020
%X	时间，“%H:%M:%S”	12:23:32
%y	十进制的年份表示，没有世纪，仅保留最后两位[00, 99]	00, 01, 02 … 99
%Y	完整的年份表示	2000 2001 2002
%Z	时区补偿，如“-0700”	0800 -0700
%%	%号	%

2.5 section 区块分割和 task 任务条

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

一个section下可以并排排入多个同级的task任务. 每一个task对应一个甘特图进度条.

每一个task后，跟进的是状态（可缺省）、任务名（可缺省）、开始时间（或任务位置）、延续时长（或结束时间）.

写成语法格式为：

task显示名 : 状态（可缺省）任务名（可缺省）开始时间（或任务位置）延续时长（或结束时间）

其中，任务名可用作位置标记，比如：

gantt
section S1
task name1 : desA, 2020-1-5, 2d
task name2 : after desA, 2d

在这里插入图片描述

gantt
	title Example
	section SectionA
	task A: 2021-2-5, 5d
	task B: 2021-2-6, 2021-2-13

在这里插入图片描述

2.6 task bar state 进度条状态

task进度条有三种状态，<default>，done，active

其中，<default>表示的状态即为缺省下的状态，具体来说，就是已计划但尚未实施.

done表示该工作已完成.

active表示该工作正激活，处于正在进行中.

对于关键任务，还提供了一个crit状态，表示该任务为关键任务. crit状态可以与其他状态复用.

可以从下例中看到不同状态的进度条颜色：

gantt
	title Example
	section sectionA
	taskA: done, 2021-2-4, 1d
	taskB: 2021-2-5, 1d
	taskC: active, 2021-2-6, 3d
	taskD: crit, 2021-2-9, 2d

在这里插入图片描述

2.7 today Marker 当前时间线

可以打开（默认）/关闭当前时间线的显示. 即 todayMarker

gantt	
	title Example
	section SectionA
	task A : 2021-2-3, 10d
	task B : 2021-2-14, 12d

在这里插入图片描述

gantt	
	title Example
	todayMarker off
	section SectionA
	task A : 2021-2-3, 10d
	task B : 2021-2-14, 12d

在这里插入图片描述

2.8 excludes排除日期

可以用excludes语句排除周末或某指定日期.

例如 excludes weekends 表示排除周末

excludes sunday 表示排除星期六

excludes 2020-5-20 表示排除2020-5-20

但是要注意，没有excludes weekdays.

2.9 综合举例

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2021-02-06,2021-02-08
    Active task               :active,  des2, 2021-02-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2021-02-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

在这里插入图片描述