Markdown mermaid usage
ER图 #
|o o| 0或1
|| || 恰好一个
}o o{ 0 或 更多 (没有上限)
}| |{ 1 或 更多 (没有上限)
erDiagram
Equipment ||--|| EquipmentModel : has
Equipment ||--|{ EquipmentStatusChangeRecord : has
Warning }o--|| Equipment : relate
Warning ||--o| Ticket : relate
Ticket ||--|{ TicketHistory : has
Ticket ||--|| TicketType : has
Ticket ||--|| User : has
TicketHistory ||--o| Transaction : relate
Ticket }o--|| Equipment : relate
TicketHistory ||--|| User : has
TicketHistory ||--|| EquipmentStatusChangeRecord : trigger
Equipment {
uuid ID
string name "名称"
date createAt "创建时间"
date updateAt "更新时间"
int status "状态"
}
EquipmentModel {
uuid ID
string name "名称"
date createAt "创建时间"
date updateAt "更新时间"
string comment "备注"
}
EquipmentStatusChangeRecord {
uuid ID
uuid EquipmentID "设备ID 非空"
int statusA "原状态"
int statusB "新状态"
date changeAt "触发时间"
}
Ticket {
uuid ID
string name "名称"
date createAt "创建时间"
date updateAt "更新时间"
int status "状态"
}
TicketHistory {
uuid ID
uuid ticketID "工单ID 非空"
int statusA "原状态"
int statusB "新状态"
}
TicketType {
uuid ID
string name "名称"
}
Warning {
uuid ID
string type "类型"
date createAt "创建时间"
date updateAt "更新时间"
int status "状态"
}
erDiagram Equipment ||--|| EquipmentModel : has Equipment ||--|{ EquipmentStatusChangeRecord : has Warning }o--|| Equipment : relate Warning ||--o| Ticket : relate Ticket ||--|{ TicketHistory : has Ticket ||--|| TicketType : has Ticket ||--|| User : has TicketHistory ||--o| Transaction : relate Ticket }o--|| Equipment : relate TicketHistory ||--|| User : has TicketHistory ||--|| EquipmentStatusChangeRecord : trigger Equipment { uuid ID string name "名称" date createAt "创建时间" date updateAt "更新时间" int status "状态" } EquipmentModel { uuid ID string name "名称" date createAt "创建时间" date updateAt "更新时间" string comment "备注" } EquipmentStatusChangeRecord { uuid ID uuid EquipmentID "设备ID 非空" int statusA "原状态" int statusB "新状态" date changeAt "触发时间" } Ticket { uuid ID string name "名称" date createAt "创建时间" date updateAt "更新时间" int status "状态" } TicketHistory { uuid ID uuid ticketID "工单ID 非空" int statusA "原状态" int statusB "新状态" } TicketType { uuid ID string name "名称" } Warning { uuid ID string type "类型" date createAt "创建时间" date updateAt "更新时间" int status "状态" }
定义流程图方向 #
可设置4个方向:
- TD - top-down,从上到下。或者使用TB(top to bottom)
- BT - bottom to top,从下到上
- RL - right to left,从右到左
- LR - left to right,从左到右
flowchart TD
A --> B
flowchart TD A --> B
flowchart LR
A --> B
flowchart LR A --> B
节点形状 #
默认节点形状为长方形,也可以设置为其它形状。
flowchart LR
A(圆角矩形) -.- B([椭圆形]) -.- C((圆形)) -.- D[(圆柱形)]
Espan>subroutine] -.- G{菱形} -.- H{{六角形}}
I[/平行四边形/] -.- J[\平行四边形\] -.- K[\梯形/] -.- L[/梯形\]
flowchart LR A(圆角矩形) -.- B([椭圆形]) -.- C((圆形)) -.- D[(圆柱形)] E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}} I[/平行四边形/] -.- J[\平行四边形\] -.- K[\梯形/] -.- L[/梯形\]
多节点连接 #
flowchart LR
A --> B & C--> D
flowchart LR A --> B & C--> D
flowchart TD
A & B--> C & D
flowchart TD A & B--> C & D
flowchart TD
A --> C
A --> D
B --> C
B --> D
flowchart TD A --> C A --> D B --> C B --> D
可通过增加短横线来增加连线长度。
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End]
虚线或粗连线,可增加等号或点来延长连线:
Length | 1 | 2 | 3 |
---|---|---|---|
连线 | --- |
---- |
----- |
箭头 | --> |
---> |
----> |
加粗连线 | === |
==== |
===== |
加粗箭头 | ==> |
===> |
====> |
虚线 | -.- |
-..- |
-...- |
虚线箭头 | -.-> |
-..-> |
-...-> |
其它类型箭头 #
flowchart LR
A --o B
B --x C
flowchart LR A --o B B --x C
flowchart LR
A o--o B
B <--> C
C x--x D
flowchart LR A o--o B B <--> C C x--x D
流程图 #
flowchart LR```
subgraph receiver1[Receiver I]
gnet --> verify --> dispatcher1[dispatcher] --> sender
dispatcher1 --> cache1[cache] --> websocket1[websocket]
end
subgraph receiver2[Receiver II]
sync --> dispatcher3[dispatcher] --> grpc[grpc client]
dispatcher3 --> cache3[cache] --> websocket3[websocket]
kvcache --> websocket3
end
hardware & simulator --TCP--> gnet
sender -.-> sync
grpc --gRPC--> storage
websocket1 --> client1[websocket client]
websocket3 --> client3[websocket client]
```
flowchart LR subgraph receiver1[Receiver I] gnet --> verify --> dispatcher1[dispatcher] --> sender dispatcher1 --> cache1[cache] --> websocket1[websocket] end subgraph receiver2[Receiver II] sync --> dispatcher3[dispatcher] --> grpc[grpc client] dispatcher3 --> cache3[cache] --> websocket3[websocket] kvcache --> websocket3 end hardware & simulator --TCP--> gnet sender -.-> sync grpc --gRPC--> storage websocket1 --> client1[websocket client] websocket3 --> client3[websocket client]
饼图 #
Mermaid可以用来渲染饼图:
pie title 标题
"Dogs" : 38
"Cats" : 85
"Rats" : 15
pie title 标题 "Dogs" : 38 "Cats" : 85 "Rats" : 15
左侧值 | 右侧值 | 含义 |
---|---|---|
|o | o| | 0或1 |
| | | | 恰好一个 |
}o | o{ | 0 或 更多 (没有上限) |
}| | |{ | 1 或 更多 (没有上限) |
别名 |
左侧值 | 右侧值 | Alias for |
---|---|---|
one or zero | one or zero | 0或1 |
zero or one | zero or one | 0或1 |
one or more | one or more | 1 或 更多 |
one or many | one or many | 1 或 更多 |
many(1) | many(1) | 1 或 更多 |
1+ | 1+ | 1 或 更多 |
zero or more | zero or more | 0 或 更多 |
zero or many | zero or many | 0 或 更多 |
many(0) | many(1) | 0 或 更多 |
0+ | 0+ | 0 或 更多 |
only one | only one | 恰好一个 |
1 | 1 | 恰好一个 |
类图 #
Mermaid也支持类图
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
状态图 #
Mermaid状态图语法和plantUml一样。
stateDiagram-v2
state "状态1" as State1
State2 : 状态2
[*] --> State1
State1 --> State2: 过渡文本
State2 --> State1
State2 --> State3
state State3 {
[*] --> second
second --> [*]
}
stateDiagram-v2 state "状态1" as State1 State2 : 状态2 [*] --> State1 State1 --> State2: 过渡文本 State2 --> State1 State2 --> State3 state State3 { [*] --> second second --> [*] }
甘特图 #
甘特图例子:
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 项目
A 项目 :A1, 2022-01-01, 30d
B 项目 :after A1 , 20d
section 子任务
子任务1 :2022-01-12 , 12d
子任务2 : 24d
gantt title 甘特图 dateFormat YYYY-MM-DD section 项目 A 项目 :A1, 2022-01-01, 30d B 项目 :after A1 , 20d section 子任务 子任务1 :2022-01-12 , 12d 子任务2 : 24d
时序图 #
安装设备
sequenceDiagram
participant L as 项目管理
participant O as 实施人员
L->>O: 创建安装工单
Note right of O: 工单的负责人为实施人员
O->>O: 执行安装工单
Note right of O: 设备状态变为安装中
alt 完成安装
O->>O: 完成安装工单
Note right of O: 设备状态变为运行
else
O->>O: 废弃安装工单
Note right of O: 设备状态变为已采购
end
sequenceDiagram participant L as 项目管理 participant O as 实施人员 L->>O: 创建安装工单 Note right of O: 工单的负责人为实施人员 O->>O: 执行安装工单 Note right of O: 设备状态变为安装中 alt 完成安装 O->>O: 完成安装工单 Note right of O: 设备状态变为运行 else O->>O: 废弃安装工单 Note right of O: 设备状态变为已采购 end
触发预警与维护设备
sequenceDiagram
participant S as 平台
participant M as 监控人员
participant F as 检修人员
opt 平台发现情况
S->>M: 创建预警
Note right of S: 如果设备已有同类型的非关闭的预警,则更新已有预警
end
M->>F: 创建维护工单
Note right of M: 工单的负责人为检修人员
F->>F: 执行维护工单
Note right of F: 设备状态变为检修
alt 维护完毕
F->>F: 执行维护工单
Note right of F: 设备状态变为运行
else 无法维护
F->>F: 执行维护工单
Note right of F: 设备状态变为废弃
end
sequenceDiagram participant S as 平台 participant M as 监控人员 participant F as 检修人员 opt 平台发现情况 S->>M: 创建预警 Note right of S: 如果设备已有同类型的非关闭的预警,则更新已有预警 end M->>F: 创建维护工单 Note right of M: 工单的负责人为检修人员 F->>F: 执行维护工单 Note right of F: 设备状态变为检修 alt 维护完毕 F->>F: 执行维护工单 Note right of F: 设备状态变为运行 else 无法维护 F->>F: 执行维护工单 Note right of F: 设备状态变为废弃 end
特殊字符 #
如果文本中有字符可以用双引号:
flowchart LR
A["括号 (text)"]
flowchart LR A["括号 (text)"]
括号 (text)
flowchart LR
A["括号 [text]"]
flowchart LR A["括号 [text]"]
如果文本中要使用双引号或者其它更多特殊字符,可以使用HTML 实体来表示:
flowchart LR
A["引号#quot;"]
flowchart LR A["引号#quot;"]
引号"
flowchart LR
A["美元符号#36;"]
flowchart LR A["美元符号#36;"]
美元符号$
flowchart LR
A["笑脸#128512;"]
flowchart LR A["笑脸#128512;"]