网站建设业务知识培训资料,网站网页文案怎么写,商务平台网站建设合同,什么网站可以做国外生意OD(8)之Mermaid甘特图(Gantt diagrams)使用详解
Author: Once Day Date: 2024年2月24日
漫漫长路才刚刚开始…
全系列文章可参考专栏: Linux实践记录_Once_day的博客-CSDN博客
参考文章:
关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting to…OD(8)之Mermaid甘特图(Gantt diagrams)使用详解
Author: Once Day Date: 2024年2月24日
漫漫长路才刚刚开始…
全系列文章可参考专栏: Linux实践记录_Once_day的博客-CSDN博客
参考文章:
关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting toolMermaid 绘图语法介绍 - 飞书云文档 (larkoffice.com)Draw Diagrams With Markdown - Typora Support (typoraio.cn)Mermaid 使用教程从入门到精通——流程图、时序图、甘特图、类图等图形绘制轻松搞定 - 知乎 (zhihu.com)序列图 | Mermaid 中文网 (nodejs.cn)mermaid live 在线mermiad工具 文章目录 OD(8)之Mermaid甘特图(Gantt diagrams)使用详解1. 甘特图概述2. 具体使用介绍2.1 基础语法2.2 任务格式2.3 任务标签(taskLabel)含义2.4 日期格式2.5 日期输入格式表2.6 横轴日期格式表2.7 紧凑显示模式2.7 支持交互(click)2.8 趣味使用(生成柱状图) 1. 甘特图概述
甘特图以其创始人亨利·甘特Henry Gantt的名字命名是一种广泛使用的项目管理工具它通过直观的横向条形图来展示项目进度和时间表。甘特图的起源可以追溯到1910年左右当时亨利·甘特为提高工厂效率设计了这一工具。随着时间的推移甘特图已经成为项目经理的重要工具用于规划、调度和跟踪项目的各个方面。
在甘特图中每个条形代表一个项目任务它的长度表示任务的持续时间位置则显示了任务的起始和结束日期。可以通过不同颜色和长度的条形来区分任务的优先级、状态如完成、未完成、延期或者负责人。此外甘特图还可以显示任务之间的依赖关系通常以箭头或连线的形式表示这有助于项目管理者理解任务顺序和时间上的制约因素。
甘特图的优点在于其直观性非专业人士也能快速理解项目的时间规划。它有助于团队成员看到自己的任务如何与整个项目的进度相连并且可以作为沟通和协调的工具。然而它也有缺点例如在处理复杂项目时随着任务数量的增加图表可能变得杂乱无章难以跟踪。此外传统的甘特图在显示任务的动态变化或实时更新方面不够灵活。
在使用场景上甘特图非常适合于需要细致规划的项目如建筑工程、软件开发、活动策划等。它面向的主要问题是项目时间管理和资源分配帮助项目团队清晰地看到每个阶段的目标和截止日期确保项目按时完成。
有趣的是甘特图的普及和发展与计算机软件的进步密切相关。随着电子表格和项目管理软件的出现如Microsoft Project甘特图变得更加易于创建和修改大大提高了其实用性和普及度。现在许多项目管理软件都内置了甘特图功能允许用户轻松地拖动条形来调整任务时间线同时自动更新整个项目的进度。这种技术进步使得甘特图不仅仅是一个静态的规划工具而是一个动态的、可以随时调整和优化的项目管理伴侣。
Mermaid是一种基于文本的图表定义语言它允许开发人员使用代码的方式来创建图表非常适合嵌入Markdown文件或在线文档中。下面是一个简单的Mermaid甘特图实例
ganttdateFormat YYYY-MM-DDtitle 项目开发计划section 设计阶段需求分析 :done, des1, 2023-04-01, 2023-04-03原型设计 :active, des2, 2023-04-04, 3d设计评审 : des3, after des2, 2dsection 开发阶段基础框架搭建 :crit, active, dev1, 2023-04-08, 2023-04-10功能模块开发 : dev2, after dev1, 5d内部测试 : dev3, after dev2, 3dsection 发布阶段预发布 : pre1, after dev3, 2d正式发布 : pre2, after pre1, 2d#mermaid-svg-oSDqBGO1CUURyjcb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-oSDqBGO1CUURyjcb .error-icon{fill:#552222;}#mermaid-svg-oSDqBGO1CUURyjcb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-oSDqBGO1CUURyjcb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-oSDqBGO1CUURyjcb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-oSDqBGO1CUURyjcb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-oSDqBGO1CUURyjcb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-oSDqBGO1CUURyjcb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-oSDqBGO1CUURyjcb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-oSDqBGO1CUURyjcb .marker.cross{stroke:#333333;}#mermaid-svg-oSDqBGO1CUURyjcb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-oSDqBGO1CUURyjcb .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-oSDqBGO1CUURyjcb .exclude-range{fill:#eeeeee;}#mermaid-svg-oSDqBGO1CUURyjcb .section{stroke:none;opacity:0.2;}#mermaid-svg-oSDqBGO1CUURyjcb .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-oSDqBGO1CUURyjcb .section2{fill:#fff400;}#mermaid-svg-oSDqBGO1CUURyjcb .section1,#mermaid-svg-oSDqBGO1CUURyjcb .section3{fill:white;opacity:0.2;}#mermaid-svg-oSDqBGO1CUURyjcb .sectionTitle0{fill:#333;}#mermaid-svg-oSDqBGO1CUURyjcb .sectionTitle1{fill:#333;}#mermaid-svg-oSDqBGO1CUURyjcb .sectionTitle2{fill:#333;}#mermaid-svg-oSDqBGO1CUURyjcb .sectionTitle3{fill:#333;}#mermaid-svg-oSDqBGO1CUURyjcb .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-oSDqBGO1CUURyjcb .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-oSDqBGO1CUURyjcb .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-oSDqBGO1CUURyjcb .grid path{stroke-width:0;}#mermaid-svg-oSDqBGO1CUURyjcb .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-oSDqBGO1CUURyjcb .task{stroke-width:2;}#mermaid-svg-oSDqBGO1CUURyjcb .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-oSDqBGO1CUURyjcb .task.clickable{cursor:pointer;}#mermaid-svg-oSDqBGO1CUURyjcb .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-oSDqBGO1CUURyjcb .taskText0,#mermaid-svg-oSDqBGO1CUURyjcb .taskText1,#mermaid-svg-oSDqBGO1CUURyjcb .taskText2,#mermaid-svg-oSDqBGO1CUURyjcb .taskText3{fill:white;}#mermaid-svg-oSDqBGO1CUURyjcb .task0,#mermaid-svg-oSDqBGO1CUURyjcb .task1,#mermaid-svg-oSDqBGO1CUURyjcb .task2,#mermaid-svg-oSDqBGO1CUURyjcb .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutside0,#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutside2{fill:black;}#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutside1,#mermaid-svg-oSDqBGO1CUURyjcb .taskTextOutside3{fill:black;}#mermaid-svg-oSDqBGO1CUURyjcb .active0,#mermaid-svg-oSDqBGO1CUURyjcb .active1,#mermaid-svg-oSDqBGO1CUURyjcb .active2,#mermaid-svg-oSDqBGO1CUURyjcb .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-oSDqBGO1CUURyjcb .activeText0,#mermaid-svg-oSDqBGO1CUURyjcb .activeText1,#mermaid-svg-oSDqBGO1CUURyjcb .activeText2,#mermaid-svg-oSDqBGO1CUURyjcb .activeText3{fill:black!important;}#mermaid-svg-oSDqBGO1CUURyjcb .done0,#mermaid-svg-oSDqBGO1CUURyjcb .done1,#mermaid-svg-oSDqBGO1CUURyjcb .done2,#mermaid-svg-oSDqBGO1CUURyjcb .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-oSDqBGO1CUURyjcb .doneText0,#mermaid-svg-oSDqBGO1CUURyjcb .doneText1,#mermaid-svg-oSDqBGO1CUURyjcb .doneText2,#mermaid-svg-oSDqBGO1CUURyjcb .doneText3{fill:black!important;}#mermaid-svg-oSDqBGO1CUURyjcb .crit0,#mermaid-svg-oSDqBGO1CUURyjcb .crit1,#mermaid-svg-oSDqBGO1CUURyjcb .crit2,#mermaid-svg-oSDqBGO1CUURyjcb .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-oSDqBGO1CUURyjcb .activeCrit0,#mermaid-svg-oSDqBGO1CUURyjcb .activeCrit1,#mermaid-svg-oSDqBGO1CUURyjcb .activeCrit2,#mermaid-svg-oSDqBGO1CUURyjcb .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-oSDqBGO1CUURyjcb .doneCrit0,#mermaid-svg-oSDqBGO1CUURyjcb .doneCrit1,#mermaid-svg-oSDqBGO1CUURyjcb .doneCrit2,#mermaid-svg-oSDqBGO1CUURyjcb .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-oSDqBGO1CUURyjcb .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-oSDqBGO1CUURyjcb .milestoneText{font-style:italic;}#mermaid-svg-oSDqBGO1CUURyjcb .doneCritText0,#mermaid-svg-oSDqBGO1CUURyjcb .doneCritText1,#mermaid-svg-oSDqBGO1CUURyjcb .doneCritText2,#mermaid-svg-oSDqBGO1CUURyjcb .doneCritText3{fill:black!important;}#mermaid-svg-oSDqBGO1CUURyjcb .activeCritText0,#mermaid-svg-oSDqBGO1CUURyjcb .activeCritText1,#mermaid-svg-oSDqBGO1CUURyjcb .activeCritText2,#mermaid-svg-oSDqBGO1CUURyjcb .activeCritText3{fill:black!important;}#mermaid-svg-oSDqBGO1CUURyjcb .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-oSDqBGO1CUURyjcb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2023-04-01 2023-04-03 2023-04-05 2023-04-07 2023-04-09 2023-04-11 2023-04-13 2023-04-15 2023-04-17 2023-04-19 2023-04-21 需求分析 原型设计 设计评审 基础框架搭建 功能模块开发 内部测试 预发布 正式发布 设计阶段 开发阶段 发布阶段 项目开发计划 在这段代码中首先定义了日期的格式接着是甘特图的标题。之后通过section关键字划分了不同的项目阶段比如设计阶段、开发阶段和发布阶段。每个任务都有一个名称可能还有其他的状态标记比如done表示已完成active表示当前正在进行crit表示关键路径上的任务。任务的开始和结束日期可以是具体的日期也可以是相对于其他任务的时间点如after des2表示任务在des2之后开始。任务的持续时间可以是天数例如3d表示该任务持续3天。
要将这段代码转换为可视化的甘特图你可以将其插入支持Mermaid语法的Markdown编辑器或者某些在线Mermaid预览工具中。Mermaid会处理这段代码并生成一个美观的甘特图使项目进度一目了然。
一个可用的mermaid在线网站是: Mermaid Live。
2. 具体使用介绍
2.1 基础语法
Mermaid甘特图通过定义一系列任务和里程碑以图形方式展示项目的时间线。
让我们来看看Mermaid甘特图的基本语法和一些注意事项 定义甘特图使用gantt关键字开始描述甘特图。 设置日期格式使用dateFormat关键字设置日期格式例如YYYY-MM-DD。 设置标题使用title关键字后跟标题文本为甘特图设置标题。 定义节使用section关键字定义不同的项目阶段或任务分类此名称是必需的。 定义任务 任务条目开始于项目节标题后的新行。任务描述后跟冒号和任务ID可选、状态如active、done、开始日期和持续时间。状态标记可以是done已完成、active进行中、crit关键路径、或者不指定。开始日期可以是具体日期或是相对于另一个任务结束的时间例如after taskId。持续时间可以用天数d、周数w等表示。 里程碑里程碑通常表示项目中的关键事件使用类似任务的语法但持续时间通常是1天。 依赖关系可以通过指定一个任务开始的时间是在另一个任务之后来创建依赖关系例如after des2。 注意事项 保持代码的结构化和缩进以提高可读性。确保任务ID的唯一性因为它们用于定义任务间的依赖关系。日期格式必须与dateFormat指定的格式相匹配。使用版本支持的Mermaid工具或库因为不同版本的Mermaid可能在语法支持上有差异。
Mermaid甘特图的一个关键优点是它们可以被版本控制因为它们是以文本形式编写的这意味着它们可以很容易地与团队成员共享并集成到工作流程中。
可以在甘特图中输入注释解析器将忽略该注释。注释需要独占一行并且必须以 %%双百分号开头。注释开始后到下一个换行符的任何文本都将被视为注释包括任何图表语法。
下面是一个简单的实例如下:
gantt%% 定义日期格式dateFormat YYYY-MM-DD%% 定义标题title 文章写作流程(示例)%% 下面是具体章节的任务section 开始阶段选题: done, A1, 2024-02-20, 2d编写大纲: done, A2, after A1, 1dsection 正式工作撰写正文: active, A3, after A2, 2d交稿: milestone, A4, after A3, 1d#mermaid-svg-ZnXbQp3NVfAGuu0h {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZnXbQp3NVfAGuu0h .error-icon{fill:#552222;}#mermaid-svg-ZnXbQp3NVfAGuu0h .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ZnXbQp3NVfAGuu0h .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ZnXbQp3NVfAGuu0h .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ZnXbQp3NVfAGuu0h .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ZnXbQp3NVfAGuu0h .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ZnXbQp3NVfAGuu0h .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ZnXbQp3NVfAGuu0h .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ZnXbQp3NVfAGuu0h .marker.cross{stroke:#333333;}#mermaid-svg-ZnXbQp3NVfAGuu0h svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ZnXbQp3NVfAGuu0h .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-ZnXbQp3NVfAGuu0h .exclude-range{fill:#eeeeee;}#mermaid-svg-ZnXbQp3NVfAGuu0h .section{stroke:none;opacity:0.2;}#mermaid-svg-ZnXbQp3NVfAGuu0h .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-ZnXbQp3NVfAGuu0h .section2{fill:#fff400;}#mermaid-svg-ZnXbQp3NVfAGuu0h .section1,#mermaid-svg-ZnXbQp3NVfAGuu0h .section3{fill:white;opacity:0.2;}#mermaid-svg-ZnXbQp3NVfAGuu0h .sectionTitle0{fill:#333;}#mermaid-svg-ZnXbQp3NVfAGuu0h .sectionTitle1{fill:#333;}#mermaid-svg-ZnXbQp3NVfAGuu0h .sectionTitle2{fill:#333;}#mermaid-svg-ZnXbQp3NVfAGuu0h .sectionTitle3{fill:#333;}#mermaid-svg-ZnXbQp3NVfAGuu0h .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-ZnXbQp3NVfAGuu0h .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-ZnXbQp3NVfAGuu0h .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-ZnXbQp3NVfAGuu0h .grid path{stroke-width:0;}#mermaid-svg-ZnXbQp3NVfAGuu0h .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-ZnXbQp3NVfAGuu0h .task{stroke-width:2;}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-ZnXbQp3NVfAGuu0h .task.clickable{cursor:pointer;}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskText0,#mermaid-svg-ZnXbQp3NVfAGuu0h .taskText1,#mermaid-svg-ZnXbQp3NVfAGuu0h .taskText2,#mermaid-svg-ZnXbQp3NVfAGuu0h .taskText3{fill:white;}#mermaid-svg-ZnXbQp3NVfAGuu0h .task0,#mermaid-svg-ZnXbQp3NVfAGuu0h .task1,#mermaid-svg-ZnXbQp3NVfAGuu0h .task2,#mermaid-svg-ZnXbQp3NVfAGuu0h .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutside0,#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutside2{fill:black;}#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutside1,#mermaid-svg-ZnXbQp3NVfAGuu0h .taskTextOutside3{fill:black;}#mermaid-svg-ZnXbQp3NVfAGuu0h .active0,#mermaid-svg-ZnXbQp3NVfAGuu0h .active1,#mermaid-svg-ZnXbQp3NVfAGuu0h .active2,#mermaid-svg-ZnXbQp3NVfAGuu0h .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-ZnXbQp3NVfAGuu0h .activeText0,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeText1,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeText2,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeText3{fill:black!important;}#mermaid-svg-ZnXbQp3NVfAGuu0h .done0,#mermaid-svg-ZnXbQp3NVfAGuu0h .done1,#mermaid-svg-ZnXbQp3NVfAGuu0h .done2,#mermaid-svg-ZnXbQp3NVfAGuu0h .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-ZnXbQp3NVfAGuu0h .doneText0,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneText1,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneText2,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneText3{fill:black!important;}#mermaid-svg-ZnXbQp3NVfAGuu0h .crit0,#mermaid-svg-ZnXbQp3NVfAGuu0h .crit1,#mermaid-svg-ZnXbQp3NVfAGuu0h .crit2,#mermaid-svg-ZnXbQp3NVfAGuu0h .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCrit0,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCrit1,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCrit2,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCrit0,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCrit1,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCrit2,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-ZnXbQp3NVfAGuu0h .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-ZnXbQp3NVfAGuu0h .milestoneText{font-style:italic;}#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCritText0,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCritText1,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCritText2,#mermaid-svg-ZnXbQp3NVfAGuu0h .doneCritText3{fill:black!important;}#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCritText0,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCritText1,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCritText2,#mermaid-svg-ZnXbQp3NVfAGuu0h .activeCritText3{fill:black!important;}#mermaid-svg-ZnXbQp3NVfAGuu0h .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-ZnXbQp3NVfAGuu0h :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2024-02-20 2024-02-20 2024-02-21 2024-02-21 2024-02-22 2024-02-22 2024-02-23 2024-02-23 2024-02-24 2024-02-24 2024-02-25 2024-02-25 2024-02-26 选题 编写大纲 撰写正文 交稿 开始阶段 正式工作 文章写作流程(示例) 2.2 任务格式
mermaid gantt图的任务格式如下默认是连续的任务开始日期默认为前一任务的结束日期(如果不填写日期数据):
section 开始阶段
选题: done, A1, 2024-02-20, 2d
taskDesc: taskLabel, taskID, startDate, length一个基本的任务定义包括任务的描述、状态、标识符、起始日期以及持续时间当编写Mermaid甘特图代码时需要注意以下几点
确保任务ID的唯一性因为它们会用来定义任务间的依赖关系。遵守定义好的日期格式以确保Mermaid正确解析日期。如果不指定起始日期任务将默认在前一个任务结束后开始。各个属性之间要用逗号分隔开并且保持正确的顺序。冒号 : 将任务标题与其元数据分隔开。元数据项由逗号 , 分隔。有效标签为 active、done、crit 和 milestone。标签是可选的但如果使用则必须首先指定它们。
任务的元数据格式(taskID, startDate, length这部分内容)描述如下表:
元数据语法开始日期结束日期IDtaskID, startDate, endDate使用 dateformat 解释的 startdate使用 dateformat 解释的 endDatetaskIDtaskID, startDate, length使用 dateformat 解释的 startdate开始日期 lengthtaskIDtaskID, after otherTaskId, endDate先前指定任务的结束日期 otherTaskID使用 dateformat 解释的 endDatetaskIDtaskID, after otherTaskId, length先前指定任务的结束日期 otherTaskID开始日期 lengthtaskIDstartDate, endDate使用 dateformat 解释的 startdate使用 dateformat 解释的 enddaten/astartDate, length使用 dateformat 解释的 startdate开始日期 lengthn/aafter otherTaskID, endDate先前指定任务的结束日期 otherTaskID使用 dateformat 解释的 enddaten/aafter otherTaskID, length先前指定任务的结束日期 otherTaskID开始日期 lengthn/aendDate上一任务的结束日期使用 dateformat 解释的 enddaten/alength上一任务的结束日期开始日期 lengthn/a
在实际使用中除了taskLabel之外(必须在第一个位置)其他元数据按照以上几种形式排布就好可以满足我们甘特图所需。此外还有一个after接多任务的形式如下:
ganttapple :a, 2017-07-20, 1wbanana :crit, b, 2017-07-23, 1dcherry :active, c, after b a, 1d#mermaid-svg-9xPqdQBEvuhvxQXP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9xPqdQBEvuhvxQXP .error-icon{fill:#552222;}#mermaid-svg-9xPqdQBEvuhvxQXP .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9xPqdQBEvuhvxQXP .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9xPqdQBEvuhvxQXP .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9xPqdQBEvuhvxQXP .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9xPqdQBEvuhvxQXP .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9xPqdQBEvuhvxQXP .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9xPqdQBEvuhvxQXP .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9xPqdQBEvuhvxQXP .marker.cross{stroke:#333333;}#mermaid-svg-9xPqdQBEvuhvxQXP svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9xPqdQBEvuhvxQXP .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-9xPqdQBEvuhvxQXP .exclude-range{fill:#eeeeee;}#mermaid-svg-9xPqdQBEvuhvxQXP .section{stroke:none;opacity:0.2;}#mermaid-svg-9xPqdQBEvuhvxQXP .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-9xPqdQBEvuhvxQXP .section2{fill:#fff400;}#mermaid-svg-9xPqdQBEvuhvxQXP .section1,#mermaid-svg-9xPqdQBEvuhvxQXP .section3{fill:white;opacity:0.2;}#mermaid-svg-9xPqdQBEvuhvxQXP .sectionTitle0{fill:#333;}#mermaid-svg-9xPqdQBEvuhvxQXP .sectionTitle1{fill:#333;}#mermaid-svg-9xPqdQBEvuhvxQXP .sectionTitle2{fill:#333;}#mermaid-svg-9xPqdQBEvuhvxQXP .sectionTitle3{fill:#333;}#mermaid-svg-9xPqdQBEvuhvxQXP .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-9xPqdQBEvuhvxQXP .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-9xPqdQBEvuhvxQXP .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-9xPqdQBEvuhvxQXP .grid path{stroke-width:0;}#mermaid-svg-9xPqdQBEvuhvxQXP .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-9xPqdQBEvuhvxQXP .task{stroke-width:2;}#mermaid-svg-9xPqdQBEvuhvxQXP .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-9xPqdQBEvuhvxQXP .task.clickable{cursor:pointer;}#mermaid-svg-9xPqdQBEvuhvxQXP .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-9xPqdQBEvuhvxQXP .taskText0,#mermaid-svg-9xPqdQBEvuhvxQXP .taskText1,#mermaid-svg-9xPqdQBEvuhvxQXP .taskText2,#mermaid-svg-9xPqdQBEvuhvxQXP .taskText3{fill:white;}#mermaid-svg-9xPqdQBEvuhvxQXP .task0,#mermaid-svg-9xPqdQBEvuhvxQXP .task1,#mermaid-svg-9xPqdQBEvuhvxQXP .task2,#mermaid-svg-9xPqdQBEvuhvxQXP .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutside0,#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutside2{fill:black;}#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutside1,#mermaid-svg-9xPqdQBEvuhvxQXP .taskTextOutside3{fill:black;}#mermaid-svg-9xPqdQBEvuhvxQXP .active0,#mermaid-svg-9xPqdQBEvuhvxQXP .active1,#mermaid-svg-9xPqdQBEvuhvxQXP .active2,#mermaid-svg-9xPqdQBEvuhvxQXP .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-9xPqdQBEvuhvxQXP .activeText0,#mermaid-svg-9xPqdQBEvuhvxQXP .activeText1,#mermaid-svg-9xPqdQBEvuhvxQXP .activeText2,#mermaid-svg-9xPqdQBEvuhvxQXP .activeText3{fill:black!important;}#mermaid-svg-9xPqdQBEvuhvxQXP .done0,#mermaid-svg-9xPqdQBEvuhvxQXP .done1,#mermaid-svg-9xPqdQBEvuhvxQXP .done2,#mermaid-svg-9xPqdQBEvuhvxQXP .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-9xPqdQBEvuhvxQXP .doneText0,#mermaid-svg-9xPqdQBEvuhvxQXP .doneText1,#mermaid-svg-9xPqdQBEvuhvxQXP .doneText2,#mermaid-svg-9xPqdQBEvuhvxQXP .doneText3{fill:black!important;}#mermaid-svg-9xPqdQBEvuhvxQXP .crit0,#mermaid-svg-9xPqdQBEvuhvxQXP .crit1,#mermaid-svg-9xPqdQBEvuhvxQXP .crit2,#mermaid-svg-9xPqdQBEvuhvxQXP .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-9xPqdQBEvuhvxQXP .activeCrit0,#mermaid-svg-9xPqdQBEvuhvxQXP .activeCrit1,#mermaid-svg-9xPqdQBEvuhvxQXP .activeCrit2,#mermaid-svg-9xPqdQBEvuhvxQXP .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-9xPqdQBEvuhvxQXP .doneCrit0,#mermaid-svg-9xPqdQBEvuhvxQXP .doneCrit1,#mermaid-svg-9xPqdQBEvuhvxQXP .doneCrit2,#mermaid-svg-9xPqdQBEvuhvxQXP .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-9xPqdQBEvuhvxQXP .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-9xPqdQBEvuhvxQXP .milestoneText{font-style:italic;}#mermaid-svg-9xPqdQBEvuhvxQXP .doneCritText0,#mermaid-svg-9xPqdQBEvuhvxQXP .doneCritText1,#mermaid-svg-9xPqdQBEvuhvxQXP .doneCritText2,#mermaid-svg-9xPqdQBEvuhvxQXP .doneCritText3{fill:black!important;}#mermaid-svg-9xPqdQBEvuhvxQXP .activeCritText0,#mermaid-svg-9xPqdQBEvuhvxQXP .activeCritText1,#mermaid-svg-9xPqdQBEvuhvxQXP .activeCritText2,#mermaid-svg-9xPqdQBEvuhvxQXP .activeCritText3{fill:black!important;}#mermaid-svg-9xPqdQBEvuhvxQXP .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-9xPqdQBEvuhvxQXP :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 apple banana cherry after taskId1 taskId2 ...表明任务的开始日期将根据taskid表示全部任务的最晚结束日期进行设置。
2.3 任务标签(taskLabel)含义
在 Mermaid 的甘特图语法中active、done、crit 和 milestone 是用来标记任务状态的特殊标签它们的含义如下
active这个标签用来表示任务当前正在进行中。在甘特图中通常会用不同的颜色或样式来区分活跃的任务以便于用户识别哪些任务目前是活动的。done这个标签表示任务已经完成。使用这个标签的任务在甘特图中通常会以不同的方式显示比如标记为绿色或者用斜线划掉以表明任务已经结束。crit这个标签用来标记关键任务。关键任务是指那些对项目进度有重大影响的任务它们的完成情况对整个项目的按时完成至关重要。在甘特图中这些任务可能会用特殊的颜色或标记来突出显示。milestone这个标签用来表示项目中的重要里程碑。里程碑是项目中的关键时间点通常标志着一个主要阶段的完成或者一个重要决策点。在甘特图中里程碑通常会以特殊的图标或者标记来表示以便用户能够快速识别这些重要的时间点。
2.4 日期格式
在Mermaid甘特图中日期格式的正确设置对于确保任务和里程碑按预期显示至关重要。这里涉及到三个主要方面 输入格式输入格式是指定义甘特图中任务起始和结束日期时所使用的日期格式。这是通过dateFormat指令在甘特图定义开始时设置的。它告诉Mermaid如何解析接下来在任务定义中使用的日期字符串。 例如如果你使用dateFormat YYYY-MM-DD那么你在定义任务时应该使用格式为“2023-04-01”的日期。这是国际标准格式也是最常用的一种。 坐标轴格式坐标轴格式影响甘特图中时间轴上日期的显示方式。这是通过axisFormat指令设置的。axisFormat指令允许你自定义甘特图下方时间轴上的日期和时间显示格式。 例如如果你想在时间轴上显示更详细的日期可以使用axisFormat %Y-%m-%d。这里使用的是strftime格式这种格式在许多编程语言中用于日期和时间的格式化。 轴刻度轴刻度定义了时间轴上日期的间隔和粒度由甘特图的起始和结束日期、任务的持续时间以及Mermaid的内部算法共同决定的。 轴刻度会自动调整以适应甘特图中的任务跨度。如果任务跨度几个月轴刻度可能会显示为月份。如果任务跨度很短可能会显示为天数。 (v10.3.0)版本后日期间隔可以手动指定使用tickInterval关键字例如1day/1week。基于周的 tickInterval 默认从星期日开始一周。如果希望指定 tickInterval 应开始的另一个工作日请使用 weekday 选项 gantttickInterval 1weekweekday monday支持以下的格式指定时间刻度: /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;下面是一个甘特图的示例它包含了日期格式和坐标轴格式的定义
ganttdateFormat YYYY-MM-DDaxisFormat %Y-%m-%dtickInterval 0.5daytitle Adding Gantt Diagram to Projectsection DocumentationWrite specification :done, spec1, 2023-04-01, 3dReview specification :crit, active, after spec1, 2d在这个示例中
dateFormat指定了输入格式为“年-月-日”。axisFormat指定了坐标轴上的日期也将以“年-月-日”的格式显示。指定轴刻度为2day。
正确使用日期格式有助于确保甘特图的准确性和可读性使得项目的时间安排一目了然。
2.5 日期输入格式表
输入示例描述YYYY20144 位数字年份YY142 位数字年份Q1…4年的季度。将月份设置为季度的第一个月。M MM1…12月份数MMM MMMM一月…十二月由 dayjs.locale() 设置的语言环境中的月份名称D DD1…31一个月中的哪一天Do1st…31st带序数的月份中的某一天DDD DDDD1…365一年中的某一天X1410715640.579Unix 时间戳x1410715640579Unix 毫秒时间戳H HH0…2324 小时时间h hh1…12与 a A 一起使用的 12 小时时间。a A上午下午午后或午前m mm0…59分钟s ss0…59秒数S0…9十分之一秒SS0…99一秒几百SSS0…999千分之一秒Z ZZ12:00与 UTC 的偏移量为 ±HH:mm、±HHmm 或 Z
更多信息请参考文档: 字符串 格式 · Day.js 中文网 (nodejs.cn)。
2.6 横轴日期格式表
格式定义%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(Sunday),6]%W一年中的周数星期一为一周的第一天十进制数 [00,53]%x日期如 “%m/%d/%Y”%X时间如 “%H:%M:%S”%y没有世纪的年份作为十进制数 [00,99]%Y年份世纪为十进制数%Z时区偏移量例如 “-0700”%%一个 “%” 字面字符
更多信息请参考文档: GitHub - d3/d3-time-format at v4.0.0。
2.7 紧凑显示模式
Mermaid 甘特图的紧凑模式输出是一个配置选项它允许你调整甘特图的布局使得图表以更紧凑的形式显示减少不必要的空白区域从而更有效地利用空间。这在绘制包含大量任务的复杂甘特图时尤其有用因为它可以帮助提升图表的可读性和整体外观。
在Mermaid中可以通过在定义的开始部分添加displayMode指令来设置紧凑模式。
以下是一个如何开启紧凑模式输出的示例
---
displayMode: compact
---
gantttitle A Very Tight Gantt ChartdateFormat YYYY-MM-DDsection SectionA task :a1, 2014-01-01, 30dAnother task :a2, 2014-01-20, 25dAnother one :a3, 2014-02-10, 20d紧凑模式对于在页面或屏幕上显示更多的信息非常有用但同时也要注意如果任务太过密集可能会影响清晰度和可读性。因此设计时应平衡紧凑性和可用性确保甘特图既能有效利用空间又保持良好的可读性。
2.7 支持交互(click)
在使用Mermaid 创建甘特图时Mermaid 提供了一种增强交互性的功能允许用户为甘特图中的元素定义点击事件。这个功能通过使用 click 指令来实现它可以将图表中的任务或部分与JavaScript函数或超链接关联起来当用户点击这些元素时就会执行相应的操作。
这种交互功能极大地扩展了Mermaid 甘特图的用途使得它们不仅仅是静态的图表而是可以与用户进行动态交云的信息展示工具。
下面是一个简单的例子展示了如何在Mermaid 甘特图中使用 click 指令来定义点击事件
gantttitle Interactive Gantt ChartdateFormat YYYY-MM-DDsection SectionA task :a1, 2023-04-01, 30dAnother task :a2, after a1 , 20dclick a2 href https://mermaidjs.github.io/#mermaid-svg-HjzBReQtUhFrg1um {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-HjzBReQtUhFrg1um .error-icon{fill:#552222;}#mermaid-svg-HjzBReQtUhFrg1um .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HjzBReQtUhFrg1um .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-HjzBReQtUhFrg1um .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HjzBReQtUhFrg1um .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HjzBReQtUhFrg1um .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HjzBReQtUhFrg1um .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HjzBReQtUhFrg1um .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HjzBReQtUhFrg1um .marker.cross{stroke:#333333;}#mermaid-svg-HjzBReQtUhFrg1um svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HjzBReQtUhFrg1um .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-HjzBReQtUhFrg1um .exclude-range{fill:#eeeeee;}#mermaid-svg-HjzBReQtUhFrg1um .section{stroke:none;opacity:0.2;}#mermaid-svg-HjzBReQtUhFrg1um .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-HjzBReQtUhFrg1um .section2{fill:#fff400;}#mermaid-svg-HjzBReQtUhFrg1um .section1,#mermaid-svg-HjzBReQtUhFrg1um .section3{fill:white;opacity:0.2;}#mermaid-svg-HjzBReQtUhFrg1um .sectionTitle0{fill:#333;}#mermaid-svg-HjzBReQtUhFrg1um .sectionTitle1{fill:#333;}#mermaid-svg-HjzBReQtUhFrg1um .sectionTitle2{fill:#333;}#mermaid-svg-HjzBReQtUhFrg1um .sectionTitle3{fill:#333;}#mermaid-svg-HjzBReQtUhFrg1um .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-HjzBReQtUhFrg1um .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-HjzBReQtUhFrg1um .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-HjzBReQtUhFrg1um .grid path{stroke-width:0;}#mermaid-svg-HjzBReQtUhFrg1um .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-HjzBReQtUhFrg1um .task{stroke-width:2;}#mermaid-svg-HjzBReQtUhFrg1um .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-HjzBReQtUhFrg1um .task.clickable{cursor:pointer;}#mermaid-svg-HjzBReQtUhFrg1um .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-HjzBReQtUhFrg1um .taskText0,#mermaid-svg-HjzBReQtUhFrg1um .taskText1,#mermaid-svg-HjzBReQtUhFrg1um .taskText2,#mermaid-svg-HjzBReQtUhFrg1um .taskText3{fill:white;}#mermaid-svg-HjzBReQtUhFrg1um .task0,#mermaid-svg-HjzBReQtUhFrg1um .task1,#mermaid-svg-HjzBReQtUhFrg1um .task2,#mermaid-svg-HjzBReQtUhFrg1um .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutside0,#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutside2{fill:black;}#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutside1,#mermaid-svg-HjzBReQtUhFrg1um .taskTextOutside3{fill:black;}#mermaid-svg-HjzBReQtUhFrg1um .active0,#mermaid-svg-HjzBReQtUhFrg1um .active1,#mermaid-svg-HjzBReQtUhFrg1um .active2,#mermaid-svg-HjzBReQtUhFrg1um .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-HjzBReQtUhFrg1um .activeText0,#mermaid-svg-HjzBReQtUhFrg1um .activeText1,#mermaid-svg-HjzBReQtUhFrg1um .activeText2,#mermaid-svg-HjzBReQtUhFrg1um .activeText3{fill:black!important;}#mermaid-svg-HjzBReQtUhFrg1um .done0,#mermaid-svg-HjzBReQtUhFrg1um .done1,#mermaid-svg-HjzBReQtUhFrg1um .done2,#mermaid-svg-HjzBReQtUhFrg1um .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-HjzBReQtUhFrg1um .doneText0,#mermaid-svg-HjzBReQtUhFrg1um .doneText1,#mermaid-svg-HjzBReQtUhFrg1um .doneText2,#mermaid-svg-HjzBReQtUhFrg1um .doneText3{fill:black!important;}#mermaid-svg-HjzBReQtUhFrg1um .crit0,#mermaid-svg-HjzBReQtUhFrg1um .crit1,#mermaid-svg-HjzBReQtUhFrg1um .crit2,#mermaid-svg-HjzBReQtUhFrg1um .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-HjzBReQtUhFrg1um .activeCrit0,#mermaid-svg-HjzBReQtUhFrg1um .activeCrit1,#mermaid-svg-HjzBReQtUhFrg1um .activeCrit2,#mermaid-svg-HjzBReQtUhFrg1um .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-HjzBReQtUhFrg1um .doneCrit0,#mermaid-svg-HjzBReQtUhFrg1um .doneCrit1,#mermaid-svg-HjzBReQtUhFrg1um .doneCrit2,#mermaid-svg-HjzBReQtUhFrg1um .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-HjzBReQtUhFrg1um .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-HjzBReQtUhFrg1um .milestoneText{font-style:italic;}#mermaid-svg-HjzBReQtUhFrg1um .doneCritText0,#mermaid-svg-HjzBReQtUhFrg1um .doneCritText1,#mermaid-svg-HjzBReQtUhFrg1um .doneCritText2,#mermaid-svg-HjzBReQtUhFrg1um .doneCritText3{fill:black!important;}#mermaid-svg-HjzBReQtUhFrg1um .activeCritText0,#mermaid-svg-HjzBReQtUhFrg1um .activeCritText1,#mermaid-svg-HjzBReQtUhFrg1um .activeCritText2,#mermaid-svg-HjzBReQtUhFrg1um .activeCritText3{fill:black!important;}#mermaid-svg-HjzBReQtUhFrg1um .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-HjzBReQtUhFrg1um :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2023-04-02 2023-04-09 2023-04-16 2023-04-23 2023-04-30 2023-05-07 2023-05-14 2023-05-21 A task Another task Section Interactive Gantt Chart 不过需要注意的是Mermaid 是一个基于Markdown和图表库的工具实现点击功能可能需要与具体使用的平台或应用程序配合。例如在某些不支持JavaScript执行的环境中点击事件可能无法正常工作。因此在设计交互式甘特图时需要考虑到这些因素。
2.8 趣味使用(生成柱状图)
mermaid的甘特图可以用一种特殊的方式打开如下:
gantttitle 这是一个甘特图特殊的用法(我对水果的热爱程度)dateFormat XaxisFormat %ssection 喜欢苹果10 : 0, 10section 喜欢香蕉30 : 0, 30section 喜欢西瓜80 : crit, 0, 80section 喜欢葡萄40 : 0, 40section 喜欢草莓60 : 0, 60#mermaid-svg-CHNgV2LWOoB0drMb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CHNgV2LWOoB0drMb .error-icon{fill:#552222;}#mermaid-svg-CHNgV2LWOoB0drMb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CHNgV2LWOoB0drMb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CHNgV2LWOoB0drMb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CHNgV2LWOoB0drMb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CHNgV2LWOoB0drMb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CHNgV2LWOoB0drMb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CHNgV2LWOoB0drMb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CHNgV2LWOoB0drMb .marker.cross{stroke:#333333;}#mermaid-svg-CHNgV2LWOoB0drMb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CHNgV2LWOoB0drMb .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CHNgV2LWOoB0drMb .exclude-range{fill:#eeeeee;}#mermaid-svg-CHNgV2LWOoB0drMb .section{stroke:none;opacity:0.2;}#mermaid-svg-CHNgV2LWOoB0drMb .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-CHNgV2LWOoB0drMb .section2{fill:#fff400;}#mermaid-svg-CHNgV2LWOoB0drMb .section1,#mermaid-svg-CHNgV2LWOoB0drMb .section3{fill:white;opacity:0.2;}#mermaid-svg-CHNgV2LWOoB0drMb .sectionTitle0{fill:#333;}#mermaid-svg-CHNgV2LWOoB0drMb .sectionTitle1{fill:#333;}#mermaid-svg-CHNgV2LWOoB0drMb .sectionTitle2{fill:#333;}#mermaid-svg-CHNgV2LWOoB0drMb .sectionTitle3{fill:#333;}#mermaid-svg-CHNgV2LWOoB0drMb .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CHNgV2LWOoB0drMb .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-CHNgV2LWOoB0drMb .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-CHNgV2LWOoB0drMb .grid path{stroke-width:0;}#mermaid-svg-CHNgV2LWOoB0drMb .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-CHNgV2LWOoB0drMb .task{stroke-width:2;}#mermaid-svg-CHNgV2LWOoB0drMb .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-CHNgV2LWOoB0drMb .task.clickable{cursor:pointer;}#mermaid-svg-CHNgV2LWOoB0drMb .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-CHNgV2LWOoB0drMb .taskText0,#mermaid-svg-CHNgV2LWOoB0drMb .taskText1,#mermaid-svg-CHNgV2LWOoB0drMb .taskText2,#mermaid-svg-CHNgV2LWOoB0drMb .taskText3{fill:white;}#mermaid-svg-CHNgV2LWOoB0drMb .task0,#mermaid-svg-CHNgV2LWOoB0drMb .task1,#mermaid-svg-CHNgV2LWOoB0drMb .task2,#mermaid-svg-CHNgV2LWOoB0drMb .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutside0,#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutside2{fill:black;}#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutside1,#mermaid-svg-CHNgV2LWOoB0drMb .taskTextOutside3{fill:black;}#mermaid-svg-CHNgV2LWOoB0drMb .active0,#mermaid-svg-CHNgV2LWOoB0drMb .active1,#mermaid-svg-CHNgV2LWOoB0drMb .active2,#mermaid-svg-CHNgV2LWOoB0drMb .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-CHNgV2LWOoB0drMb .activeText0,#mermaid-svg-CHNgV2LWOoB0drMb .activeText1,#mermaid-svg-CHNgV2LWOoB0drMb .activeText2,#mermaid-svg-CHNgV2LWOoB0drMb .activeText3{fill:black!important;}#mermaid-svg-CHNgV2LWOoB0drMb .done0,#mermaid-svg-CHNgV2LWOoB0drMb .done1,#mermaid-svg-CHNgV2LWOoB0drMb .done2,#mermaid-svg-CHNgV2LWOoB0drMb .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-CHNgV2LWOoB0drMb .doneText0,#mermaid-svg-CHNgV2LWOoB0drMb .doneText1,#mermaid-svg-CHNgV2LWOoB0drMb .doneText2,#mermaid-svg-CHNgV2LWOoB0drMb .doneText3{fill:black!important;}#mermaid-svg-CHNgV2LWOoB0drMb .crit0,#mermaid-svg-CHNgV2LWOoB0drMb .crit1,#mermaid-svg-CHNgV2LWOoB0drMb .crit2,#mermaid-svg-CHNgV2LWOoB0drMb .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-CHNgV2LWOoB0drMb .activeCrit0,#mermaid-svg-CHNgV2LWOoB0drMb .activeCrit1,#mermaid-svg-CHNgV2LWOoB0drMb .activeCrit2,#mermaid-svg-CHNgV2LWOoB0drMb .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-CHNgV2LWOoB0drMb .doneCrit0,#mermaid-svg-CHNgV2LWOoB0drMb .doneCrit1,#mermaid-svg-CHNgV2LWOoB0drMb .doneCrit2,#mermaid-svg-CHNgV2LWOoB0drMb .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-CHNgV2LWOoB0drMb .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-CHNgV2LWOoB0drMb .milestoneText{font-style:italic;}#mermaid-svg-CHNgV2LWOoB0drMb .doneCritText0,#mermaid-svg-CHNgV2LWOoB0drMb .doneCritText1,#mermaid-svg-CHNgV2LWOoB0drMb .doneCritText2,#mermaid-svg-CHNgV2LWOoB0drMb .doneCritText3{fill:black!important;}#mermaid-svg-CHNgV2LWOoB0drMb .activeCritText0,#mermaid-svg-CHNgV2LWOoB0drMb .activeCritText1,#mermaid-svg-CHNgV2LWOoB0drMb .activeCritText2,#mermaid-svg-CHNgV2LWOoB0drMb .activeCritText3{fill:black!important;}#mermaid-svg-CHNgV2LWOoB0drMb .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-CHNgV2LWOoB0drMb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 10 30 80 40 60 喜欢苹果 喜欢香蕉 喜欢西瓜 喜欢葡萄 喜欢草莓 这是一个甘特图特殊的用法(我对水果的热爱程度) 是不是很有趣通过甘特图能绘出柱状图出来。
