泰安网站推广 泰安网站建设,网站开发一般用什么技术,山东已经宣布封城的城市2022年,工厂办公室装修设计Markdown中甘特图的使用 1. 前言2. 语法详解2.1 甘特图语法 3. 使用场景及实例4. 小结5. 其他文章快来试试吧#x1f58a;️ Markdown中甘特图的使用 #x1f448;点击这里也可查看 1. 前言
Markdown 的原生语法不支持绘制图形#xff0c;但通过扩展模块#xff0c;我们可… Markdown中甘特图的使用 1. 前言2. 语法详解2.1 甘特图语法 3. 使用场景及实例4. 小结5. 其他文章快来试试吧️ Markdown中甘特图的使用 点击这里也可查看 1. 前言
Markdown 的原生语法不支持绘制图形但通过扩展模块我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。
本节将重点介绍如何通过 Mermaid 绘制「甘特图」。
甘特图 (Gantt chart) 也被称为横道图、条状图Bar chart。通常用于展示项目进度它的核心对象是「时间」并在时间的基础上展示了「成本」和「范围」之间的联系。
2. 语法详解
2.1 甘特图语法
2.1.1 一个基本的甘特图 基本上的甘特图由标题日期格式约定分组及任务三部分组成。
实例一 一个基本的甘特图。
代码
mermaidgantt苹果 :a, 2017-07-20, 1w香蕉 :crit, b, 2017-07-23, 1d樱桃 :active, c, after b a, 1d
渲染 #mermaid-svg-CVJrdpSVCM3r5019 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CVJrdpSVCM3r5019 .error-icon{fill:#552222;}#mermaid-svg-CVJrdpSVCM3r5019 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CVJrdpSVCM3r5019 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CVJrdpSVCM3r5019 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CVJrdpSVCM3r5019 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CVJrdpSVCM3r5019 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CVJrdpSVCM3r5019 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CVJrdpSVCM3r5019 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CVJrdpSVCM3r5019 .marker.cross{stroke:#333333;}#mermaid-svg-CVJrdpSVCM3r5019 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CVJrdpSVCM3r5019 .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CVJrdpSVCM3r5019 .exclude-range{fill:#eeeeee;}#mermaid-svg-CVJrdpSVCM3r5019 .section{stroke:none;opacity:0.2;}#mermaid-svg-CVJrdpSVCM3r5019 .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-CVJrdpSVCM3r5019 .section2{fill:#fff400;}#mermaid-svg-CVJrdpSVCM3r5019 .section1,#mermaid-svg-CVJrdpSVCM3r5019 .section3{fill:white;opacity:0.2;}#mermaid-svg-CVJrdpSVCM3r5019 .sectionTitle0{fill:#333;}#mermaid-svg-CVJrdpSVCM3r5019 .sectionTitle1{fill:#333;}#mermaid-svg-CVJrdpSVCM3r5019 .sectionTitle2{fill:#333;}#mermaid-svg-CVJrdpSVCM3r5019 .sectionTitle3{fill:#333;}#mermaid-svg-CVJrdpSVCM3r5019 .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CVJrdpSVCM3r5019 .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-CVJrdpSVCM3r5019 .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-CVJrdpSVCM3r5019 .grid path{stroke-width:0;}#mermaid-svg-CVJrdpSVCM3r5019 .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-CVJrdpSVCM3r5019 .task{stroke-width:2;}#mermaid-svg-CVJrdpSVCM3r5019 .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-CVJrdpSVCM3r5019 .task.clickable{cursor:pointer;}#mermaid-svg-CVJrdpSVCM3r5019 .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-CVJrdpSVCM3r5019 .taskText0,#mermaid-svg-CVJrdpSVCM3r5019 .taskText1,#mermaid-svg-CVJrdpSVCM3r5019 .taskText2,#mermaid-svg-CVJrdpSVCM3r5019 .taskText3{fill:white;}#mermaid-svg-CVJrdpSVCM3r5019 .task0,#mermaid-svg-CVJrdpSVCM3r5019 .task1,#mermaid-svg-CVJrdpSVCM3r5019 .task2,#mermaid-svg-CVJrdpSVCM3r5019 .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutside0,#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutside2{fill:black;}#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutside1,#mermaid-svg-CVJrdpSVCM3r5019 .taskTextOutside3{fill:black;}#mermaid-svg-CVJrdpSVCM3r5019 .active0,#mermaid-svg-CVJrdpSVCM3r5019 .active1,#mermaid-svg-CVJrdpSVCM3r5019 .active2,#mermaid-svg-CVJrdpSVCM3r5019 .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-CVJrdpSVCM3r5019 .activeText0,#mermaid-svg-CVJrdpSVCM3r5019 .activeText1,#mermaid-svg-CVJrdpSVCM3r5019 .activeText2,#mermaid-svg-CVJrdpSVCM3r5019 .activeText3{fill:black!important;}#mermaid-svg-CVJrdpSVCM3r5019 .done0,#mermaid-svg-CVJrdpSVCM3r5019 .done1,#mermaid-svg-CVJrdpSVCM3r5019 .done2,#mermaid-svg-CVJrdpSVCM3r5019 .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-CVJrdpSVCM3r5019 .doneText0,#mermaid-svg-CVJrdpSVCM3r5019 .doneText1,#mermaid-svg-CVJrdpSVCM3r5019 .doneText2,#mermaid-svg-CVJrdpSVCM3r5019 .doneText3{fill:black!important;}#mermaid-svg-CVJrdpSVCM3r5019 .crit0,#mermaid-svg-CVJrdpSVCM3r5019 .crit1,#mermaid-svg-CVJrdpSVCM3r5019 .crit2,#mermaid-svg-CVJrdpSVCM3r5019 .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-CVJrdpSVCM3r5019 .activeCrit0,#mermaid-svg-CVJrdpSVCM3r5019 .activeCrit1,#mermaid-svg-CVJrdpSVCM3r5019 .activeCrit2,#mermaid-svg-CVJrdpSVCM3r5019 .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-CVJrdpSVCM3r5019 .doneCrit0,#mermaid-svg-CVJrdpSVCM3r5019 .doneCrit1,#mermaid-svg-CVJrdpSVCM3r5019 .doneCrit2,#mermaid-svg-CVJrdpSVCM3r5019 .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-CVJrdpSVCM3r5019 .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-CVJrdpSVCM3r5019 .milestoneText{font-style:italic;}#mermaid-svg-CVJrdpSVCM3r5019 .doneCritText0,#mermaid-svg-CVJrdpSVCM3r5019 .doneCritText1,#mermaid-svg-CVJrdpSVCM3r5019 .doneCritText2,#mermaid-svg-CVJrdpSVCM3r5019 .doneCritText3{fill:black!important;}#mermaid-svg-CVJrdpSVCM3r5019 .activeCritText0,#mermaid-svg-CVJrdpSVCM3r5019 .activeCritText1,#mermaid-svg-CVJrdpSVCM3r5019 .activeCritText2,#mermaid-svg-CVJrdpSVCM3r5019 .activeCritText3{fill:black!important;}#mermaid-svg-CVJrdpSVCM3r5019 .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CVJrdpSVCM3r5019 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 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属性可以指定甘特图定义日期时的解析方式。 日期的格式支持以下情形。
表达式取值示例描述YYYY20254 位数年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 ZZ12:00时区2.1.3 任务的定义Mermaid甘特图中每个人物隶属于一个分组一个分组内可以定义多个任务一张甘特图表中可以包含多个分组。甘特图中的任务定义格式形如任务名[crit], [active], [任务ID], [前置任务], 周期其中「任务名」和「周期」两项是必要项。
实例二 在甘特图中定义任务。 代码
mermaid
gantttitle A Gantt Diagramsection SectionA task :a1, 2024-01-01, 30dAnother task :after a1 , 20dsection AnotherTask in sec :2024-02-12 , 12danother task : 24d
渲染 #mermaid-svg-K7Suzx8YRkFGdbps {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-K7Suzx8YRkFGdbps .error-icon{fill:#552222;}#mermaid-svg-K7Suzx8YRkFGdbps .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-K7Suzx8YRkFGdbps .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-K7Suzx8YRkFGdbps .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-K7Suzx8YRkFGdbps .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-K7Suzx8YRkFGdbps .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-K7Suzx8YRkFGdbps .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-K7Suzx8YRkFGdbps .marker{fill:#333333;stroke:#333333;}#mermaid-svg-K7Suzx8YRkFGdbps .marker.cross{stroke:#333333;}#mermaid-svg-K7Suzx8YRkFGdbps svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-K7Suzx8YRkFGdbps .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-K7Suzx8YRkFGdbps .exclude-range{fill:#eeeeee;}#mermaid-svg-K7Suzx8YRkFGdbps .section{stroke:none;opacity:0.2;}#mermaid-svg-K7Suzx8YRkFGdbps .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-K7Suzx8YRkFGdbps .section2{fill:#fff400;}#mermaid-svg-K7Suzx8YRkFGdbps .section1,#mermaid-svg-K7Suzx8YRkFGdbps .section3{fill:white;opacity:0.2;}#mermaid-svg-K7Suzx8YRkFGdbps .sectionTitle0{fill:#333;}#mermaid-svg-K7Suzx8YRkFGdbps .sectionTitle1{fill:#333;}#mermaid-svg-K7Suzx8YRkFGdbps .sectionTitle2{fill:#333;}#mermaid-svg-K7Suzx8YRkFGdbps .sectionTitle3{fill:#333;}#mermaid-svg-K7Suzx8YRkFGdbps .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-K7Suzx8YRkFGdbps .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-K7Suzx8YRkFGdbps .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-K7Suzx8YRkFGdbps .grid path{stroke-width:0;}#mermaid-svg-K7Suzx8YRkFGdbps .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-K7Suzx8YRkFGdbps .task{stroke-width:2;}#mermaid-svg-K7Suzx8YRkFGdbps .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-K7Suzx8YRkFGdbps .task.clickable{cursor:pointer;}#mermaid-svg-K7Suzx8YRkFGdbps .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-K7Suzx8YRkFGdbps .taskText0,#mermaid-svg-K7Suzx8YRkFGdbps .taskText1,#mermaid-svg-K7Suzx8YRkFGdbps .taskText2,#mermaid-svg-K7Suzx8YRkFGdbps .taskText3{fill:white;}#mermaid-svg-K7Suzx8YRkFGdbps .task0,#mermaid-svg-K7Suzx8YRkFGdbps .task1,#mermaid-svg-K7Suzx8YRkFGdbps .task2,#mermaid-svg-K7Suzx8YRkFGdbps .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutside0,#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutside2{fill:black;}#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutside1,#mermaid-svg-K7Suzx8YRkFGdbps .taskTextOutside3{fill:black;}#mermaid-svg-K7Suzx8YRkFGdbps .active0,#mermaid-svg-K7Suzx8YRkFGdbps .active1,#mermaid-svg-K7Suzx8YRkFGdbps .active2,#mermaid-svg-K7Suzx8YRkFGdbps .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-K7Suzx8YRkFGdbps .activeText0,#mermaid-svg-K7Suzx8YRkFGdbps .activeText1,#mermaid-svg-K7Suzx8YRkFGdbps .activeText2,#mermaid-svg-K7Suzx8YRkFGdbps .activeText3{fill:black!important;}#mermaid-svg-K7Suzx8YRkFGdbps .done0,#mermaid-svg-K7Suzx8YRkFGdbps .done1,#mermaid-svg-K7Suzx8YRkFGdbps .done2,#mermaid-svg-K7Suzx8YRkFGdbps .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-K7Suzx8YRkFGdbps .doneText0,#mermaid-svg-K7Suzx8YRkFGdbps .doneText1,#mermaid-svg-K7Suzx8YRkFGdbps .doneText2,#mermaid-svg-K7Suzx8YRkFGdbps .doneText3{fill:black!important;}#mermaid-svg-K7Suzx8YRkFGdbps .crit0,#mermaid-svg-K7Suzx8YRkFGdbps .crit1,#mermaid-svg-K7Suzx8YRkFGdbps .crit2,#mermaid-svg-K7Suzx8YRkFGdbps .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-K7Suzx8YRkFGdbps .activeCrit0,#mermaid-svg-K7Suzx8YRkFGdbps .activeCrit1,#mermaid-svg-K7Suzx8YRkFGdbps .activeCrit2,#mermaid-svg-K7Suzx8YRkFGdbps .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-K7Suzx8YRkFGdbps .doneCrit0,#mermaid-svg-K7Suzx8YRkFGdbps .doneCrit1,#mermaid-svg-K7Suzx8YRkFGdbps .doneCrit2,#mermaid-svg-K7Suzx8YRkFGdbps .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-K7Suzx8YRkFGdbps .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-K7Suzx8YRkFGdbps .milestoneText{font-style:italic;}#mermaid-svg-K7Suzx8YRkFGdbps .doneCritText0,#mermaid-svg-K7Suzx8YRkFGdbps .doneCritText1,#mermaid-svg-K7Suzx8YRkFGdbps .doneCritText2,#mermaid-svg-K7Suzx8YRkFGdbps .doneCritText3{fill:black!important;}#mermaid-svg-K7Suzx8YRkFGdbps .activeCritText0,#mermaid-svg-K7Suzx8YRkFGdbps .activeCritText1,#mermaid-svg-K7Suzx8YRkFGdbps .activeCritText2,#mermaid-svg-K7Suzx8YRkFGdbps .activeCritText3{fill:black!important;}#mermaid-svg-K7Suzx8YRkFGdbps .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-K7Suzx8YRkFGdbps :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 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 为时间提供了丰富的语法支持。 完整的定义语法如下
%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
ganttdateFormat :YYYY-MM-DDtitle :甘特图实例section 基本任务已完成任务 :done, des1, 2024-01-06,2024-01-08进行中任务 :active, des2, 2024-01-09, 3d未开始任务1 : des3, after des2, 5d未开始任务2 : des4, after des3, 5dsection 紧急任务已完成的紧急任务 :crit, done, 2024-01-06,24h已完成紧急任务1 :crit, done, after des1, 2d进行中紧急任务2 :crit, active, 3d未开始紧急任务3 :crit, 5d未开始一般任务4 :2d未开始一般任务5 :1dsection 文档编写进行中文档任务1 :active, a1, after des1, 3d未开始文档任务2 :after a1 , 20h未开始文档任务3 :doc1, after a1 , 48hsection 其他部分其他任务1 :after doc1, 3d其他任务2 :20h其他任务3 :48h渲染 #mermaid-svg-RsiUxeBbtEkEiord {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-RsiUxeBbtEkEiord .error-icon{fill:#552222;}#mermaid-svg-RsiUxeBbtEkEiord .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-RsiUxeBbtEkEiord .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-RsiUxeBbtEkEiord .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-RsiUxeBbtEkEiord .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-RsiUxeBbtEkEiord .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-RsiUxeBbtEkEiord .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-RsiUxeBbtEkEiord .marker{fill:#333333;stroke:#333333;}#mermaid-svg-RsiUxeBbtEkEiord .marker.cross{stroke:#333333;}#mermaid-svg-RsiUxeBbtEkEiord svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-RsiUxeBbtEkEiord .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-RsiUxeBbtEkEiord .exclude-range{fill:#eeeeee;}#mermaid-svg-RsiUxeBbtEkEiord .section{stroke:none;opacity:0.2;}#mermaid-svg-RsiUxeBbtEkEiord .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-RsiUxeBbtEkEiord .section2{fill:#fff400;}#mermaid-svg-RsiUxeBbtEkEiord .section1,#mermaid-svg-RsiUxeBbtEkEiord .section3{fill:white;opacity:0.2;}#mermaid-svg-RsiUxeBbtEkEiord .sectionTitle0{fill:#333;}#mermaid-svg-RsiUxeBbtEkEiord .sectionTitle1{fill:#333;}#mermaid-svg-RsiUxeBbtEkEiord .sectionTitle2{fill:#333;}#mermaid-svg-RsiUxeBbtEkEiord .sectionTitle3{fill:#333;}#mermaid-svg-RsiUxeBbtEkEiord .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-RsiUxeBbtEkEiord .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-RsiUxeBbtEkEiord .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-RsiUxeBbtEkEiord .grid path{stroke-width:0;}#mermaid-svg-RsiUxeBbtEkEiord .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-RsiUxeBbtEkEiord .task{stroke-width:2;}#mermaid-svg-RsiUxeBbtEkEiord .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-RsiUxeBbtEkEiord .task.clickable{cursor:pointer;}#mermaid-svg-RsiUxeBbtEkEiord .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-RsiUxeBbtEkEiord .taskText0,#mermaid-svg-RsiUxeBbtEkEiord .taskText1,#mermaid-svg-RsiUxeBbtEkEiord .taskText2,#mermaid-svg-RsiUxeBbtEkEiord .taskText3{fill:white;}#mermaid-svg-RsiUxeBbtEkEiord .task0,#mermaid-svg-RsiUxeBbtEkEiord .task1,#mermaid-svg-RsiUxeBbtEkEiord .task2,#mermaid-svg-RsiUxeBbtEkEiord .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutside0,#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutside2{fill:black;}#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutside1,#mermaid-svg-RsiUxeBbtEkEiord .taskTextOutside3{fill:black;}#mermaid-svg-RsiUxeBbtEkEiord .active0,#mermaid-svg-RsiUxeBbtEkEiord .active1,#mermaid-svg-RsiUxeBbtEkEiord .active2,#mermaid-svg-RsiUxeBbtEkEiord .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-RsiUxeBbtEkEiord .activeText0,#mermaid-svg-RsiUxeBbtEkEiord .activeText1,#mermaid-svg-RsiUxeBbtEkEiord .activeText2,#mermaid-svg-RsiUxeBbtEkEiord .activeText3{fill:black!important;}#mermaid-svg-RsiUxeBbtEkEiord .done0,#mermaid-svg-RsiUxeBbtEkEiord .done1,#mermaid-svg-RsiUxeBbtEkEiord .done2,#mermaid-svg-RsiUxeBbtEkEiord .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-RsiUxeBbtEkEiord .doneText0,#mermaid-svg-RsiUxeBbtEkEiord .doneText1,#mermaid-svg-RsiUxeBbtEkEiord .doneText2,#mermaid-svg-RsiUxeBbtEkEiord .doneText3{fill:black!important;}#mermaid-svg-RsiUxeBbtEkEiord .crit0,#mermaid-svg-RsiUxeBbtEkEiord .crit1,#mermaid-svg-RsiUxeBbtEkEiord .crit2,#mermaid-svg-RsiUxeBbtEkEiord .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-RsiUxeBbtEkEiord .activeCrit0,#mermaid-svg-RsiUxeBbtEkEiord .activeCrit1,#mermaid-svg-RsiUxeBbtEkEiord .activeCrit2,#mermaid-svg-RsiUxeBbtEkEiord .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-RsiUxeBbtEkEiord .doneCrit0,#mermaid-svg-RsiUxeBbtEkEiord .doneCrit1,#mermaid-svg-RsiUxeBbtEkEiord .doneCrit2,#mermaid-svg-RsiUxeBbtEkEiord .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-RsiUxeBbtEkEiord .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-RsiUxeBbtEkEiord .milestoneText{font-style:italic;}#mermaid-svg-RsiUxeBbtEkEiord .doneCritText0,#mermaid-svg-RsiUxeBbtEkEiord .doneCritText1,#mermaid-svg-RsiUxeBbtEkEiord .doneCritText2,#mermaid-svg-RsiUxeBbtEkEiord .doneCritText3{fill:black!important;}#mermaid-svg-RsiUxeBbtEkEiord .activeCritText0,#mermaid-svg-RsiUxeBbtEkEiord .activeCritText1,#mermaid-svg-RsiUxeBbtEkEiord .activeCritText2,#mermaid-svg-RsiUxeBbtEkEiord .activeCritText3{fill:black!important;}#mermaid-svg-RsiUxeBbtEkEiord .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-RsiUxeBbtEkEiord :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 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. 其他文章
Markdown文章集合Markdown中状态图的用法Markdown时序图的使用方法Markdown中类图的用法Markdown中流程图的用法Markdown表格的使用Markdown如何导出Html文件Markdown文件Markdown是什么.md文件是什么Markdown段落的空行缩进用法Markdown表格的使用Markdown语法字体字号讲解Markdown如何填充前景色、背景色Markdown代码块超链接图片的插入Markdown如何添加任务列表-复选框的添加Markdown中特殊符号的使用Markdown实现代码高亮注释代码Markdown注释的用法 快来试试吧️
