mermaid 是一个简明的描述做图的文本描述语言

1
Generation of diagrams and flowcharts from text in a similar manner as markdown

基本用法

如下的语法,可以在Typora下直接显示图形

图形

1
2
graph LR
A--> B

LR表示方向,其它实例如下

缩写 含义
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右
TD 与TB相同

节点和形状

1
2
graph TD
	start[开始] --> split((分割)) --> join(合并) --> endx>结束]
类别
start 默认文本节点
start[开始] 文本节点
start(开始) 圆边节点
start((开始)) 圆形节点
start>开始] 非对称形状
start{开始} 菱形节点
A –> B 带箭头的连接
A — B 无箭头的连接
A-.->B 虚线
A ==> B 粗连接
A – 指向 –> B 连接注释
A – 指向 – B 连接注释
A –>|指向| B
A – |指向|B
A-. 注释 .->B 虚线
A == 注释 ==> B 带文本的粗连接

子图

1
2
3
subgraph title
    graph definition
end
1
2
3
4
5
graph TD
    B["fa:fa-twitter 和平"]
    B-->C[fa:fa-ban 禁止]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro 也许?);

参考资料

https://www.jianshu.com/p/af48cc77b57a

https://sspai.com/post/63055