【拓展】图的渲染工具-Mermaid

【拓展】图的渲染工具-Mermaid

Mermaid简介

Mermaid 是一个基于 JavaScript 的图表和图表工具，可呈现受 Markdown 启发的文本定义以动态创建和修改图表。
如果你熟悉 Markdown，那么学习 Mermaid 的语法应该没有问题，你甚至可以把它当成Markdown的扩展语法来对待。
仅用简单的语句表达实现图的渲染

1 graph LR
2 a–>b
3 a–>c
4 b–>d
5 b-.->c
6 c–>d
7 d–>a

渲染效果：

Mermaid官方网站还提供了官方在线绘图渲染器，点击即可跳转进入。

Mermaid能绘制哪些图

我们现在接触的图表类型不多，所以会认为Mermaid不会有很大作用，事实上，Mermaid有极其强大的功能：

• 流程图 (Flowchart)：用于展示流程、步骤和决策流程。
• 时序图 (Sequence Diagram)：展示事件发生的顺序和时间轴上的活动。
• 类图 (Class Diagram)：用于展示对象之间的关系和结构。
• 状态图 (State Diagram)：展示对象在不同状态下的行为转换。
• 实体关系图 (Entity Relationship Diagram)：用于展示实体之间的关系模型。
• 用户旅程 (User Journey)：描述用户与产品或服务互动的整个过程。
• 甘特图 (Gantt)：用于展示项目进度、时间安排和任务分配。
• 饼图 (Pie Chart)：展示数据的相对比例，常用于比较类别间的数量关系。
• 四象限图 (Quadrant Chart)：用于将数据或概念按照两个维度进行分类和比较。
• 需求图 (Requirement Diagram)：用于展示需求之间的关系和依赖。
• Git 图表 (Gitgraph Diagram)：用于展示 Git 代码仓库中的提交历史和分支结构。
• C4 图表 (C4 Diagram)：一种软件架构图表，用于描述软件系统的结构。
• 思维导图 (Mindmaps)：帮助组织和展示思维导向的图表。
• 时间线 (Timeline)：以时间为轴展示事件或数据的顺序和时序。
• Zenuml：用于创建 UML 序列图和状态图的在线工具。
• Sankey 图表：用于展示复杂系统中能量、物质或者信息的流动关系。
• XY 图表 (XYChart)：以笛卡尔坐标系方式展示数据的散点分布和关联关系。

可以说，Mermaid为IT人员提供了极其强大、回应需求的工具，减少了IT人员在画图上的耗时，大大提升效率。

绘图示例

就咱们目前用到的、作业需求的类型展示：

流程图Flowchart

譬如之前做的实验2的程序流程图：

又比如用Mermaid画出《计算机科学概论》教材175页表8-3中的航线图：

Mermaid中:

饼图Pie

1 pie
2 title Pets adopted by volunteers
3 “Dogs” : 386
4 “Cats” : 85
5 “Rats” : 15

甘特图Gantt

就本周（第九周）云班课作业“CPU调度”来说：

要求画出Gantt图。如果说使用draw.io手绘流程图还行的话，那么在甘特图等方面，使用draw.io就显得捉襟见肘了。如果使用Mermaid,我们可以免去手绘的烦恼：

只要逻辑清晰，思路明确，我们就可以用就简单的语句表示出进程，而Mermaid Live Editor会自动渲染出我们想要的效果。

Mermaid语法学习相关资料

• 官方语法解释：https://mermaid.js.org/intro/#diagram-types
  全英文网站，大家可以借助工具学习

• Bilibili上AaaGss 的typora绘图合集视频也不错

流程图

稀土掘金平台 天朝八阿哥 的笔记

甘特图

稀土掘金平台 天朝八阿哥 的笔记