markdown中流程图、时序图、状态图、类图（UML）语法教程

流程图

致谢 https://zhuanlan.zhihu.com/p/69495726

方向定义

graph 方向

TB：从上至下 BT：从下至上 LR：从左至右 RL：从右至左

节点定义

代码：

```mermaid
graph LR
A(圆角矩形)
B[矩形]
C{"判断"}
D((流程连接点))
```

其中A B C D 这些字符代表节点名称（实际应用时应该见名知义），这些名称可以在之后反复利用（相当于定义的变量）

效果：

线段定义

代码：

```mermaid
graph TB;
A("开始") -.-> B{"判断？"}
B ---|否| C["否：执行逻辑"]
B ==>|是| D["是：执行逻辑"]
```

如果达不到预期效果，应该是包含特殊字符，对描述文本添加双引号试试
除上述带箭头线段 --> 外，还有带箭头虚线线段 -.->、带箭头加粗线段 ==>、不带箭头线段 ---

效果：

时序图

示例代码：

```mermaid
sequenceDiagram
participant A as Alice
A->> John: Hello John, how are you?
John-->> A: I'm fine
```

sequenceDiagram：为固定开头

其中可以使用：participant 别名 as 对象显示名
定义类别名

消息

交互时一方对另一方的的操作(比如接口调用)或传递信息。用单向箭头表示：实线代表主动发出消息；虚线代表响应；末尾带「x」表示异步消息，无需等待回应。

代码格式：

<参与者><箭头><参与者>:<描述文本> 。描述文本可以为空，但是: 不能省略。

箭头写法：

其中实线表示请求，虚线表示响应：

-> ：无箭头的实线
-->：无箭头的虚线
->> ：有箭头的实线(主动发出消息)
-->>：有箭头的虚线(响应)
-x：末尾带「x」的实线箭头
--x：末尾带「x」的虚线箭头

代码示例：

```mermaid
sequenceDiagram
A-> B: 实线
B--> A: 虚线
A->>B: 带箭头
A-x B: 末尾带「x」
```

效果：

最后一个带 x 的不知道为什么在博客园里没有显示箭头，但是在编辑器里是有箭头的

激活框

从消息接收方的时间上上标记一小段时间，表示对消息进行处理的时间间隔

激活方式：

直接激活

开始： activate <对象>
结束： deactivate <对象>
符号激活

+<对象>
-<对象>

代码示例：

```mermaid
sequenceDiagram
		A ->> + B : 激活B接着直接激活A
		activate A
		B -->> - A : 结束B
		A ->> B : 请求B
		B -->> A : 结束A
		deactivate A
```

效果：

使用直接激活时：包裹的部分为一段激活框

使用符号激活时：开始和结束的对象要不同（例如：+B 要以 -A 结束）

注释

语法格式：

Note [位置] [对象]： <注释内容>

显示位置：

以被标记的对象中心为参考系，横跨多个时，可以用逗号分割：

right of
left of
over

代码示例：

```mermaid
sequenceDiagram 
note left of A : A的左边
note right of B :  B的右边
note over A,B:  A和B的中间
```

效果：

循环

当条件满足时，重复发出消息序列(相当于while语句)。语法格式如下：

loop 消息说明
[消息流]
end

代码示例：

```mermaid
sequenceDiagram
A  ->> + B : 你是谁
B -->> - A : 不想说

loop  一天7次
A ->> + B: 你是谁
B -->> - A : 就不说
end
```

效果：

选择

在多个条件中做出判断，每个条件对应不同的消息队列(相当于if else 语句)。语法格式如下：

alt 条件说明
  [消息流]
else
  [消息流]
else
  [消息流]
end

代码示例：

```mermaid
sequenceDiagram
		A ->> + B : 查询余额
		B -->> - A: 余额
		
		alt 余额 > 5000 
			A ->> B : 余额 > 5000 
		else 100 < 余额 < 5000
			A ->> B : 100 < 余额 < 5000
		else 余额 < 100 
			A ->> B : 余额 < 100 
		end 
		
		B -->> A : 退卡成功
```

效果：

可选

在满足某条件的时候执行消息序列，否则不执行，相当于单个分支的if语句。语法格式如下:

opt 条件说明
[消息流]
end

代码示例：

```mermaid
sequenceDiagram
A ->> +B : 休假

opt 带薪休假
B -->> -A : 不可能
end 
```

效果：

并行

将消息序列分成多个片段，并行执行。语法格式如下：

par 说明
  [消息流]
and
  [消息流]
and
  ……
end

代码示例：

```mermaid
sequenceDiagram
A ->> B : 学习

par 学习时间
	B ->> B : 喝水
and 
	B ->> B : 用手机看看时间
and 
	B ->> B : 放点音乐
end

B -->> A : 明天再学
```

效果：

背景颜色

语法格式：

rect rgb(191, 222, 233)
[消息流]
end

代码示例：

```mermaid
sequenceDiagram
A ->> +B : 1 + 1 = ?
rect rgb(191, 223, 255)
    B ->> B : 思考一分钟
    B -->> A : 等于3
end
```

效果：

状态图

语法介绍：

定义状态：直接声明id、状态id后接冒号和描述

代码示例：

```mermaid
stateDiagram-v2
    stop: 停止
    move
    [*] --> stop
    stop --> [*]
    stop--> move:推动
    move--> stop:挡住
    move--> 撞击:速度过快
    撞击 --> [*]
```

效果：

类图

可见性：

+ 表示 public
- 表示 private
# 表示 protected
~ 表示 package/internal
* 表示 Abstract
$ 表示 Static
<<Interface>> 表示接口类
<<Abstract>> 表示抽象类
<<Service>> 表示服务类
<<Enumeration>> 表示枚举

方法返回值在括号右边添加；泛型用~号代替尖括号

定义类

```mermaid
classDiagram
class classA {
    <<Abstract>>
    +String name
    -Integer age
    +List~int~ position
    +eat(food) bool $
    +setPoints(List~int~ points)*
    +getPoints() List~int~
}

```

定义关系

主要语法: [classA][Arrow][ClassB]:描述

```mermaid
classDiagram
classA <|-- classB : 继承
classC *-- classD : 组合
classE o-- classF : 聚合
classG <-- classH : 关联
classI -- classJ : 实线
classK <.. classL : 依赖
classM <|.. classN : 实现
classO .. classP : 虚线

```