Markdown中甘特图的使用

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
​```

渲染:

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 ZZ+12: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
​```

渲染:

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​```

渲染:

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注释的用法

快来试试吧🖊️

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/892665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python bs4 selenium 查找a href=javascript:();的实际点击事件和url

在使用 BeautifulSoup 和 Selenium 时&#xff0c;处理 href"javascript:;" 的链接需要一些额外的步骤&#xff0c;因为这些链接不直接指向一个 URL&#xff0c;而是通过 JavaScript 代码来执行某些操作。这可能包括导航到另一个页面、触发模态窗口、显示/隐藏内容等…

day07_Spark SQL

文章目录 day07_Spark SQL课程笔记一、今日课程内容二、Spark SQL函数定义&#xff08;掌握&#xff09;1、窗口函数2、自定义函数背景2.1 回顾函数分类标准:SQL最开始是_内置函数&自定义函数_两种 2.2 自定义函数背景 3、Spark原生自定义UDF函数3.1 自定义函数流程&#x…

Laravel 中 Cache::remember 的基本用途

在 Laravel 中&#xff0c;Cache::remember 方法用于缓存数据&#xff0c;以提高应用程序的性能。当需要从数据库或其他较慢的数据源中检索数据时&#xff0c;可以使用 Cache::remember 来检查请求的数据是否已经被缓存。如果数据已缓存&#xff0c;则直接从缓存中读取&#xf…

如何解决HTML和CSS相关的问题,什么情况下会导致元素被遮挡?

在开发过程中&#xff0c;HTML 和 CSS 中的元素遮挡问题通常是由于布局、定位、层级等因素导致的。在使用 Vue.js 时&#xff0c;这些问题依然常见&#xff0c;尤其是涉及到动态渲染、条件渲染和组件嵌套的场景。以下是一些常见的导致元素被遮挡的原因&#xff0c;并通过 Vue.j…

Hadoop3.x 万字解析,从入门到剖析源码

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…

Java 实现 Elasticsearch 查询当前索引全部数据

Java 实现 Elasticsearch 查询当前索引全部数据 需求背景通常情况Java 实现查询 Elasticsearch 全部数据写在最后 需求背景 通常情况下&#xff0c;Elasticsearch 为了提高查询效率&#xff0c;对于不指定分页查询条数的查询语句&#xff0c;默认会返回10条数据。那么这就会有…

Elasticsearch ES|QL 地理空间索引加入纽约犯罪地图

可以根据地理空间数据连接两个索引。在本教程中&#xff0c;我将向你展示如何通过混合邻里多边形和 GPS 犯罪事件坐标来创建纽约市的犯罪地图。 安装 如果你还没有安装好自己的 Elasticsearch 及 Kibana 的话&#xff0c;请参考如下的链接来进行安装。 如何在 Linux&#xff0…

C#学习笔记 --- 简单应用

1.operator 运算符重载&#xff1a;使自定义类可以当做操作数一样进行使用。规则自己定。 2.partial 分部类&#xff1a; 同名方法写在不同位置&#xff0c;可以当成一个类使用。 3.索引器&#xff1a;使自定义类可以像数组一样通过索引值 访问到对应的数据。 4.params 数…

【Flink】Flink内存管理

Flink内存整体结构图&#xff1a; JobManager内存管理 JVM 进程总内存(Total Process Memory)Flink总内存(Total Flink Memory)&#xff1a;JVM进程总内存减去JVM Metaspace(元空间)和JVM Overhead(运行时开销)上图解释&#xff1a; JVM进程总内存为2G;JVM运行时开销(JVM Overh…

MYSQL8创建新用户报错:You have an error in your SQL syntax;check...

本文所用——MYSQL版本&#xff1a;8.0.25 baidu都是直接创建新用户并赋权&#xff0c;如下&#xff1a; GRANT ALL PRIVILEGES ON *.* TO 用户名% IDENTIFIED BY 密码 WITH GRANT OPTION;但是我用的MYSQL版本它就不行&#xff0c;会报错&#xff01; 经查阅资料发现——MY…

力扣经典练习题之198.打家劫舍

今天继续给大家分享一道力扣的做题心得今天这道题目是198.打家劫舍,这是一道非常经典的问题,在动态规划中经常考到这类问题,题目如下: 题目链接:198.打家劫舍 1,题目分析 首先此题就是给我们了一个数组,代表可以偷的房屋中的对应的金额,我们是一个小偷,一次可以偷很多…

万物互联的背后:MCU嵌入式硬件的奇幻之旅

文章背景&#xff1a;嵌入式硬件是什么&#xff1f; 你可能听说过嵌入式硬件&#xff0c;却总觉得它像是实验室里神秘的玩意儿。其实&#xff0c;它就在我们身边——从你手上的智能手表到车里的倒车雷达&#xff0c;无一不是嵌入式硬件的“杰作”。想象一块小小的电路板&#x…

【数据分析】一、初探 Numpy

目录 前言1. 一维 array 的生成2. 一维 array 的基本操作2.1. 查看属性2.2. 花式索引2.3. 条件筛查2.4. 数据统计 3. n 维 array 的生成4. n 维 array 的基本操作4.1. 查看属性4.2. 查询和切片4.3. 花式索引4.4. 矩阵 前言 Numpy是Python的常用开源数值计算扩展库&#xff0c;用…

2024年开发语言热度排名

随着技术的不断发展和变化&#xff0c;编程语言的热度也在不断演变。2024年即将到来&#xff0c;我们有必要回顾和展望当前和未来的开发语言市场。本文将基于多个因素&#xff0c;包括行业需求、社区支持、流行度以及新兴趋势&#xff0c;对2024年的开发语言热度进行排名和分析…

LabVIEW数据库管理系统

LabVIEW数据库管理系统&#xff08;DBMS&#xff09;是一种集成了数据库技术与数据采集、控制系统的解决方案。通过LabVIEW的强大图形化编程环境&#xff0c;结合数据库的高效数据存储与管理能力&#xff0c;开发人员可以实现高效的数据交互、存储、查询、更新和报告生成。LabV…

SQL语言的数据结构

SQL语言的数据结构及其应用 引言 SQL&#xff08;Structured Query Language&#xff09;是一种用于关系数据库管理系统&#xff08;RDBMS&#xff09;的标准语言&#xff0c;其核心功能是对存储在关系数据库中的数据进行查询、插入、更新和删除等操作。理解SQL语言中使用的数…

如何在 Linux、MacOS 以及 Windows 中打开控制面板

控制面板不仅仅是一系列图标和菜单的集合&#xff1b;它是通往优化个人计算体验的大门。通过它&#xff0c;用户可以轻松调整从外观到性能的各种参数&#xff0c;确保他们的电脑能够完美地适应自己的需求。无论是想要提升系统安全性、管理硬件设备&#xff0c;还是简单地改变桌…

Http 响应状态码 前后端联调

http 响应状态码 &#xff1a;是服务器在处理HTTP请求时返回的状态信息&#xff0c;用于表示请求的处理结果 1xx : 信息性状态码 100 Continue: 服务器已收到请求头部&#xff0c;客户端应继续发送请求体。 101 Switching Protocols : 切换协议。服务器已理解客户端的请求&a…

【文件锁】多进程线程安全访问文件demo

组合文件锁共享锁&#xff0c;并RAII 化&#xff0c;保证文件的跨进程线程读写安全。 demo模拟使用多个进程&#xff0c;每个进程包含多个线程对文件进行读写测试。 代码调用开源json库&#xff0c;需要下载到调试机器&#xff0c;编译时手动指定&#xff1a; g -stdc17 -pthr…

SVG图表

1、时序图 英文 #mermaid-svg-OyLuBTPnpbW9XDOB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OyLuBTPnpbW9XDOB .error-icon{fill:#552222;}#mermaid-svg-OyLuBTPnpbW9XDOB .error-text{fill:#552222;stroke:#55…