mermaid绘制流程图
meimaid绘制流程图
平时撰写公众号、知乎、CSDN等使用Typora
Typora是一款Markdown编辑器，支持meimaid，十分方便
下面来学一下流程图语法：
首先要有以下格式
```mermaid
召唤mermaid编辑栏
开始写代码
节点文本框
graph LR;
id
id
或者：
flowchart LR;
id1[这是一个文本框]
这是一个文本框
流程图之间用箭头就可以实现了，很简单：
graph TD;
节点1-->节点2
节点1
节点2
相信你已经明白了，上面代码TD代表Top to Down由上至下。LR代表Left to Right由左至右
graph RL;
Start-->End
Start
End
总结：
| 代码 | 含义 |
|---|---|
| TB | Top to Down上至下 |
| TD | Top Down = TB |
| BT | Bottom to Top |
| RL | Right to Left |
| LR | Left to Right |
节点特效实现
graph LR;
node1(文本框)
文本框
graph LR
node([文本框形状1])
文本框形状1
graph LR
node([[文本框形状2]])
文本框形状2
graph LR;
node[(数据库)]
数据库
还有其他类型，不再一一展示，需要自取：
node((circle))-->node1>flow]-->node2{box}-->node3{{flow1}}
-->node4[/parallelogram/]-->node5[\parallelogram\]
circle
flow
box
flow1
parallelogram
parallelogram
上述样式在日常生活中就够用
graph LR
id1(start) --> id2(stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
start
stop
或者简单的变色
graph LR;
A:::class1 --> B
classDef class1 fill:#f96;
A
B
连接线文字
graph LR
A --- B
A
B
在连接线上添加文字：
graph LR
A -- This is the text! -- B
This is the text!
A
B
graph LR
A---|new text|B
new text
A
B
graph LR;
A -- text --> B
text
A
B
其它类型的箭头：
graph LR;
A-.->B
A
B
graph LR;
A-.添加文字.->B
添加文字
A
B
graph LR;
A == 文字 ==> B
文字
A
B
连接线样式
flowchart LR;
A --o B
B --x C
A
B
C
flowchart LR
A o--o B
B <--> C
C x--x D
A
B
C
D
日常综合流程图
graph TD;
A -- text --> B --text1 -->C
text
text1
A
B
C
graph LR;
a --> b & c --> d
或者
graph LR;
a --> b; a --> c; c --> d; b --> d
a
b
c
d
graph TB;
A & B --> C & D
A
B
C
D
flowchart TD
A[start] --> B{It's TURE?}
B --Yes--> C[OK]
c --> D[Rethink]
D --> B
B ----> |No| E[End]
Yes
No
start
It's TURE?
OK
Rethink
End
总结：
| Length | 1 | 2 | 3 |
|---|---|---|---|
| 直线 | — | ---- | ----- |
| 箭头 | –> | —> | ----> |
| 粗线 | === | ==== | ===== |
| 粗线箭头 | ===> | ====> | =====> |
| 虚线 | -.- | -…- | -…- |
| 虚线箭头 | -.-> | -…-> | -…-> |
子图
flowchart TB;
c1 --> a2
subgraph A
a1 --> a2
end
subgraph B
b1 --> b2
end
subgraph C
c1 --> c2
end
C
A
c2
c1
B
b2
b1
a2
a1
根据以上代码，子图只需要在子图块添加
subgraph X
code
end
即可
flowchart TD;
subgraph one
a1-->a2
end
c1-->a2
one
a2
a1
c1
试着实现这张图：
three
one
c2
c1
two
b2
b1
a2
a1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iThrl6N6-1647400699141)(D:\Desktop\photo\公众号底图.png)]
添加
subgraph X
code
end
即可
flowchart TD;
subgraph one
a1-->a2
end
c1-->a2
one
a2
a1
c1
试着实现这张图：
three
one
c2
c1
two
b2
b1
a2
a1
[外链图片转存中…(img-iThrl6N6-1647400699141)]