mermaid绘制流程图Typora大全

meimaid绘制流程图

平时撰写公众号、知乎、CSDN等使用Typora

Typora是一款Markdown编辑器，支持meimaid，十分方便

下面来学一下流程图语法：

首先要有以下格式

```mermaid

召唤mermaid编辑栏

开始写代码

节点文本框

graph LR;
id

或者：

flowchart LR;
id1[这是一个文本框]

流程图之间用箭头就可以实现了，很简单：

graph TD;
节点1-->节点2

相信你已经明白了，上面代码TD代表Top to Down由上至下。LR代表Left to Right由左至右

graph RL;
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])

graph LR
node([[文本框形状2]])

graph LR;
node[(数据库)]

还有其他类型，不再一一展示，需要自取：

node((circle))-->node1>flow]-->node2{box}-->node3{{flow1}}
-->node4[/parallelogram/]-->node5[\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

或者简单的变色

graph LR;
A:::class1 --> B
classDef class1 fill:#f96;

连接线文字

graph LR
A --- B

在连接线上添加文字：

graph LR
A -- This is the text! -- B

graph LR
A---|new text|B

graph LR;
A -- text --> B

其它类型的箭头：

graph LR;

A-.->B

graph LR;
A-.添加文字.->B

graph LR;
A == 文字 ==> B

连接线样式

flowchart LR;
A --o B
B --x C

flowchart LR
A o--o B
B <--> C
C x--x D

日常综合流程图

graph TD;
A -- text --> B --text1 -->C

graph LR;
a --> b & c --> d
或者
graph LR;
a --> b; a --> c; c --> d; b --> d

graph TB;
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]

总结：

Length	1	2	3
直线	—	----	-----
箭头	–>	—>	---->
粗线	===	====	=====
粗线箭头	===>	====>	=====>
虚线	-.-	-…-	-…-
虚线箭头	-.->	-…->	-…->

子图

flowchart TB;
c1 --> a2
subgraph A
a1 --> a2
end
subgraph B
b1 --> b2
end
subgraph C
c1 --> c2
end

根据以上代码，子图只需要在子图块添加

subgraph X

code

end

即可

flowchart TD;
subgraph one
a1-->a2
end
c1-->a2

试着实现这张图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I2GSIK1c-1647434412796)(D:\Desktop\photo\公众号底图.png)]
添加

subgraph X

code

end

即可

flowchart TD;
subgraph one
a1-->a2
end
c1-->a2

试着实现这张图：