当前位置: 首页 > news >正文

UML2.0中的14种图简介,并借助AI生成UML图

UML2.0中的14种图简介,并借助AI生成UML图

  • 绘制流程
  • 结构图(Structure Diagrams)
    • 1. 类图(Class Diagram):
    • 2. 对象图(Object Diagram):
    • 3. 组件图(Component Diagram,构件图):
    • 4. 部署图(Deployment Diagram):
    • 5. 复合结构图(Composite Structure Diagram,组合结构图):
    • 6. 包图(Package Diagram):
    • 7. 配置图(Profile Diagram,轮廓图):
  • 行为图(Behavior Diagrams)
    • 8. 用例图(Use Case Diagram):
    • 9. 活动图(Activity Diagram):
    • 10. 状态图(State Machine Diagram):
    • 11. 序列图(Sequence Diagram):
    • 12. 通信图(Communication Diagram,协作图):
    • 13. 交互概览图(Interaction Overview Diagram):
    • 14. 时序图(Timing Diagram):
  • 应用场景

UML(统一建模语言)2.0中定义了14种不同类型的图表,用于从不同角度描述系统。这些图表分为结构图和行为图两大类。

绘制流程

1、大模型生成UML图的草图,可以是ASCII表示,如图:
用户 界面 数据库

 |                  |                   |  |--登录请求-------->|                   |  |                  |---验证用户信息---->|  |                  |<--返回验证结果-----|  |<--显示登录结果----|                   |  |                  |                   |  

2、使用大模型根据草图,生成PlantUML代码:

@startuml  skinparam sequenceArrowThickness 2  
skinparam sequenceParticipant underline  actor 用户  
boundary 界面  
database 数据库  用户 -> 界面: 登录请求  
activate 界面  
界面 -> 数据库: 验证用户信息  
activate 数据库  
数据库 --> 界面: 返回验证结果  
deactivate 数据库  
界面 --> 用户: 显示登录结果  
deactivate 界面  @enduml 

3、将代码添加到PlantUML在线编辑网站
可使用 PlantUML 绘制 UML 中的各种类型的图表:https://plantuml.com/zh/,可以编辑预览预览UML图,之后就可以下载了!

PlantUML是一个通用性很强的工具,可以快速、直接地创建各种图表,如序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图、时序图等,其他图支撑不太好,需要使用前面的图进行模拟。

结构图(Structure Diagrams)

结构图主要描述系统的静态结构:

1. 类图(Class Diagram):

  • 显示系统中的类、接口及它们之间的关系
  • 展示属性、方法和关系(如继承、实现、依赖等)
  • 是UML中最常用的图表之一

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  

类图

2. 对象图(Object Diagram):

  • 类图的实例,显示系统某一时刻的对象状态
  • 表示对象之间的实际关系和具体属性值

ASCII图示:

+--------------------+  
| customer: Customer |  
+--------------------+  
| name = "张三"       |  
| id = 12             |  
+--------------------+  

PlantUML生成图:

@startuml
object 对象1
对象1 : name = "张三"
对象1 : id = 12object "第 2 个对象" as o2
o2 : name = "李四"
o2 : id = 23
@enduml  

在这里插入图片描述

3. 组件图(Component Diagram,构件图):

  • 展示系统的组件及其依赖关系
  • 表示软件系统的物理结构和组织

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  

在这里插入图片描述

4. 部署图(Deployment Diagram):

  • 描述系统运行时的物理架构
  • 显示硬件节点、软件组件的分布及它们的关系

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  

在这里插入图片描述

5. 复合结构图(Composite Structure Diagram,组合结构图):

  • 展示类或组件的内部结构
  • 显示各部分如何相互协作

ASCII图示:

+-------------------------------+  
|          电脑系统             |  
|                               |  
| +-------+        +---------+  |  
| | CPU   |<------>| 内存    |  |  
| +-------+        +---------+  |  
|    ^                 ^        |  
|    |                 |        |  
|    v                 v        |  
| +-------+        +---------+  |  
| | 硬盘   |<------>| 网卡   |  |  
| +-------+        +---------+  |  
+-------------------------------+  

PlantUML生成图:

@startuml  package "电脑系统" {  component CPU  component "内存"  component "硬盘"  component "网卡"  CPU <--> "内存"  CPU <--> "硬盘"  "内存" <--> "网卡"  "硬盘" <--> "网卡"  
}  @enduml   

在这里插入图片描述

6. 包图(Package Diagram):

  • 显示系统的包结构和包之间的依赖关系
  • 帮助管理大型系统的组织结构

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

在这里插入图片描述

7. 配置图(Profile Diagram,轮廓图):

  • 用于定义UML的扩展机制
  • 允许开发者定制UML以适应特定领域

ASCII图示:

<<stereotype>>  
+----------------+  
|  移动设备       |  
+----------------+  
| +安全级别: int  |  
+----------------+  

PlantUML生成图:

@startuml  skinparam stereotypeCBackgroundColor #ADD8E6  class "移动设备" <<stereotype>> {  + 安全级别 : int  
}  @enduml  

在这里插入图片描述

行为图(Behavior Diagrams)

行为图主要描述系统的动态行为:

8. 用例图(Use Case Diagram):

  • 从用户角度描述系统功能
  • 展示系统与外部参与者的交互

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 

在这里插入图片描述

9. 活动图(Activity Diagram):

  • 描述业务流程、算法或操作的工作流程
  • 类似于流程图,但支持并行行为建模

ASCII图示:

        +----------------+  |    开始购物     |  +----------------+  |  v  +----------------+  |   浏览产品      |  +----------------+  |  v  +----------------+  |   选择产品      |  +----------------+  |  v  +----------------+  |   加入购物车    |  +----------------+  |  v  +----------------+  |  是否继续购物?  |  +----------------+  /           \[是] /             \ [否]  /                 \|                  v  |          +----------------+  |          |    结算        |  |          +----------------+  |                  |  |                  v  |          +----------------+  |          |   输入地址     |  |          +----------------+  |                  |  |                  v  |          +----------------+  |          |   选择支付     |  |          +----------------+  |                  |  |                  v  |          +----------------+  |          |   确认订单     |  |          +----------------+  |                  |  |                  v  |          +----------------+  |          |   支付成功     |  |          +----------------+  |                  |  v                  v  
+----------------+  +----------------+  
|   继续浏览      |  |    结束购物    |  
+----------------+  +----------------+  

PlantUML生成图:

@startuml  start  
:开始购物;  repeat  :浏览产品;  :选择产品;  :加入购物车;  :是否继续购物?;  
backward:是;  
repeat while (继续购物?)  :结算;  
:输入地址;  
:选择支付;  
:确认订单;  
:支付成功;  
:结束购物;  stop  @enduml  

在这里插入图片描述

10. 状态图(State Machine Diagram):

  • 描述对象在生命周期内的状态变化
  • 展示事件如何触发状态转换

ASCII图示:

      +----------+   注册   +----------+  |  未注册   |-------->|  待激活   |  +----------+         +----------+  |  | 激活  v  +----------+   冻结   +----------+  |  已冻结   |<--------|  正常     |  +----------+          +----------+  |                     ^  |                     |  |        解冻          |  +-------------------->+  

PlantUML生成图:

@startuml  [*] --> 未注册  未注册 --> 待激活 : 注册  
待激活 --> 正常 : 激活  
正常 --> 已冻结 : 冻结  
已冻结 --> 正常 : 解冻  @enduml  

在这里插入图片描述

11. 序列图(Sequence Diagram):

  • 展示对象之间的交互顺序
  • 强调消息的时间顺序

ASCII图示:

用户               界面                 数据库  |                  |                   |  |--登录请求-------->|                   |  |                  |---验证用户信息---->|  |                  |<--返回验证结果-----|  |<--显示登录结果----|                   |  |                  |                   |  

PlantUML生成图:

@startuml  skinparam sequenceArrowThickness 2  
skinparam sequenceParticipant underline  actor 用户  
boundary 界面  
database 数据库  用户 -> 界面: 登录请求  
activate 界面  
界面 -> 数据库: 验证用户信息  
activate 数据库  
数据库 --> 界面: 返回验证结果  
deactivate 数据库  
界面 --> 用户: 显示登录结果  
deactivate 界面  @enduml 

在这里插入图片描述

12. 通信图(Communication Diagram,协作图):

  • 也称为协作图
  • 展示对象之间的交互关系
  • 强调对象之间的组织结构而非时间顺序
       +-------+  | 用户   |  +-------+  |  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 

在这里插入图片描述

13. 交互概览图(Interaction Overview Diagram):

  • 结合活动图和序列图的特点
  • 展示复杂交互的控制流程

ASCII图示:

      +----------------+  |    开始登录     |  +----------------+  |  v  +----------------+  | 验证用户名密码 |  +----------------+  |  [验证成功]  /          \/            \
+----------------+  +----------------+  
| sd 查询用户权限 |  | sd 记录登录失败 |  
+----------------+  +----------------+  \            /  \          /  \        /  +----------------+  |     结束登录    |  +----------------+  

PlantUML生成图:

	
@startuml:开始登录; :验证用户名密码;if (验证成功?) then (yes):查询用户权限;
else (no):记录登录失败;
endif:验证结束;@enduml

在这里插入图片描述

14. 时序图(Timing Diagram):

  • 展示对象状态随时间变化的情况
  • 特别适用于实时系统的建模

和序列图对比:

特性序列图时序图
主要关注点对象间的消息交互对象的状态变化
时间轴方向垂直方向(从上到下)水平方向(从左到右)
表达重点交互顺序和逻辑流程状态持续时间和变化时刻
适用场景分析对象协作和消息流分析实时系统中状态变化
表示方式生命线和消息箭头状态线和状态变化点

ASCII图示:

状态  ^  
闲置 |__________                _________  |          |              |  
忙碌 |          |______________|  |          |              |  +---------------------------------> 时间  收到请求         处理完成  

PlantUML生成图:

@startuml  
concise "状态 " as Server  @0  
Server is 闲置  @5  
Server is 忙碌  @15  
Server is 闲置  @enduml   

在这里插入图片描述

应用场景

  • 需求分析阶段:用例图、活动图
  • 系统设计阶段:类图、对象图、序列图
  • 实现阶段:组件图、部署图
  • 测试阶段:状态图、时序图

对于不同的建模需求,可以选择使用不同类型的UML图表,它们共同帮助开发团队更好地理解、设计和实现软件系统。

相关文章:

  • Stream API 对两个 List 进行去重操作
  • Redis 详解:安装、数据类型、事务、配置、持久化、订阅/发布、主从复制、哨兵机制、缓存
  • 实现SpringBoot底层机制【Tomcat启动分析+Spring容器初始化+Tomcat 如何关联 Spring容器】
  • 【C++】13.list的模拟实现
  • docker部署seafile修改默认端口并安装配置onlyoffice实现在线编辑
  • 硬核解析:整车行驶阻力系数插值计算与滑行阻力分解方法论
  • 2025-04-23 Python深度学习3——Tensor
  • Transformer:引领深度学习新时代的架构
  • C# 使用Windows API实现键盘钩子的类
  • 【KWDB 创作者计划】_嵌入式硬件篇---数字电子器件
  • Android Cordova 开发 - Cordova 解读初始化项目(index.html meta、Cordova.js、config.xml)
  • AndroidAutomotive模块介绍(四)VehicleHal介绍
  • Pytorch图像数据转为Tensor张量
  • 大厂面试:MySQL篇
  • create_function()漏洞利用
  • centos stream 10 修改 metric
  • LSTM-GAN生成数据技术
  • 4. 继承基类实现浏览器_Chrome
  • 6.1.多级缓存架构
  • 【Axure高保真原型】动态折线图
  • 龙头券商哪家强:中信去年营收领跑,中金净利下滑
  • 宁德时代与广汽等五车企发布10款巧克力换电新车型:年内将完成30城1000站计划
  • 复旦大学校友夫妇一次性捐赠10亿元,成立学敏高等研究院
  • 金光耀:被激活的复旦记忆
  • 18米巨作绘写伏羲女娲,安徽展石虎最后十年重彩画
  • 张广智当选陕西省慈善联合会会长