mermaid简单流程图
-
mermaid是一种画流图的方便的工具,使用简单的语法,就可以渲染出相关的流图,对于小型图很友好 - 在markdown中也有所应用
mermaid_starter使用入门
- 不同图型的语法不同/效果不同
- 在同一段mermaid代码在图型(A)中是有效且正确的,
- 但是在图型(B)中可能就是另一种意思,甚至直接导致渲染失败
flowchart LR
id1((This is the text in the circle))
This is the text in the circle
flowchart TB
y<--P-->x[x]
y(y)<--Q-->z[z]
z<--R-->x
P
Q
R
y
x
z
不稳定性
引擎版本
由于引擎版本不同,同样的代码效果可能不同
flowchart LR
a---b & d
b---c & e
c---b
c---d
c---e
a
b
d
c
e
绘制方向(TB/LR)
flowchart TB
a---b & d
b---c & e
c---b
c---d
c---e
a
b
d
c
e
端点调换
flowchart LR
a---b & d
b---c & e
c---b
c---d
e---c
a
b
d
c
e
改善线条
- 拉长边/上下行调换
flowchart LR
a---b & d
c----d & e
b---c & e
a
b
d
c
e
flowchart LR
a---b & d
c---d & e
b---c & e
a
b
d
c
e
子图
例子1
flowchart LR
subgraph
M[主机]
end
M<==>IO[I/O接口]<==>dc
subgraph IO设备
dc[设备控制器]-->机,电,磁,光部件
end
- IO设备
机,电,磁,光部件
设备控制器
主机
I/O接口
例字2
- three
one
Yes
No
c2
c1
two
b2
b1
a2
a1
Start
Is it?
OK
Rethink
End
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
%%flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
例子3
- three
one
c2
c1
two
b2
b1
a2
a1
flowchart LR
c1-->a2
%%子图1
subgraph one
a1--->a2
end
%%子图2
subgraph two
b1-->b2
end
%%子图3
subgraph three
c1--->c2
end
%%组织子图之间的关系
one---> two
three--> two
two--> c2
🎈ref of mermaid
- mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. (mermaid-js.github.io) 支持一下类型的图型,各有个的语法
- Flowchart
- Sequence diagram
- Class Diagram
- State Diagram
- Entity Relationship Diagram
- User Journey
- Gantt
- Pie Chart
- Requirement Diagram
- Gitgraph (Git) Diagram 🔥
- Other Examples
