时序图 on Liangweidong's blog

UML 建模（用例图/时序图/协作图/三种模型）

Thu, 04 Jun 2026 00:00:00 +0000

UML 建模（用例图 / 时序图 / 协作图 / 三种模型）

系统架构师考试 | UML 建模专题对应 2021 年下半年案例分析试题二阅读时长：约 12 分钟

前言

UML（Unified Modeling Language，统一建模语言）是面向对象分析和设计的事实标准。系统架构师考试中，UML 主要考"看图填空"——给定一张图，让你填参与者、用例、对象、消息等。本篇系统梳理高频 UML 图：用例图、时序图、协作图，以及面向对象的三种模型（对象模型 / 动态模型 / 功能模型）。

一、用例图（Use Case Diagram）

用途：描述系统的功能边界——谁用系统、能做什么。

1.1 元素构成

元素	图形	说明
参与者（Actor）	火柴人	系统外部的交互方（人、外部系统、定时器）
用例（Use Case）	椭圆	系统提供的一个完整功能
系统边界	矩形	框定系统范围，参与者在外、用例在内
关联	实线	参与者与用例之间的连线
包含（include）	虚线 + `<<include>>`	A 包含 B（B 是 A 的一部分，必执行）
扩展（extend）	虚线 + `<<extend>>`	A 扩展 B（B 在特定条件下触发）
泛化（generalization）	实线 + 空心三角	用例或参与者之间的继承关系

1.2 答题套路

识别参与者——题目里"谁"用这个系统？通常是 2-3 个角色
识别用例——题目里"做什么"？每个动词短语 = 一个用例
区分主用例 vs 辅助用例——包含/扩展关系
画图时参与者放两侧，用例放中间

1.3 实战：预约挂号系统（2021 真题）

参与者：(1) 患者 / (2) 医院管理员
患者侧用例（6 个）：注册登录、信息浏览、账号管理、预约挂号、查询与取消预约、报告查询
管理员侧用例（4 个）：号源管理、预约管理、报表管理、信用管理

技巧：左侧用例往往来自"前台操作"（面向 C 端用户），右侧用例来自"后台管理"（面向 B 端运维）。

二、时序图（Sequence Diagram）

用途：描述对象之间消息的时间顺序——谁先调用谁、调用什么、返回什么。

2.1 元素构成

元素	图形	说明
对象	顶部矩形	写 `对象名:类名`
生命线	垂直虚线	从对象向下延伸
激活条	细长矩形	表示对象正在执行
同步消息	实线 + 实心三角箭头	必须等返回才继续
异步消息	实线 + 空心箭头	不等返回就继续
返回消息	虚线 + 空心箭头	方法返回值
自调用	回路箭头	对象调用自身方法

2.2 答题套路

识别对象——题干里所有"实体"（界面、数据库访问类、表、控制器）
识别消息——动词 = 消息名（“发起请求”/“加载数据”/“返回结果”）
时间顺序：消息从上到下排列
实参/返回值标注在消息名附近

2.3 实战：预约挂号流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


预约人员 -> 预约界面 : 发起预约挂号请求
预约界面 -> 数据库访问类 : 获取医生信息
数据库访问类 -> 医生列表 : 加载医生信息
医生列表 -> 医生出诊时段表 : 加载医生出诊时段
医生出诊时段表 --> 预约界面 : 返回医生可预约时段
预约界面 --> 预约人员 : 显示医生可预约时段
预约人员 -> 预约界面 : 选择医生/就诊时间确认预约
预约界面 -> 数据库访问类 : 写入预约信息
数据库访问类 --> 预约界面 : 返回预约结果
预约界面 --> 预约人员 : 显示预约结果

三、协作图（Communication Diagram）

用途：与时序图等价，但强调对象之间的链接结构而非时间顺序。

3.1 元素构成

对象：矩形
链接：对象之间的实线（表示它们之间有消息往来）
消息：链接上的带序号的箭头（1、1.1、1.2、2、2.1…）
消息顺序：通过嵌套编号表达

3.2 时序图 vs 协作图（核心区别，必考）

维度	时序图（Sequence Diagram）	协作图（Communication Diagram）
强调重点	消息的时间顺序	对象之间的链接结构
布局	纵向（时间向下）	自由（空间）
消息编号	隐式（按位置）	显式（1、1.1、1.2）
易读性	易看"执行次序"	易看"对象关系"
转换	可相互转换（UML 规范支持）	同左

软考答题要点：两者描述同一信息，UML 工具（Enterprise Architect、StarUML、PlantUML）支持自动互转。

四、面向对象三种模型

OOA（面向对象分析）需要建立三个相互独立又相互依赖的模型：

模型	关注点	主要元素	回答的问题
对象模型	静态结构	对象、类、属性、操作、关联、聚合、泛化	“是什么”
动态模型	动态行为	状态、事件、状态转换（状态图）	“什么时候发生”
功能模型	数据变换	加工、数据流、数据存储（DFD）	“做什么”

4.1 三者关联关系（必考）

对象模型 = 静态骨架
动态模型 = 在骨架上跑"时序"（对象 = 状态机主体）
功能模型 = 在骨架上做"变换"
- DFD 中的加工 ≈ 对象模型中类的方法
- DFD 中的数据存储 ≈ 对象模型中类的属性
三者必须并建，缺一不可

4.2 哪些用于需求分析？

功能模型：需求分析最核心（DFD 直接描述系统功能需求）
对象模型：用于需求分析（识别候选对象和类）
动态模型：用于系统分析阶段（控制流、状态转换），部分用例的动态行为也在需求分析中识别

结论：功能模型主要用于需求分析；对象模型和动态模型主要用于系统分析（OOA 阶段）。

五、2024+ 视角

5.1 自动化画图工具

工具	特点	适用
PlantUML	文本式画图，写代码生成 UML	程序员、技术评审
Mermaid	Markdown 友好，GitHub/Hugo 原生支持	文档嵌入
Draw.io	图形化拖拽，免费	非程序员、白板
Structurizr DSL	C4 模型首选	架构图
Mermaid Live Editor	浏览器实时预览	快速原型

PlantUML 画时序图示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


@startuml
actor 患者
participant "预约界面" as UI
participant "数据库访问类" as DAO
database "医生列表" as DB1
database "医生出诊时段表" as DB2

患者 -> UI : 发起预约挂号请求
UI -> DAO : 获取医生信息
DAO -> DB1 : 加载医生信息
DB1 -> DB2 : 加载医生出诊时段
DB2 --> UI : 返回医生可预约时段
UI --> 患者 : 显示医生可预约时段
患者 -> UI : 选择医生/时间确认预约
UI -> DAO : 写入预约信息
DAO --> UI : 返回预约结果
UI --> 患者 : 显示预约结果
@enduml

Mermaid 画时序图示例

sequenceDiagram
 actor 患者
 患者->>预约界面: 发起预约挂号请求
 预约界面->>数据库访问类: 获取医生信息
 数据库访问类->>医生列表: 加载医生信息
 医生列表->>医生出诊时段表: 加载出诊时段
 医生出诊时段表-->>预约界面: 返回可预约时段
 预约界面-->>患者: 显示医生可预约时段
 患者->>预约界面: 确认预约
 预约界面->>数据库访问类: 写入预约信息
 数据库访问类-->>预约界面: 返回结果
 预约界面-->>患者: 显示预约结果

5.2 UML 在云原生时代的变化

C4 模型（Simon Brown）逐渐取代传统 UML 4+1 视图——更贴近代码、易维护
ADR（架构决策记录） + Fitness Function：UML 静态图 → 架构可执行验证
大模型生成 UML：GPT-4 / Claude 直接从需求文档生成用例图、时序图
领域驱动设计（DDD）：UML 类图 → 限界上下文、聚合根、领域事件
Arc42 文档模板：UML 图 + 架构决策 + 质量场景一体化

5.3 软考答题趋势

2024+ 软考更注重实战应用——只背图元素不够，要会从需求中"识别"和"画图"
题目经常给业务描述，让你画 UML 图（不再只是填空）
协作图考频下降（被时序图替代），但区别对比题仍是送分题

六、答题套路总结（软考专用）

题型	套路
填参与者	看动作的发起方（“谁登录/谁查询”）
填用例	提取功能描述里的动词短语（每个动词 = 一个用例）
填对象	提取题干里的实体名词（界面、类、表、控制器）
填消息	提取动词（“发起/加载/返回/传送”）
区别对比题	答"强调重点 / 表示方法 / 布局 / 易读性" 4 个维度
三种模型题	答"关注点 / 主要元素 / 解决什么问题" 3 个维度 + 关联关系

参考资料

2021 年下半年系统架构设计师考试真题（下午案例分析试题二）
《系统架构设计师教程》第 7 章软件工程
UML 2.5 规范（OMG 官方）
《UML 用户指南》Grady Booch、James Rumbaugh、Ivar Jacobson
《PlantUML 官方文档》https://plantuml.com/
《Mermaid 官方文档》https://mermaid.js.org/

Mermaid 与 PlantUML 类图：从 Markdown 画 UML

Fri, 15 May 2015 00:00:00 +0800

为什么用 Markdown 画 UML

UML 工具（Enterprise Architect、StarUML、Visio）的痛点：

商业授权贵
团队协作要共享文件
改一处要打开 GUI 拖拽

文本描述 UML 的方案：

Mermaid：2014 年起，GitHub 原生支持，类图/时序图/流程图 10+ 种
PlantUML：2009 年起，Java 实现，UML 2.5 全覆盖，扩展性最强

Mermaid

类图基础

classDiagram
 Animal <|-- Person
 Person <|.. Man

类图语法

classDiagram
 class Animal {
 +String name
 +int age
 +eat() void
 -breathe() void
 }
 class Person {
 +String id
 +think() void
 }
 class Man {
 +work() void
 }
 Animal <|-- Person // 继承（实心空心三角箭头）
 Person <|.. Man // 实现（虚线空心三角箭头）

关系符号

符号	含义
`<\|--`	继承（extends）
`<\|\..`	实现（implements）
`*--`	组合（Composition）
`o--`	聚合（Aggregation）
`-->`	关联（Association）
`..>`	依赖（Dependency）
`--`	实线链接
`..`	虚线链接

时序图

sequenceDiagram
 participant U as User
 participant A as App
 participant S as Server
 U->>A: 点击登录
 A->>S: POST /login {user, pass}
 S-->>A: 200 {token}
 A-->>U: 跳转到首页

流程图

flowchart TD
 A[开始] --> B{是否登录}
 B -- 是 --> C[首页]
 B -- 否 --> D[登录页]
 D --> E[提交登录]
 E --> F{验证成功}
 F -- 是 --> C
 F -- 否 --> G[错误提示]
 G --> D

状态图

stateDiagram-v2
 [*] --> 待支付
 待支付 --> 已支付: 付款
 已支付 --> 已发货: 发货
 已发货 --> 已签收: 签收
 已签收 --> [*]
 待支付 --> 已取消: 取消
 已取消 --> [*]

ER 图

erDiagram
 USER ||--o{ ORDER : places
 USER {
 int id PK
 string name
 string email
 }
 ORDER {
 int id PK
 int user_id FK
 date created_at
 }

GitHub 原生支持

1
2
3
4
5


# README.md
\`\`\`mermaid
classDiagram
 Animal <|-- Person
\`\`\`

GitHub 会自动渲染成 SVG。

IDEA 集成

IDEA Ultimate 内置 Mermaid 预览：

.md 文件里的 mermaid 代码块
或装 Mermaid 插件

VSCode 集成

装 Markdown Preview Mermaid Support 插件
Ctrl + Shift + V 预览

PlantUML

PlantUML 比 Mermaid 功能强，覆盖 UML 2.5 全套，扩展性更好。

安装

1
2
3
4
5
6
7
8


# Java JRE 8+
java -jar plantuml.jar file.puml

# VSCode 插件
# PlantUML (by jebbs)

# IDEA 插件
# PlantUML integration

类图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


@startuml
class Animal {
 +name: String
 +age: int
 +eat(): void
 -breathe(): void
}

class Person {
 +id: String
 +think(): void
}

class Man {
 +work(): void
}

Animal <|-- Person
Person <|.. Man
@enduml

关系

1
2
3
4
5
6
7
8


@startuml
A <|-- B ' 继承
C <|.. D ' 实现
E *-- F ' 组合
G o-- H ' 聚合
I --> J ' 关联
K ..> L ' 依赖
@enduml

时序图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


@startuml
actor User
participant "App" as A
participant "Server" as S

User -> A: 点击登录
A -> S: POST /login
S --> A: 200 {token}
A --> User: 跳转到首页
@enduml

流程图（活动图）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


@startuml
(*) --> "开始"
if "已登录" then
 -->[是] "首页"
 --> (*)
else
 -->[否] "登录页"
 --> "提交登录"
 if "验证成功" then
 -->[是] "首页"
 else
 -->[否] "错误提示"
 endif
endif
@enduml

状态图

1
2
3
4
5
6
7
8


@startuml
[*] --> 待支付
待支付 --> 已支付: 付款
已支付 --> 已发货: 发货
已发货 --> 已签收: 签收
已签收 --> [*]
待支付 --> 已取消: 取消
@enduml

组件图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


@startuml
package "Frontend" {
 [Web App]
 [Mobile App]
}

package "Backend" {
 [API Gateway]
 [Auth Service]
 [Order Service]
}

[Web App] --> [API Gateway]
[Mobile App] --> [API Gateway]
[API Gateway] --> [Auth Service]
[API Gateway] --> [Order Service]
@enduml

部署图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


@startuml
node "Web Server" {
 [Nginx]
 [App]
}

node "Database" {
 [MySQL]
 [Redis]
}

[Nginx] --> [App]
[App] --> [MySQL]
[App] --> [Redis]
@enduml

主题与样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


@startuml
!theme plain
skinparam classAttributeIconSize 0
skinparam classFontSize 14
skinparam classBackgroundColor #F0F0F0

class Foo {
 +method()
}
@enduml

PlantUML Server

如果不想装 Java，可以用自己的 PlantUML Server：

1
2
3
4
5


# 官方
docker run -d -p 8080:8080 plantuml/plantuml-server

# 用法
curl "http://localhost:8080/svg/~1uml@somefile"

或者用公共 PlantUML 服务：https://www.plantuml.com/plantuml/uml/

Mermaid vs PlantUML 对比

维度	Mermaid	PlantUML
渲染	JS（前端）	Java
GitHub 原生	✅	❌（需插件）
类型覆盖	10+	UML 2.5 全
扩展性	一般	强（皮肤、宏）
主题	少	多
性能	较慢（前端渲染）	快（Java 服务端）
上手	简单	较难
输出	SVG	SVG/PNG/PDF

选 Mermaid 的场景：团队用 GitHub Wiki / README、简单图为主、JS 渲染方便 选 PlantUML 的场景：需要严格 UML、复杂时序图、企业级文档

工程化

文档生成器

docsify + Mermaid 插件
GitBook + Mermaid 插件
VuePress + Mermaid 插件
Docusaurus + Mermaid 插件（v3 内置）

CI/CD 集成

GitHub Action 自动校验 Mermaid 语法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# .github/workflows/mermaid-check.yml
name: Mermaid Check
on: [pull_request]
jobs:
 check:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v3
 - uses: neenjaw/extract-mermaid-blocks-action@v1
 with:
 output-folder: 'mermaid-blocks'
 - uses: nicolegordon/mermaid-validate-action@v1
 with:
 input: 'mermaid-blocks'

IDE 实时预览

VSCode + Markdown Preview Enhanced：实时预览 Mermaid
IDEA + PlantUML Integration：右键 PlantUML 文件 → Show Preview
Obsidian：原生支持 Mermaid

下一步

想把类图转成代码，看 JetBrains MPS、UML Designer
想要画系统架构图，看 2017-08-15《iOS 应用开发与证书管理》中架构图部分
想要画 UI 原型，看 2014-05-15《Axure 产品原型设计》

参考资料

Mermaid 官方：https://mermaid.js.org/
Mermaid Live Editor：https://mermaid.live/
PlantUML 官方：https://plantuml.com/
PlantUML 中文文档：https://plantuml.com/zh/
PlantUML Server：https://github.com/plantuml/plantuml-server

2024+ 视角（从 Mermaid/PlantUML 到 AI 画图 + 架构即代码）

2015 年写 Mermaid/PlantUML 时，文本画图还是"新事物"；到 2024-2026 年，这两套已经全面成为行业标准，并出现明显分层：

GitHub 原生支持的扩散：
- Mermaid 仍是 GitHub/GitLab 默认渲染引擎
- GitLab 15+ 也支持 PlantUML 渲染
- Notion、飞书、语雀等均原生支持 Mermaid
Mermaid v10/v11 增强：
- 新增 C4 插件（Context/Container/Component）—— 配合 Structurizr 简化架构图
- Git graph 已成为最常被复制的图类型
- Architecture diagram（v10.6+）支持服务、数据库、队列等图标
PlantUML 的 C4-PlantUML 扩展：
- 第三方 C4-PlantUML 让 PlantUML 也能画 C4
- Mermaid 渲染 C4 性能 vs PlantUML 渲染 C4 性能：复杂 C4 图 Mermaid 仍偏慢
AI 画图崛起：
- Mermaid Chart + AI（自动从文字生成图）
- Eraser.io / Whimsical AI（手绘草图转 UML）
- GitHub Copilot Workspace 支持从 issue 描述自动生成架构图
Structurizr DSL 全面胜出"画架构图"场景：
- C4 模型 + Structurizr DSL（Java 生态）+ Structurizr Lite（本地预览）已是画系统架构的事实标准
- 替代品：Mermaid + C4 插件（轻量）、draw.io / diagrams.net（GUI 派）
文档工具集成：
- Docusaurus（v3+）内置 Mermaid
- Hugo + Mermaid 短代码
- VitePress / Astro 都默认支持 Mermaid
新工具涌现：
- Excalidraw（手绘风格，团队协作）
- tldraw（白板式画架构图）
- IcePanel（C4 互动式）
- Ilograph（多视角架构图）
PlantUML 的"危机"：
- 公共 PlantUML Server 经常因负载限速
- 私有 PlantUML Server + Asciidoctor Diagram 仍是企业内部方案
- 一些企业转向 D2（Terrastruct 出品，文本画图新秀，go 生态）

选型更新（2024 视角）：

场景	推荐工具
README/Wiki 简单图	Mermaid（GitHub 原生）
严格 UML（时序/状态/类）	PlantUML
系统架构 C4	Structurizr DSL（首选） / Mermaid C4 插件
手绘风格团队讨论	Excalidraw
互动式架构	IcePanel / Ilograph
AI 辅助	Mermaid Chart AI / Eraser AI
复杂企业文档	PlantUML Server + Asciidoctor

2015 年这篇的"Mermaid/PlantUML 对比"框架至今成立——GitHub 原生选 Mermaid，企业级严格 UML 选 PlantUML。变化的是 C4 模型成为架构图事实标准、AI 辅助画图崛起、私有 PlantUML Server 成为企业首选。