一文学会在Markdown中画UML图
背景
在编程和需求分析中，图形化的展示确实能够帮助更好地理解系统的逻辑和结构。使用 Mermaid 在 Markdown 中绘制图形是一个非常方便的方式。下面，我将通过六个不同的图类型来演示如何在 Markdown 中使用 Mermaid，请先在vscode安装Markdown All in One插件。
图形
- 流程图
- 时序图
- 类图
- 状态图
- Git 图
- 思维导图
1. 流程图
1. 流程图方向命令
- TB：从上到下
- BT：从下到上
- LR：从左到右
- RL：从右到左
2. 流程图节点命令
| 名称 | 代码 | 含义 |
|---|---|---|
| 圆角矩形 | (圆角矩形) | 表示起点、终点或注重循环的元素 |
| 矩形 | [矩形] | 表示流程中节点 |
| 菱形 | {菱形} | 表示判断、决策 |
| 跑道形 | ({跑道形}) | 表示直线路径、流程中的步骤 |
| 圆柱形 | [(圆柱形)] | 表示过程、操作 |
| 圆形 | ((圆形)) | 表示连接 |
| 六角形 | {{六角形}} | 表示起点、终点或注重循环的元素 |
| 非对称形 | >非对称形] | 用于表示不对称的元素 |
| 正向梯形 | [/正向梯形] | 表示正向梯形节点 |
| 反向梯形 | [\反向梯形/] | 表示反向梯形节点 |
| 右倾平行四边形 | [/右倾平行四边形/] | 表示输入输出 |
| 左倾平行四边形 | [/左倾平行四边形/] | 表示输入输出 |
| 子程序节点 | [[子程序节点]] | 表示子程序节点 |
| 双重圆形 | (((双重圆形))) | 表示双重圆形 |
节点命令代码及效果：
---
title: 示例
---
graph TB
A(圆角矩形)
B[矩形]
C{菱形}
D([跑道形])
E[(圆柱形)]
F((流程连接点))
J{{六角形}}
---
title: 示例
---
graph TB
A>非对称形]
B[/正向梯形\]
C[\反向梯形/]
D[/右倾平行四边形/]
E[/左倾平行四边形/]
F[[子程序节点]]
G(((双重圆形)))
3. 流程图连线命令
| 名称 | 代码 | 含义 |
|---|---|---|
| 有箭头 | -->、-.->、-.描述.-> |
有箭头指数据流方向 |
| 无箭头 | ---、--描述---、-.-、-.描述.- |
无箭头仅表示相关性 |
| 实线 | ---、--描述--、===、==加粗直线== |
实线强关联 |
| 虚线 | -.-、-.描述.-、-...- |
虚线弱关联 |
带文字连接线，两种注释方法：
- 写在中间，类似
--文字-->，等于重复连接，前半部分是上一个图形到文字，后半部分是文字到图形。 - 写在尾部，符号||，只在尾部连接符号即可，像这样
-->|文字|。
graph LR
A(圆角矩形)--实线箭头-->B[矩形]
B[矩形]-.虚线箭头.->C{菱形}
C{菱形}==加粗箭头直线==>D((连接A))
D((连接A))--直实线---E(圆角矩形)
graph LR
A(圆角矩形)-->|实线箭头|B[矩形]
B[矩形]-.->|虚线箭头|C{菱形}
C{菱形}==>|加粗箭头直线|D((连接A))
D((连接A))---|直实线|E(圆角矩形)
多个连接关系：
graph LR
A --文字--> B --文字--> C
多个节点连接:
graph LR
a --> b & c--> d
多依赖关系：
graph TB
A & B--> C & D
视图分组：
graph TB;
subgraph 后端
前端请求 --> B[后端服务]
end
subgraph 用户
操作 -->A[前端]
end
多子图流转:
graph TB
subgraph A
a1-->a2
end
subgraph B
b1-->b2
end
subgraph C
c1-->c2
end
c1-->a2
A --> B
C --> B
B --> c2
子图方向：
graph LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
多组合流程：
|
|
graph TD
subgraph 用户
用户操作 --> A[前端应用]
end
subgraph 服务端
A --> B[负载均衡]
B -->|请求| C[服务1]
B -->|请求| D[服务2]
B -->|请求| E[服务3]
end
subgraph 数据存储
C -->|读写| F[数据库1]
D -->|读写| G[数据库2]
E -->|读写| H[数据库3]
end
subgraph 消息队列
C -->|异步通信| I[消息队列1]
D -->|异步通信| I
E -->|异步通信| I
end
2. 时序图
时序图以时间为主线，是有生命线的动态视图，它显示了各个进程之间是如何运作的，以及他们的运行顺序。
1. 顺序图四要素
| 名称 | 含义 |
|---|---|
| 对象 | 类的实例 |
| 生命线 | 生命线是一条垂直的虚线 |
| 消息 | 对象之间传递消息，从一个对象生命线到另一个对象生命线 |
| 激活 | 既控制焦点，窄的矩形表示，表示对象在生命线某段时期执行的操作 |
2. 时序图连接样式
| 名称 | 代码 | 含义 |
|---|---|---|
| 同步调用 | ->> |
发出消息卡住不动等待返回再继续执行 |
| 同步返回 | -->> |
同步返回 |
| 异步调用 | -) |
异步调用，发出消息继续执行，不用等待返回 |
| 异步返回 | --) |
异步返回 |
| 同步返回 | -x |
对象已销毁 |
| 异步返回 | --x |
对象已销毁 |
3. 时序图消息格式
[对象1] [箭头类型] [对象2] : 消息内容
4. 对象两种表示小人/矩形
sequenceDiagram
%%这行是注释
actor A as 学生
participant school B as 学校
5. 对象别名
sequenceDiagram
%%这行是注释
participant A as 学生
participant B as 老师
6. 激活对象
sequenceDiagram
actor A as 学生
actor B as 老师
A->>B: 录入系统
activate B
B-->>A: 更新信息
deactivate B
7. 也可以用+/-号激活对象
sequenceDiagram
actor A as 学生
actor B as 老师
A-)+B: 录入系统
B--)-A: 更新信息
8. 添加备注
语法Note [right of | left of | over][对象]:备注
sequenceDiagram
participant John
Note left of John: Text in note
9. 跨越两个对象的备注
sequenceDiagram
Alice->>John:Hello John, how are you?
Note over Alice,John:A typical interaction
10. 循环
loop 循环条件
... statements...
end
sequenceDiagram
Alice->>John: Hello!
loop Reply every minute
John-->>Alice:Great!
end
11. 选择ALT
推荐在没有else情况下使用opt
alt/opt 选择描述
...statements...
else
...statements...
end
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob-->>Alice:not so good :(
else is well
Bob-->>Alice:Feeling fresh like a daisy:)
end
opt Extra response
Bob-->>Alice:Thanks for asking
end
汇总示例：
|
|
sequenceDiagram
participant 张 as 张三（参与者）
participant 李 as 李四（参与者）
participant 王 as 王五（参与者）
张 ->> +李: 你好！李四, 最近怎么样?
李 ->> 王: 你最近怎么样，王五？
李--x -张: 我很好，谢谢!
activate 王
李-x 王: 我很好，谢谢!
Note over 李,王: 李四想了很长时间, 文字太长了<br/>不适合放在一行.
deactivate 王
loop 李四再想想
李->>王: 我还要想想
王-->>李: 想想吧
end
李--)张: 打量着王五...
张->>王: 很好... 王五, 你怎么样?
3. 类图
1. 类之间的关系
| 序号 | 关系 | 符号 | 含义 |
|---|---|---|---|
| 1 | 继承（泛化） | <|– | 继承关系，既一般与特殊的关系， |
| 2 | 组合 | *– | 整体与部分的关系，且部分不能离开整体而存活，属于关联一种，属于强强关联 |
| 3 | 聚合 | o– | 整体与部分的关系，且部分可以离开整体而单独存活，属于关联一种，属于强关联 |
| 4 | 关联 | <– | 一种拥有关系，它使一个类知道另一个类的属性和方法 |
| 5 | 连接(Solid) | – | 实线连接 |
| 6 | 依赖 | <.. | 是一种使用关系，一个类的实现需要另一个类的协助，不要双向依赖 |
| 7 | 实现 | <|.. | 类与接口的关系，类是接口所有特征和行为的实现 |
| 8 | 连接(Dashed) | .. | 虚线连接 |
classDiagram
classA <|-- classB:继承
classC *-- classD:组合
classE o-- classF:聚合
classG <-- classH:关联
classI -- classJ:连接(Solid)
classK <.. classL:依赖
classM <|.. classN:实现
classO .. classP:连接(Dashed)
2. 类定义成员
属性：直接写属性名称，方法：方法名称后加()
| 权限符号 | 权限级别 |
|---|---|
| + | Public |
| - | Private |
| # | Protected |
| ~ | Package/Internal |
*表示抽象方法：someAbstractMethod()*
$静态方法：someStaticMethod()$
$静态变量：String someField$
~表示泛型：像List<int>使用~ ~来表示< >,List~int~
«Interface» 表示 接口类
«Abstract» 表示 抽象类
«Service» 表示 服务类
«Enumeration» 表示 枚举
类成员定义1：
classDiagram
class Person
Person: +String name
Person: +int age
Person: +work(time) bool
Person: +study(time) int
类成员定义2:
classDiagram
class Person{
+String name
+int age
+work(time) bool
+study(time) int
}
泛型表示：
classDiagram
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : +List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
Square : +getDistanceMatrix() List~List~int~~
方法返回类型，在方法后+空格+返回类型
3. 多重性
多重性（Multiplicity）是用来表示类与类之间的关系中，每个类的实例可以关联多少个另一个类的实例。它定义了一个对象与另一个对象之间的数量关系。多重性通常使用数字或符号表示，放在类之间的关联线的两端。
| 符号 | 含义 |
|---|---|
1 |
精确地表示一个实例。例如，一个员工有且只有一个身份证 |
0..1 |
表示一个实例可以有零个或一个关联的实例。例如，一个人可能有或没有驾驶执照 |
*或0..* |
表示一个实例可以有零个或多个关联。例如，一个教师可以教零个或多个学生 |
1..* |
表示一个实例至少有1个或多个关联实例。例如，一个部门至少有一个或多个员工 |
| 特点范围 | 例如 2..4，表示一个实例可以有2到4个关联的实例 |
classDiagram
Member "1"-->"1" IDCard
Person "1" -->"0..1" DriveCard
Teacher "1" -->"0..*" Student
Department "1" --> "1..*" Employee
汇总效果：
|
|
classDiagram
动物 ..< 水
动物 ..< 氧气
动物 <|-- 鸟
鸟 <|-- 老鹰
鸟 <|-- 白鹭
鸟 <|-- 天鹅
鸟 "1"*-->"2" 翅膀
天鹅群"1"o-->"n"天鹅
天鹅..|>飞翔
白鹭"1"-->"1"气候
动物: + 生命
动物: + 性别
动物: +新陈代谢(int 氧气,int 水)
动物: +繁衍后代()
飞翔: +飞()
class 鸟{
+羽毛
+进食()
+下蛋()
}
class 老鹰{
-鹰眼视力
-抓田鼠()
-下蛋()
}
class 白鹭{
+野生自然
+捕鱼()
+下蛋()
}
class 天鹅{
+黑色与白色
+捕鱼()
+下蛋()
}
4. 状态图
对象的所有可能状态以及由于各种事件的发生而引起的状态之间的转换。
构成状态图的要素：
| 要素名称 | 含义 | 符号 |
|---|---|---|
| 状态 | 状态是对象执行了一系列活动的结果 | state |
| 转移 | 某条件发生对象由第一状态进入第二状态 | –> |
| 事件 | 使状态发生变化的某时刻发生的动作或活动 | [*] 表示状态图的开始和结束 |
| 判断 | 判断点通过对事件判断，分组转移到各自方向 | «choice» |
| 同步 | 工作流的分叉与联合 | «fork»和«join» |
表示判断：
stateDiagram-v2
state if_state <<choice>>
[*] --> 下班
下班 --> if_state
if_state --> 打球: 还有体力
if_state --> 回家睡觉 : 太累了
表示同步 ：
stateDiagram
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State1
fork_state --> State2
state join_state <<join>>
State1 --> join_state
State2 --> join_state
join_state --> State3
State3 --> [*]
5. Git 图
|
|
---
title: 示例
---
gitGraph
commit id: "Initial Commit"
branch featureA
checkout featureA
commit id: "Feature A Commit 1"
commit id: "Feature A Commit 2"
checkout main
branch featureB
checkout featureB
commit id: "Feature B Commit 1"
commit id: "Feature B Commit 2"
checkout main
merge featureA
commit id: "Merge Feature A into Main"
merge featureB
commit id: "Merge Feature B into Main"
commit id: "Resolve Merge Conflict"
6. 思维导图
导图的排版是根据文字对齐安排的
mindmap
root((学校))
校园
校园位置
校园花园
未明湖花园
教室
自媒体教师
自习室
运动场
篮球场
足球场
总结
如果你是一位用MarkDown写作的重度患者，相信本篇文章对你一定有用，请收藏起来吧，方便查询语法。