Mermaid 绘图指南（二）- 使用 Typora 与 Mermaid 绘制专业图表
| 日期 | 作者 | 版本 | 备注 |
|---|---|---|---|
| 2022-05-06 | Dog Tao | V1.0 | 发布 V1.0 - 完成文章框架搭建及流程图语法规则的详细介绍。 |
| 2025-04-24 | Dog Tao | V1.1 | 修改文章使其更简洁流畅，语法和格式更加统一，便于阅读和理解。 |
文章目录
概述
在技术文档编写、项目管理和系统设计领域，清晰的可视化表达往往比文字更具说服力。Typora作为一款极致简洁的Markdown编辑器，与Mermaid这一基于文本的图表渲染引擎的深度整合，为创作者提供了"代码即图表"的全新工作流。本文系统梳理了流程图、时序图、甘特图等主流图表的绘制方法，通过语法解析与案例演示，帮助读者快速掌握可视化表达的利器。
参考文章
1）使用Typora画 流程图、时序图、顺序图、甘特图、等图详解
2）Mermaid从入门到入土——Markdown进阶语法
3）史上最完美的 Typora 教程
4）B站-使用 Typora 画图，类图、流程图、时序图统统都能画
Typora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档一样流畅自如，不像其他编辑器的有编辑栏和显示栏。Typora删除了预览窗口，以及所有其他不必要的干扰。取而代之的是实时预览。Markdown的语法因不同的解析器或编辑器而异，Typora使用的是GitHub Flavored Markdown。
Typora内置了对Mermaid的支持，才可以画各种图。使用方法：首先在 Typora 中，输入 ```mermaid 然后敲击回车，即可初始化一张空白图。在空白处输入下面的源码即可，按照mermaid语法格式来操作即可。
- 什么是Mermaid？
- Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。
- 项目地址：https://github.com/mermaid-js/mermaid
-
怎么使用Mermaid？
- 使用特定的Mermaid渲染器；
- 使用集成了Mermaid渲染功能的Markdown编辑器，如Typora。使用时，需要将代码块的语言选择为
Mermaid。
-
Mermaid能绘制哪些图？
- 饼状图：使用
pie关键字，具体用法后文将详细介绍 - 流程图：使用
graph关键字，具体用法后文将详细介绍 - 序列图：使用
sequenceDiagram关键字 - 甘特图：使用
gantt关键字 - 类图：使用
classDiagram关键字 - 状态图：使用
stateDiagram关键字 - 用户旅程图：使用
journey关键字
- 饼状图：使用
流程图
方向与节点
-
方向：用于开头，声明流程图的方向。
graph或graph TB或graph TD：从上往下graph BT：从下往上graph LR：从左往右graph RL：从右往左
-
结点
- 无名字的结点：直接写内容，此时结点边框为方形；节点内容不支持空格
- 有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格
下面的实例中，没有为graph指定方向，因此默认是从上往下的。但是由于各个结点之前没有箭头，所以他们都处于同一排。
graph
默认方形
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
graph
id1{菱形}
id2{{六角形}}
id3[/平行四边形/]
id4[\反向平行四边形\]
id5[/梯形\]
id6[\反向梯形/]
连线样式
- 实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式
graph LR
a-->b--文本1-->c-->|文本2|d
- 粗实线箭头：分为无文本箭头和有文本箭头
graph LR
a==>b==文本==>c
- 虚线箭头：分为无文本箭头和有文本箭头
graph LR
a-.->b-.文本.->c
- 无箭头线：即以上三种连线去掉箭头后的形式
graph LR
a---b
b--文本1---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h
- 其他连线：需要将
graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同
flowchart LR
A o--o B
B <--> C
C x--x D
旧连线 --文本--> 也会不同
- 延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个
-。字符可多次添加。
graph LR
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B --->|No| E[End];
连线形式
- 直链
graph LR
A -- text --> B -- text2 --> C
- 多重链：可以使用
&字符，或单个描述
graph
a --> b & c--> d
A & B--> C & D
X --> M
X --> N
Y --> M
Y --> N
子图与注释
- 子图：需要将
graph关键字改为flowchart，在代码段的开始加入subgraph，尾部加入end
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
- 注释：在行首加入
%%即可。
graph LR
%%这是一条注释，在渲染图中不可见
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
标准流程图
先输入```mermaid，换行输入flowchat，然后输入下面的语法即可。
示例1 -（竖向）
```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
示例2 - 横向
```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
UML时序图
时序图（Sequence Diagram），亦称为序列图、循序图或顺序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。时序图是一个二维图，横轴表示对象，纵轴表示时间，消息在各对象之间横向传递，依照时间顺序纵向排列。
时序图的作用是展示对象之间交互的顺序。将交互行为建模为消息传递，通过描述消息是如何在对象间发送和接收的来动态展示对象之间的交互；相对于其他UML图，时序图更强调交互的时间顺序，可以直观的描述并发进程。
UML时序图介绍文档: 快速学习时序图：时序图简介、画法及实例
- 先输入```mermaid (或）sequence
- 使用sequenceDiagram 则不使用sequence
- ->> 代表实线箭头，–>> 则代表虚线箭头
- -> 直线，–>虚线
简单时序图
示例1
```mermaid
sequenceDiagram
客户->>银行柜台: 我要存钱
银行柜台->>后台: 改一下这个账户数字哦
后台->>银行柜台: 账户的数字改完了，明天起息
银行柜台->>客户: 好了，给你回单 ，下一位
```
示例2
```mermaid
sequenceDiagram
对象A->>对象B:对象B你好吗（请求）
Note right of 对象B:对象B的描述（提示）
Note left of 对象A:提示
对象B-->>对象A:我很好（响应）
对象A->>对象B:你确定？
```
复杂时序图
示例1
```mermaid
sequenceDiagram
title:标题：复杂使用
对象A->>对象B:对象B你好吗（请求）
Note right of 对象B:对象B的描述（提示）
Note left of 对象A:提示
对象B-->>对象A:我很好（响应）
对象B->>对象C:你好吗？
对象C-->>对象A: B找我了
对象A->>对象B:你确定？
note over 对象C,对象B:朋友
participant D
note right of D:没人陪我
```
示例2
```mermaid
sequenceDiagram
participant A
participant B
participant C
A->>C:hello
loop health
C->>C:no
end
Note right of C:you should eat<br/> doctor
B-->>A:nice
C->>B:how are you?
B-->>C:great
```
示例3
```mermaid
sequenceDiagram
participant A
participant B
participant C
participant D
title:"练习时序图"
A->>B:request
B->>B:verify sign
B->>C:123
C-->>B:321
B->>C:456
C->>C:code
C->>D:789
D-->>B:987
alt yes
Note right of B:yes的结果
else no
B-->>D:login
D-->>B:login success
end
B->>B:加密
B-->>A:return
```
示例4
```mermaid
sequenceDiagram
title:时序图例子
Alice->>Alice:自言自语
Alice-->>John:hello john,
%% over 可以用于单独一个角色上，也可以用于相邻的两个角色间：
note over Alice,John:friend
%% loop 后跟循环体说明文字
loop healthcheck
John-->>John:Fight agaist hypochondra
end
note right of John: Rational
John-->>Alice:Great!
John->>Bob:How about you?
%% 控制焦点：用来表示时序图中对象执行某个操作的一段时间
%% activate 角色名：表示激活控制焦点
activate Bob
Bob-->>John:Jolly good!
%% deactivate 角色名 表示控制焦点结束
deactivate Bob
Alice->>+Bob: Hello Bob, how are you?
rect rgb(175, 255, 212)
alt is sick
Bob-->>Alice: Not so good :(
else is well
Bob-->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob-->>Alice: Thanks for asking
end
end
loop communicating
Alice->>+John: asking some questions
John-->>-Alice: answer
end
par Alice to John
Alice->>John: Bye
and Alice to Bob
Alice->>Bob: Bye
end
Alice-xJohn: 这是一个异步调用
Alice--xBob: 这是一个异步调用
```
标准时序图
示例1
```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!A
```
甘特图
示例1
```mermaid
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
```
类图
语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。
示例1
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
状态图
示例1
```mermaid
stateDiagram
[*] --> s1
s1 --> [*]
```
饼图
- 从
pie关键字开始图表 - 然后使用
title关键字及其在字符串中的值，为饼图赋予标题（这是可选的） - 在
" "内写上分区名。 - 分区名后使用
:作为分隔符 - 分隔符后写上数值，最多支持2位小数——数据会以百分比的形式展示
示例1
```mermaid
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
图形导出
绘制好的图片可以选择菜单/文件/导出，导出为图片或者网页格式。在网页中图片是以 SVG 格式渲染的，你可以复制 SVG 内容，导入到SVG的图片编辑器中进一步操作。
导出成网页类型，再使用浏览器打开，如下所示：
结论
随着数字化协作的深入发展，兼具专业性与易用性的文档工具已成为职场核心竞争力。Typora与Mermaid的珠联璧合，为技术写作开辟了"代码化绘图"的新范式。通过本文的语法详解与案例实践，我们见证了从简单流程图到多层甘特图、从基础时序图到复杂类图的完整实现路径。这种以纯文本构建可视化内容的方式，不仅使图表具备版本控制的可追踪性，更通过跨平台渲染能力确保了文档的持久可用性。
参考文章
1）使用 Typora之画图
2）快速学习时序图：时序图简介、画法及实例
3）UML时序图(Sequence Diagram)学习笔记
4）开源 画图_使用 Typora 画图（类图、流程图、时序图）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
