Markdown+Mermaid 渲染图形~二
bear
04-08
104
0
目录
展开 收起
在上一篇的基础上接着展开~~
Markdown+Mermaid 渲染图形~一

# 甘特图

---Gantt Diagram

甘特图以图示通过活动列表和时间刻度表示出特定项目的顺序与持续时间。一条线条图，横轴表示时间，纵轴表示项目，线条表示期间计划和实际完成情况。直观表明计划何时进行、进展与要求的对比。便于管理者弄清楚项目的剩余任务，评估工作进度。

    总结如下：

  • 以图形或表格的形式显示活动；
  • 通用的显示进度的方法；
  • 构造时含日历和持续时间，不将周末节假日算在进度内。
  • 通过不同长度和颜色的条形图，可以清晰地展示每个任务的开始时间、结束时间、持续时间和完成情况；
  • 帮助项目团队和管理人员了解任务之间的关系和依赖性，优化项目计划和执行，提高项目的效率和成功率；

 

日期在坐标轴上显示的格式

    默认的输出日期格式为YYY-MM-DD。可以通过自定义的axisFormat，例如2020-Q1表示2020年第一季度。

axisFormat %Y-%m-%d

格式
定义
%a
工作日简称
%A
工作日全称
%b
月份简称
%B
月份全称
%c
日期和时间，如"%a %b %e %H:%M:%S%Y"
%d
用2位十进制数字表示月份中的天数，不足的补零[01,31]
%e
用2位十进制数字表示月份中的天数，不足的补空格[1,31]；等同于使用%_d
%H
用2位十进制数字表示小时数，不足的补零(24小时制)  [00,23]
%I
用2位十进制数字表示小时数，不足的补零(12小时制)  [00,12]
%j
用3位十进制数字表示年份中的天数，不足的补零[001,366]
%m
用2位十进制数字表示年份中的月份，不足的补零[01,12]
%M
用2位十进制数字表示分钟数，不足的补零[00,59]
%L
用3位十进制数字表示毫秒数，不足的补零[000,999]
%p
AM或PM
%S
用2位十进制数字表示秒数，不足的补零[00,61]
%U
用2位十进制数字表示年份中的周数，不足的补零(星期日作为一周的第一天)[00,53]
%w
用十进制表示星期几[0(Sunday),6]
%W
用2位十进制数字表示年份中的周数(星期一作为一周的第一天)[00,53]
%x
日期，如"%m/%d/%Y"
%X
时间，如"%H:%M:%S"
%y
不包括世纪的年份，表示为2位十进制数，不足补零[00,99]
%Y
包括世纪的年份，表示为4位十进制数，不足补零

基本案例

简单的甘特图

  • 分区1
    • 任务1-1
    • 任务1-2
  • 分区2
    • 任务2-1
    • 任务2-2
gantt西瓜 :a, 2025-03-20, 1w香蕉 :crit, b, 2025-03-23, 1d樱桃 :active, c, after b a, 1d

分section案例

    在以下这些案例中，甘特图被分成不同的部分，每一个部分用section关键字开头并为其命名，有些甚至可以根据我的实际来进行相应的更改。

 

最简单的例子

gantttitle 简单的甘特图dateFormat  YYYY-MM-DDsection 分区1任务1-1           :a1, 2025-04-01, 30d任务1-2           :after a1  , 20dsection 分区2任务2-1      :2025-04-12  , 12d任务2-2      : 24d

复杂案例

  • 基本任务
  1. 已完成任务
  2. 进行中任务
  3. 未开始任务1
  4. 未开始任务2
  • 紧急任务
  1. 已完成紧急任务
  2. 已完成紧急任务1
  3. 进行中紧急任务2
  4. 未开始紧急任务3
  5. 未开始一般任务4
  6. 未开始一般任务5
  • 文档编写
  1. 进行中文档任务1
  2. 未开始文档任务2
  3. 未开始文档任务3
  • 其他部分
  1. 其他任务1
  2. 其他任务2
  3. 其他任务3
ganttdateFormat           :YYYY-MM-DDtitle                甘特图实例section 基本任务已完成任务            :done,    des1, 2025-04-06,2025-04-08进行中任务            :active,  des2, 2025-04-09, 3d未开始任务1           :         des3, after des2, 5d未开始任务2           :         des4, after des3, 5dsection 紧急任务已完成紧急任务      :crit, done, 2025-04-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

项目开发计划

  • 设计阶段
  1. 需求分析
  2. 原型设计
  3. 设计评审
  • 开发阶段
  1. 基础框架搭建
  2. 功能模块开发
  3. 内部测试
  • 发布阶段
  1. 预发布
  2. 正式发布
gantt    dateFormat  YYYY-MM-DD    title       项目开发计划    section 设计阶段    需求分析          :done,    des1, 2025-04-01, 2025-04-03    原型设计          :active,  des2, 2025-04-04, 3d    设计评审          :         des3, after des2, 2d    section 开发阶段    基础框架搭建      :crit, active,  dev1, 2025-04-08, 2025-04-10    功能模块开发      :         dev2, after dev1, 5d    内部测试          :         dev3, after dev2, 3d        section 发布阶段    预发布            :         pre1, after dev3, 2d    正式发布          :         pre2, after pre1, 2d

文章写作流程

  • 开始阶段
    • 选题
    • 编写大纲
  • 正式工作
    • 撰写正文
    • 交稿
gantt	%% 定义日期格式	dateFormat	YYYY-MM-DD	%% 定义标题	title 		文章写作流程
	%% 下面是具体章节的任务	section 开始阶段	选题: done, A1, 2025-02-20, 2d	编写大纲: done, A2, after A1, 1d
	section 正式工作	撰写正文: active, A3, after A2, 2d	交稿: milestone, A4, after A3, 1d

仿照类似柱状图

这个是柱状图，但是是用甘特图来表示的。

gantt title 不同板块-距离上次更新的天数dateFormat XaxisFormat %s section 板块171 : 0, 71section 板块236 : 0, 36section 板块334 : 0, 34section 板块49 : 0, 9section 板块55 : 0, 5

添加里程碑

    里程碑：可以在图表中添加里程碑。里程碑与任务不同，因为它们代表时间上的单一瞬间，由关键词milestone标识。里程碑的确切位置由由起始日期和该任务的“持续时间”决定：初始日期+持续时间/2

gantt  dateFormat HH:mm  axisFormat %H:%M  初始里程碑 : milestone,m1, 17:49, 2m  任务1 : 10m  任务2 : 5m  最终里程碑 : milestone, m2, 18:14, 2m

# 时序图

---Sequence Diagram

    时序图展示了系统中各参与者之间如何相互作用，以及事件的发生顺序(或者说是消息的发送和接收顺序)。时序图以矩形代表参与者，参与者下方代表生存期间的长实线，连接线之间代表消息的箭头和控制焦点组成。

  • 时序图是用来描述交互过程的图形组合，描述了对象间的动态协作；
  • 时序图最核心的元素是对象、生命线和消息；
  • 我们可以通过判断、循环、并行描述复杂的消息传递及处理流程；

 

主要的几种连接类型

类型
描述
->
没有箭头的实线
–>
没有箭头的虚线
->>
有箭头的实线
–>>
有箭头的虚线
-x
有交叉箭头的实线
–x
有交叉箭头的虚线

实际案例一

在下面的这个例子中，下面的时序图如果职场人应该都懂，展示了从提议到确认的沟通过程。通过时序图，我们可以理解参与者之间的互动顺序，帮助协调工作。

sequenceDiagram  participant A as 决策者  participant B as 处理中枢  participant C as 执行者  A->>B: 提议xx事情推行的必要性  B->>C: 向执行者询问意见  C-->>B: 执行者表示同意  B-->>A: 处理中枢确认计划  A->>B: 做出策划、以及详细步骤  A->>C: 告知执行者该事情的一些细节

案例二

sequenceDiagram  participant A as 黑土  participant B as 白云  note left of A: 测试线形状和箭头  A->B:老铁，最近还好吗？  B->>A:最近还行。  A-->B:清明节过完了，假期有没有出去玩？  B-->>A:虽然假期有三天，但感觉相比于人流量，还是有点堵车。  A-xB:是啊，有大段时间都在路上奔波来着了。  B--xA:是的，算上赶路的时间，建议还是五一出去玩。

文章版权声明
杂项(细分)
杂项(大类)
打赏
Markdown 渲染图形~一
上一篇
Markdown+Mermaid 渲染图形~三
下一篇

发表评论

注册不是必须的

生成中...
二维码标题