布局方向
流程图布局方向,由四种基本方向组成,分别是英文单词: top
(上), bottom
(下),left
(左)和 right
(右).其中可选值: TB
(从上到下),BT
(从下到上),LR
(从左往右)和 RL
(从右往左)四种.
核心: 仅支持上下左右四个垂直方向,是英文单词首字母大写缩写.
+ TB 从上到下: from Top to Bottom
+ BT 从下到上: from **B**ottom to **T**op
+ LR 从左往右: from **L**eft to **R**ight
+ RL 从右往左: from **R**ight to **L**eft
形状
流程图节点形状,默认支持矩形和圆两种基本形状,包括基本形状的简单变体,支持嵌套组合形式,其中 [] 表示矩形,() 表示圆弧,{} 表示尖角(窃以为 <> 更适合)等等.
-
节点形状
- [矩形]
- [[暂不支持]]
- [(圆柱)]
- [{暂不支持}]
- [/平行四边形/]
- [\平行四边形]
- [/梯形]
- [\梯形/]
- (圆角矩形)
- ((圆形))
- ([体育场])
- ({暂不支持})
- {菱形}
- {{六边形}}
- {[暂不支持]}
- {(暂不支持)}
-
不对称矩形
- [矩形]
-
矩形
graph TD
1[矩形]
- 圆角
graph TD
1(dddd)
- 体育场
一般格式:
([node description])
,()
小括号嵌套[]
中括号表示节点是大弧度的圆角矩形形状,也就是体育场形状,node description
是节点的描述文本.
graph TD
1([体育场])
- 圆形
flowchart LR
id1((这是一个圆圈))
连接线
+ 实线/虚线
- --
- -.
+ 有箭头/无箭头
- >
- -
+ 有描述/无描述
- 实线
+ --描述文字
+ |描述文字|
- 虚线
+ -.描述文字
+ |描述文字|
+ 加粗
- ==
+ 组合形式
- -->
- ---
- -.->
- -.-
- 有描述实线有箭头
+ --描述文字-->
+ -->|描述文字|
- 有描述实线无箭头
+ --描述文字---
+ ---|描述文字|
- 有描述虚线有箭头
+ -.描述文字-.->
+ -.->|描述文字|
- 有描述虚线无箭头
+ -.描述文字-.-
+ -.-|描述文字|
- ==>
- ===
- 有描述加粗实线有箭头(2)
+ ==描述文字==>
+ ==>|描述文字|
- 有描述加粗实线无箭头(2)
+ ==描述文字===
+ ===|描述文字|
经典案例
案例1:竖向图
源码:
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
效果:
graph TD
A[圣诞节] -->|赚钱| B(购物)
B --> C{思考买什么}
C -->|第1种选择| D[手提电脑]
C -->|第2种选择| E[手机]
C -->|第3种选择| F[车子]
案例2:横向图
源码:
graph LR
A(接口请求) --> B[参数校验]
B[参数校验] --> C{校验通过?}
C{校验通过?} -- 通过 --> d[处理业务逻辑]
C{校验不通过} -- 不通过 --> e[结束]
d[处理业务逻辑] --> e(结束)
效果
graph LR
A(接口请求) --> B[参数校验]
B[参数校验] --> C{校验通过?}
C{校验通过?} -- 通过 --> d[处理业务逻辑]
C{校验不通过} -- 不通过 --> e[结束]
d[处理业务逻辑] --> e(结束)
案例3:时序图
源码:
sequenceDiagram
A-->A: 文本1
loop 循环1
loop 循环2
A->B: 文本3
end
loop 循环3
B -->>A: 文本4
end
end
效果:
sequenceDiagram
A-->A: 文本1
loop 循环1
loop 循环2
A->B: 文本3
end
loop 循环3
B -->>A: 文本4
end
end
参考资料
ob地址:笔记
推荐文章
- 2.2.20250803 mermaid (1.000)
- 8.1.20250803 WordPress插件与Mermaid可视化 (1.000)
- 8.1.42 牧神记42集:国师阴谋与太后千机毒的救治流程 (1.000)
- 8.1.20250803 投资原则:买好企业,长期收益 (1.000)
- 1.0.20250803 行业-知识管理工具 (0.500)
- 3.2.20250706 凡人修仙传-银月狼族 (RANDOM - 0.500)