graph TB
%%">" : 添加尾部箭头
a-->b
%%"-" : 不添加尾部箭头
c---d
%%"--" : 单线
e---f
%%"-- text --" : 单线加文字
g -- hello --> h
%%"==" : 粗线
i==>j
%%"== text ==" : 粗线加文字
k == baby ==> l
%%"-.-" : 虚线
m-.->n
%%"-. text .-" : 虚线加文字
o -. come on .-> p
图表方向
定义:
用词
含义
TB|TD
从上到下
BT
从下到上
LR
从左到右
RL
从右到左
举例:
graph TD
%%子图
subgraph 从上到下
%%方向
direction TB
a-->b
end
subgraph 从下到上
direction BT
c-->d
end
subgraph 从左到右
direction LR
e-->f
end
subgraph 从右到左
direction RL
g-->h
end
流程图
flowchart LR
A[用户] -->|登录| B(系统)
B --> C{验证token}
C -->|通过| D[下一步]
C -->|不通过| E[报错]
时序图
sequenceDiagram
actor User as 用户
User->>Alice: How are you?
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Alice-->>User: Fine
sequenceDiagram
actor User as 用户
participant Editor as 编辑器
participant _ViewContext as @视图上下文
participant View as 视图
participant _EditorContext as @编辑器上下文
Editor->>_ViewContext: 监听事件
User->>View:<点击>
View->>View:获取匹配对象()
Note right of View: 对象ID
View->>_ViewContext:处理点击(对象ID)
_ViewContext-->>Editor:点击事件(对象ID)
alt CTRL未按下
Editor->>_EditorContext:设置选中集合([对象ID])
else CTRL按下
Editor->>_EditorContext:添加选中(对象ID)
else 对象ID已被选中
Editor->>_EditorContext:移除选中(对象ID)
end
_EditorContext->>_EditorContext:更新选中集合
Note right of _EditorContext: 选中集合
Note right of _EditorContext: 激活对象
甘特图
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
类图
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
状态图
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]