使用 Mermaid 画图
Markdown可以进行优秀的文本编辑和排版,而 Mermaid 是可以在 markdown 中的渲染流程图、甘特图、类图、饼图等图表的标记。主流的 Markdown基本支持 Mermaid 图表渲染,这样我们就可以在 Markdown 中画图了,还可以多次编辑和减少图片插入。
Mermaid 支持以下图表(跳转链接可以查看对应示例和标记教程):
- 流程图(Flowchart)
- 时序图(Sequence diagrams)
- 类图(Class diagrams)
- 状态图(State diagrams)
- 实体关系图(Entity Relationship diagrams)
- 用户行程/计划图(User Journey Diagrams)
- 甘特图(Gantt)
- 饼图(Pie Chart)
Mermaid 的使用需要像添加代码一样
```mermaid
mermaid 图表语法
```
Mermaid 在线画图地址,好像要梯子才可以试试编写。不仅可以编写查看图表,还可以输出图片以便在不支持 mermid 的编辑器中使用。
流程图
流程图常用于逻辑描述,逻辑关系的图解。
完整语法参考 Flowcharts ,可以设置流程图方向、节点图形样式、节点添加 url 跳转、线条样式、子流程图
流程图方向
TB - top to bottom == TD top-down
BT - bottom to top
RL - right to left
LR - left to right
示例
以一个 App 是否登录为例
graph TB
A(开始)-->B{是否登录}
B--是-->C[进入首页]
B--否-->D[弹框提示登录]
C & D-->E(结束)
F[可以跳转的节点];
click F "http://www.baidu.com"
graph
可以使用flowchart
替换
graph LR
A-->B
subgraph cd 流程图
C-->D
end
A.->C
节点换行
使用<br/>
标记即可换行,讨论参考https://github.com/mermaid-js/mermaid/issues/384
时序图
时序图描述对象之间发送消息的事件顺序,表达多个对象之间的动态协作。包括角色、对象、生命线、控制焦点和消息的元素。
关系
sequenceDiagram
A ->> B: a 到 b
B -->> A: b 返回 a
A -> B: 线条连接
A -x B: 同步关系
A --x B: 异步关系
注解
可以添加 Note 来为时序图添加注解
sequenceDiagram
A -->> B: a 到 b
Note right of A: a 右边的注释
A -->> C: a 到 c
Note over A,C: a c 之间的注释
支付时序图示例
以用户支付时序图为例
sequenceDiagram
用户->>+客户端: 发起支付操作
客户端->>支付后台: 提交支付请求
loop 校验
支付后台->>支付后台: 解析验证参数,创建支付预订单
end
支付后台->>第三方支付平台: 请求第三方支付
第三方支付平台-->>用户: 跳转第三方支付页面
用户->>第三方支付平台: 完成支付操作
第三方支付平台->>第三方支付平台: 进行转账操作
第三方支付平台-->>支付后台: 回调后端 返回支付结果
Note right of 支付后台: 需要更新财务系统
支付后台-->>客户端: 返回支付结果
客户端-->>用户: 显示支付页面
类图
类图用于描述一个类的大概,包含类名、属性、方法。
classDiagram
Animal <|--Dog
Animal <|--Fish
Animal <|--Zebra
Animal: age: Int
Animal: gender: String
Animal: +init()
Animal: +isMammal()
Animal: +mate()
class Dog{
breakColor: String
+eat()
}
class Fish{
- sizeInFeet: Int
-canEat()
}
class Zebra{
+is_wild: Bool
+run()
}
甘特图
甘特图主要做任务拆解。
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
饼图
饼图用于数据展示与统计,可以方便看出占比。
语法:
pie title 标题
"key":value
"key2":value2
示例
养宠物占比图
pie title 养宠物占比图(饼图示例)
"小狗":40
"小猫": 30
"其他": 30
渲染效果图