UML(统一建模语言)2.0中定义了14种不同类型的图表,用于从不同角度描述系统。这些图表分为结构图和行为图两大类。
可使用 PlantUML 绘制 UML 中的各种类型的图表:https://plantuml.com/zh/
PlantUML是一个通用性很强的工具,可以快速、直接地创建各种图表,如序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图、时序图等,其他图支撑不太好,需要使用前面的图进行模拟。
结构图主要描述系统的静态结构:
ASCII图示:
+--------------------+
| Customer |
+--------------------+
| -name: String |
| -id: int |
+--------------------+
| +getName(): String |
| +setName(String) |
+--------------------+
▲
|
+--------------------+
| VIPCustomer |
+--------------------+
| -level: int |
+--------------------+
| +getDiscount() |
+--------------------+
PlantUML生成图:
@startuml
class Customer {
-name: String
-id: int
+getName(): String
+setName(String)
}
class VIPCustomer {
-level: int
+getDiscount()
}
Customer <|-- VIPCustomer
@enduml
ASCII图示:
+--------------------+
| customer: Customer |
+--------------------+
| name = "张三" |
| id = 12 |
+--------------------+
PlantUML生成图:
@startuml
object 对象1
对象1 : name = "张三"
对象1 : id = 12
object "第 2 个对象" as o2
o2 : name = "李四"
o2 : id = 23
@enduml
ASCII图示:
+-----------------+ +-----------------+
| <<组件>> | | <<组件>> |
| Web UI | | 业务逻辑层 |
+-----------------+ +-----------------+
| |
| <<使用>> | <<使用>>
v v
+-----------------+ +-----------------+
| <<组件>> | | <<组件>> |
| 用户服务 | | 数据访问层 |
+-----------------+ +-----------------+
|
| <<使用>>
v
+-----------------+
| <<组件>> |
| 数据库 |
+-----------------+
PlantUML生成图:
@startuml
skinparam component {
BackgroundColor<<组件>> White
BorderColor Black
}
[Web UI] <<组件>> as webui
[业务逻辑层] <<组件>> as business
[用户服务] <<组件>> as userService
[数据访问层] <<组件>> as dataAccess
[数据库] <<组件>> as database
webui -down-> userService : <<使用>>
business -down-> dataAccess : <<使用>>
dataAccess -down-> database : <<使用>>
@enduml
ASCII图示:
+---------------+ +---------------+
| Web Server | | App Server |
| +--------+ | | +--------+ |
| |Web App | |------>| |Business| |
| +--------+ | | |Logic | |
+---------------+ | +--------+ |
+-------+-------+
|
v
+---------------+
| Database |
| Server |
+---------------+
PlantUML生成图:
@startuml
node "Web Server" {
component "Web App"
}
node "App Server" {
component "Business Logic"
}
node "Database Server" {
database "Database"
}
"Web Server" --> "App Server"
"App Server" --> "Database Server"
@enduml
ASCII图示:
+-------------------------------+
| 电脑系统 |
| |
| +-------+ +---------+ |
| | CPU |<------>| 内存 | |
| +-------+ +---------+ |
| ^ ^ |
| | | |
| v v |
| +-------+ +---------+ |
| | 硬盘 |<------>| 网卡 | |
| +-------+ +---------+ |
+-------------------------------+
PlantUML生成图:
@startuml
package "电脑系统" {
component CPU
component "内存"
component "硬盘"
component "网卡"
CPU <--> "内存"
CPU <--> "硬盘"
"内存" <--> "网卡"
"硬盘" <--> "网卡"
}
@enduml
ASCII图示:
+----------------+ +----------------+
| UI包 | | 业务逻辑包 |
| |---->| |
+----------------+ +----------------+
| |
| |
v v
+----------------+ +----------------+
| 工具包 | | 数据访问包 |
| |<----| |
+----------------+ +----------------+
PlantUML生成图:
@startuml
package "UI包" as UI
package "业务逻辑包" as BL
package "工具包" as Tools
package "数据访问包" as DA
UI --> BL
UI --> Tools
BL --> DA
DA --> Tools
@enduml
ASCII图示:
<<stereotype>>
+----------------+
| 移动设备 |
+----------------+
| +安全级别: int |
+----------------+
PlantUML生成图:
@startuml
skinparam stereotypeCBackgroundColor #ADD8E6
class "移动设备" <<stereotype>> {
+ 安全级别 : int
}
@enduml
行为图主要描述系统的动态行为:
ASCII图示:
+-----------------------------+
| ATM系统 |
| |
| +----------+ |
| | | |
| | 取款 |<------+ |
| | | | |
| +----------+ | |
| | |
| +----------+ | |
| | | | |
| | 查询余额 |<------+------ 客户
| | | | |
| +----------+ | |
| | |
| +----------+ | |
| | | | |
| | 存款 |<------+ |
| | | |
| +----------+ |
| |
+-----------------------------+
PlantUML生成图:
@startuml
left to right direction
actor 客户 as customer
rectangle "ATM系统" {
usecase "取款" as withdraw
usecase "查询余额" as checkBalance
usecase "存款" as deposit
}
customer --> withdraw
customer --> checkBalance
customer --> deposit
@enduml
ASCII图示:
+----------------+
| 开始购物 |
+----------------+
|
v
+----------------+
| 浏览产品 |
+----------------+
|
v
+----------------+
| 选择产品 |
+----------------+
|
v
+----------------+
| 加入购物车 |
+----------------+
|
v
+----------------+
| 是否继续购物? |
+----------------+
/ \
[是] / \ [否]
/ \
| v
| +----------------+
| | 结算 |
| +----------------+
| |
| v
| +----------------+
| | 输入地址 |
| +----------------+
| |
| v
| +----------------+
| | 选择支付 |
| +----------------+
| |
| v
| +----------------+
| | 确认订单 |
| +----------------+
| |
| v
| +----------------+
| | 支付成功 |
| +----------------+
| |
v v
+----------------+ +----------------+
| 继续浏览 | | 结束购物 |
+----------------+ +----------------+
PlantUML生成图:
@startuml
start
:开始购物;
repeat
:浏览产品;
:选择产品;
:加入购物车;
:是否继续购物?;
backward:是;
repeat while (继续购物?)
:结算;
:输入地址;
:选择支付;
:确认订单;
:支付成功;
:结束购物;
stop
@enduml
ASCII图示:
+----------+ 注册 +----------+
| 未注册 |-------->| 待激活 |
+----------+ +----------+
|
| 激活
v
+----------+ 冻结 +----------+
| 已冻结 |<--------| 正常 |
+----------+ +----------+
| ^
| |
| 解冻 |
+-------------------->+
PlantUML生成图:
@startuml
[*] --> 未注册
未注册 --> 待激活 : 注册
待激活 --> 正常 : 激活
正常 --> 已冻结 : 冻结
已冻结 --> 正常 : 解冻
@enduml
ASCII图示:
用户 界面 数据库
| | |
|--登录请求-------->| |
| |---验证用户信息---->|
| |<--返回验证结果-----|
|<--显示登录结果----| |
| | |
PlantUML生成图:
@startuml
skinparam sequenceArrowThickness 2
skinparam sequenceParticipant underline
actor 用户
boundary 界面
database 数据库
用户 -> 界面: 登录请求
activate 界面
界面 -> 数据库: 验证用户信息
activate 数据库
数据库 --> 界面: 返回验证结果
deactivate 数据库
界面 --> 用户: 显示登录结果
deactivate 界面
@enduml
+-------+
| 用户 |
+-------+
|
1:登录请求
|
v
+-------+ +-------+
| 界面 |--2:验证-->| 数据库 |
+-------+ +-------+
|
4:显示结果
|
v
+-------+
| 用户 |
+-------+
PlantUML生成图:
@startuml
' 定义对象
object "用户" as user
object "界面" as ui
object "数据库" as db
' 定义对象间的链接和消息
user --> ui : 1: 登录请求
ui --> db : 2: 验证
db --> ui : 3: 返回结果
ui --> user : 4: 显示结果
@enduml
ASCII图示:
+----------------+
| 开始登录 |
+----------------+
|
v
+----------------+
| 验证用户名密码 |
+----------------+
|
[验证成功]
/ \
/ \
+----------------+ +----------------+
| sd 查询用户权限 | | sd 记录登录失败 |
+----------------+ +----------------+
\ /
\ /
\ /
+----------------+
| 结束登录 |
+----------------+
PlantUML生成图:
@startuml
:开始登录;
:验证用户名密码;
if (验证成功?) then (yes)
:查询用户权限;
else (no)
:记录登录失败;
endif
:验证结束;
@enduml
和序列图对比:
特性 | 序列图 | 时序图 |
---|---|---|
主要关注点 | 对象间的消息交互 | 对象的状态变化 |
时间轴方向 | 垂直方向(从上到下) | 水平方向(从左到右) |
表达重点 | 交互顺序和逻辑流程 | 状态持续时间和变化时刻 |
适用场景 | 分析对象协作和消息流 | 分析实时系统中状态变化 |
表示方式 | 生命线和消息箭头 | 状态线和状态变化点 |
ASCII图示:
状态
^
闲置 |__________ _________
| | |
忙碌 | |______________|
| | |
+---------------------------------> 时间
收到请求 处理完成
PlantUML生成图:
@startuml
concise "状态 " as Server
@0
Server is 闲置
@5
Server is 忙碌
@15
Server is 闲置
@enduml
对于不同的建模需求,可以选择使用不同类型的UML图表,它们共同帮助开发团队更好地理解、设计和实现软件系统。