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

流程图

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

方向定义

graph 方向

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

节点定义

代码：

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

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

效果：

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

线段定义

代码：

​```mermaid
graph TB;
A("开始") -.-> B{"判断？"}
B ---|否| C["否：执行逻辑"]
B ==>|是| D["是：执行逻辑"]
​```
  • 如果达不到预期效果，应该是包含特殊字符，对描述文本添加双引号试试
  • 除上述带箭头线段 --> 外，还有带箭头虚线线段 -.->、 带箭头加粗线段 ==>、不带箭头线段 ---

效果：

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 对象显示名
定义类别名

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

消息

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

代码格式：

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

箭头写法：

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

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

代码示例：

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

效果：

sequenceDiagram A -> B: 实线 B --> A: 虚线 A ->> B: 带箭头 A -x B: 末尾带 x

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

激活框

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

激活方式：

  1. 直接激活

    ​ 开始： activate <对象>
    ​ 结束： deactivate <对象>

  2. 符号激活

    ​ +<对象>
    ​ -<对象>

代码示例：

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

效果：

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的中间
​```

效果：

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
​```

效果：

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 : 退卡成功
​```

效果：

sequenceDiagram A ->> + B : 查询余额 B -->> - A: 余额 alt 余额 > 5000 A ->> B : 放心了 else 100 < 余额 < 5000 A ->> B : 买东西了 else 余额 < 100 A ->> B : 绝对不可能 end B -->> A : 退卡成功

可选

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

opt 条件说明
[消息流]
end

代码示例：

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

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

效果：

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 : 明天再学
​```

效果：

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
​```

效果：

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--> 撞击:速度过快
    撞击 --> [*]
​```

效果：

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~
}

​```
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 : 虚线

​```
classDiagram classA <|-- classB : 继承 classC *-- classD : 组合 classE o-- classF : 聚合 classG <-- classH : 关联 classI -- classJ : 实线 classK <.. classL : 依赖 classM <|.. classN : 实现 classO .. classP : 虚线
posted @ 2023-11-06 09:57  喵师傅  阅读(2231)  评论(0)  编辑  收藏  举报