Mermaid画甘特图

文章目录

甘特图

甘特图从外观来看，是一种水平条形图，其横轴表示时间，纵轴表示任务，从而直观展示项目进度计划。简单示例如下
#mermaid-svg-t5f5AXFpTQu0uJDW{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-t5f5AXFpTQu0uJDW .error-icon{fill:#552222;}#mermaid-svg-t5f5AXFpTQu0uJDW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-t5f5AXFpTQu0uJDW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-t5f5AXFpTQu0uJDW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-t5f5AXFpTQu0uJDW .marker.cross{stroke:#333333;}#mermaid-svg-t5f5AXFpTQu0uJDW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-t5f5AXFpTQu0uJDW p{margin:0;}#mermaid-svg-t5f5AXFpTQu0uJDW .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-t5f5AXFpTQu0uJDW .exclude-range{fill:#eeeeee;}#mermaid-svg-t5f5AXFpTQu0uJDW .section{stroke:none;opacity:0.2;}#mermaid-svg-t5f5AXFpTQu0uJDW .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-t5f5AXFpTQu0uJDW .section2{fill:#fff400;}#mermaid-svg-t5f5AXFpTQu0uJDW .section1,#mermaid-svg-t5f5AXFpTQu0uJDW .section3{fill:white;opacity:0.2;}#mermaid-svg-t5f5AXFpTQu0uJDW .sectionTitle0{fill:#333;}#mermaid-svg-t5f5AXFpTQu0uJDW .sectionTitle1{fill:#333;}#mermaid-svg-t5f5AXFpTQu0uJDW .sectionTitle2{fill:#333;}#mermaid-svg-t5f5AXFpTQu0uJDW .sectionTitle3{fill:#333;}#mermaid-svg-t5f5AXFpTQu0uJDW .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-t5f5AXFpTQu0uJDW .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-t5f5AXFpTQu0uJDW .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-t5f5AXFpTQu0uJDW .grid path{stroke-width:0;}#mermaid-svg-t5f5AXFpTQu0uJDW .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-t5f5AXFpTQu0uJDW .task{stroke-width:2;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-t5f5AXFpTQu0uJDW .task.clickable{cursor:pointer;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskText0,#mermaid-svg-t5f5AXFpTQu0uJDW .taskText1,#mermaid-svg-t5f5AXFpTQu0uJDW .taskText2,#mermaid-svg-t5f5AXFpTQu0uJDW .taskText3{fill:white;}#mermaid-svg-t5f5AXFpTQu0uJDW .task0,#mermaid-svg-t5f5AXFpTQu0uJDW .task1,#mermaid-svg-t5f5AXFpTQu0uJDW .task2,#mermaid-svg-t5f5AXFpTQu0uJDW .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutside0,#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutside2{fill:black;}#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutside1,#mermaid-svg-t5f5AXFpTQu0uJDW .taskTextOutside3{fill:black;}#mermaid-svg-t5f5AXFpTQu0uJDW .active0,#mermaid-svg-t5f5AXFpTQu0uJDW .active1,#mermaid-svg-t5f5AXFpTQu0uJDW .active2,#mermaid-svg-t5f5AXFpTQu0uJDW .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-t5f5AXFpTQu0uJDW .activeText0,#mermaid-svg-t5f5AXFpTQu0uJDW .activeText1,#mermaid-svg-t5f5AXFpTQu0uJDW .activeText2,#mermaid-svg-t5f5AXFpTQu0uJDW .activeText3{fill:black!important;}#mermaid-svg-t5f5AXFpTQu0uJDW .done0,#mermaid-svg-t5f5AXFpTQu0uJDW .done1,#mermaid-svg-t5f5AXFpTQu0uJDW .done2,#mermaid-svg-t5f5AXFpTQu0uJDW .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-t5f5AXFpTQu0uJDW .doneText0,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText1,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText2,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText3{fill:black!important;}#mermaid-svg-t5f5AXFpTQu0uJDW .doneText0.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText0.taskTextOutsideRight,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText1.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText1.taskTextOutsideRight,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText2.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText2.taskTextOutsideRight,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText3.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-t5f5AXFpTQu0uJDW .crit0,#mermaid-svg-t5f5AXFpTQu0uJDW .crit1,#mermaid-svg-t5f5AXFpTQu0uJDW .crit2,#mermaid-svg-t5f5AXFpTQu0uJDW .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-t5f5AXFpTQu0uJDW .activeCrit0,#mermaid-svg-t5f5AXFpTQu0uJDW .activeCrit1,#mermaid-svg-t5f5AXFpTQu0uJDW .activeCrit2,#mermaid-svg-t5f5AXFpTQu0uJDW .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-t5f5AXFpTQu0uJDW .doneCrit0,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCrit1,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCrit2,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-t5f5AXFpTQu0uJDW .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-t5f5AXFpTQu0uJDW .milestoneText{font-style:italic;}#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText0,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText1,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText2,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText3{fill:black!important;}#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText0.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText0.taskTextOutsideRight,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText1.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText1.taskTextOutsideRight,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText2.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText2.taskTextOutsideRight,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText3.taskTextOutsideLeft,#mermaid-svg-t5f5AXFpTQu0uJDW .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-t5f5AXFpTQu0uJDW .vert{stroke:navy;}#mermaid-svg-t5f5AXFpTQu0uJDW .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-t5f5AXFpTQu0uJDW .activeCritText0,#mermaid-svg-t5f5AXFpTQu0uJDW .activeCritText1,#mermaid-svg-t5f5AXFpTQu0uJDW .activeCritText2,#mermaid-svg-t5f5AXFpTQu0uJDW .activeCritText3{fill:black!important;}#mermaid-svg-t5f5AXFpTQu0uJDW .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-t5f5AXFpTQu0uJDW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 08-20 08-21 08-22 08-23 08-24 08-25 08-26 08-27 08-28 08-29 08-30 08-31 09-01 需求评审(已完成) 架构设计(进行中) 核心模块开发(关键) 系统联调正式上线(里程碑) 需求与设计开发与交付核心功能发布计划

其代码为

复制代码

gantt
    title 核心功能发布计划
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d

    section 需求与设计
    需求评审(已完成)      :done,      req1, 2026-08-20, 2d
    架构设计(进行中)      :active,    des1, 2026-08-22, 3d

    section 开发与交付
    核心模块开发(关键)    :crit,      dev1, after des1, 5d
    系统联调              :           dev2, after dev1, 2d
    正式上线(里程碑)      :milestone, m1,   after dev2, 0d

甘特图中的四个长条，名字分别是req1, des1, dev1, dev2，最后的菱形里程碑，则是m1。

基本语法

甘特图中，除了时间轴和时间轴之外，剩下的工作就是描述事件，其基本语法为

复制代码

事件说明 :状态  事件代号, 开始日期, 持续时间

其中，状态共有四种，分别是

done：已完成（默认灰色）
active：进行中（默认深色）
crit：关键路径/核心任务（默认红色高亮）
milestone：里程碑，被渲染为菱形，持续时间必须为 0

dateFormat格式

dateFormat为时间轴上的时间日期格式，可选参数如下表所示

输入	示例	描述
YY YYYY	26 2026	两位；四位年份
Q	1...4	年的季度。设置月份为该季度的第一个月
M MM	1...12	月份数字
MMM MMMM	一月...十二月	按 dayjs.locale() 设置的区域显示的月份名称
D DD	1...31	月中的天数
DDD DDDD	1...365	年中的天数
Do	1st...31st	带序数的月日
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,SS,SSS	0...9	秒的小数位(S个数对应位数)
Z ZZ	+12:00	相对于 UTC 的偏移，格式为 ±HH:mm、±HHmm 或 Z

axisFormat格式

axisFormat是坐标轴上的输出时间格式，可选代码如下表所示。

格式	定义
%a %A	星期名称（缩写和完整的）
%b %B	月份名称（缩写和完整的）
%c	日期和时间，格式为 "%a %b %e %H:%M:%S %Y"
%d	以零填充的月份中的日期，作为十进制数字 $01,31$
%e	月中的日期，以十进制数字表示并用空格填充 $1,31$ ；等同于 %_d
%I %H	小时（12小时制和24小时制），十进制数字 $00,23$ $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"
%%	一个字面的"%"字符