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

UML（统一建模语言）2.0中定义了14种不同范例的图表，用于从不同角度描述体系。这些图表分为结构图和举动图两大类。
绘制流程

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

1. |                  |                   |  
3. |--登录请求-------->|                   |  
5. |                  |---验证用户信息---->|  
7. |                  |<--返回验证结果-----|  
9. |<--显示登录结果----|                   |  
11. |                  |                   |  

复制代码

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

1. @startuml  
4. skinparam sequenceArrowThickness 2  
5. skinparam sequenceParticipant underline  
9. actor 用户  
10. boundary 界面  
11. database 数据库  
14. 用户 -> 界面: 登录请求  
15. activate 界面  
16. 界面 -> 数据库: 验证用户信息  
17. activate 数据库  
18. 数据库 --> 界面: 返回验证结果  
19. deactivate 数据库  
20. 界面 --> 用户: 显示登录结果  
21. deactivate 界面  
23. @enduml

复制代码

3、将代码添加到PlantUML在线编辑网站
可使用 PlantUML 绘制 UML 中的各种范例的图表：https://plantuml.com/zh/，可以编辑预览预览UML图，之后就可以下载了！
   PlantUML是一个通用性很强的工具，可以快速、直接地创建各种图表，如序列图、用例图、类图、对象图、活动图、组件图、摆设图、状态图、时序图等，其他图支持不太好，需要使用前面的图举行模拟。
  结构图（Structure Diagrams）

结构图主要描述体系的静态结构：
1. 类图（Class Diagram）：

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

ASCII图示：

1. +--------------------+  
2. |      Customer      |  
3. +--------------------+  
4. | -name: String      |  
5. | -id: int           |  
6. +--------------------+  
7. | +getName(): String |  
8. | +setName(String)   |  
9. +--------------------+  
10.           ▲  
11.           |  
12. +--------------------+  
13. |    VIPCustomer     |  
14. +--------------------+  
15. | -level: int        |  
16. +--------------------+  
17. | +getDiscount()     |  
18. +--------------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. class Customer {  
4.   -name: String  
5.   -id: int  
6.   +getName(): String  
7.   +setName(String)  
8. }  
10. class VIPCustomer {  
11.   -level: int  
12.   +getDiscount()  
13. }  
15. Customer <|-- VIPCustomer  
17. @enduml  

复制代码

2. 对象图（Object Diagram）：

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

ASCII图示：

1. +--------------------+  
2. | customer: Customer |  
3. +--------------------+  
4. | name = "张三"       |  
5. | id = 12             |  
6. +--------------------+  

复制代码

PlantUML生成图：

1. @startuml
2. object 对象1
3. 对象1 : name = "张三"
4. 对象1 : id = 12
6. object "第 2 个对象" as o2
7. o2 : name = "李四"
8. o2 : id = 23
9. @enduml  

复制代码

3. 组件图（Component Diagram，构件图）：

• 展示体系的组件及其依赖关系
  
• 表现软件体系的物理结构和构造
  

ASCII图示：

1. +-----------------+        +-----------------+  
2. |    <<组件>>     |        |    <<组件>>      |  
3. |     Web UI      |        |  业务逻辑层      |  
4. +-----------------+        +-----------------+  
5.         |                          |  
6.         | <<使用>>                  | <<使用>>  
7.         v                          v  
8. +-----------------+        +-----------------+  
9. |    <<组件>>      |        |    <<组件>>      |  
10. |   用户服务       |        |    数据访问层     |  
11. +-----------------+        +-----------------+  
12.                                    |  
13.                                    | <<使用>>  
14.                                    v  
15.                            +-----------------+  
16.                            |    <<组件>>      |  
17.                            |    数据库        |  
18.                            +-----------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. skinparam component {  
4.   BackgroundColor<<组件>> White  
5.   BorderColor Black  
6. }  
8. [Web UI] <<组件>> as webui  
9. [业务逻辑层] <<组件>> as business  
10. [用户服务] <<组件>> as userService  
11. [数据访问层] <<组件>> as dataAccess  
12. [数据库] <<组件>> as database  
14. webui -down-> userService : <<使用>>  
15. business -down-> dataAccess : <<使用>>  
16. dataAccess -down-> database : <<使用>>  
18. @enduml  

复制代码

4. 摆设图（Deployment Diagram）：

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

ASCII图示：

1. +---------------+       +---------------+  
2. |  Web Server   |       | App Server    |  
3. |  +--------+   |       | +--------+    |  
4. |  |Web App |   |------>| |Business|    |  
5. |  +--------+   |       | |Logic   |    |  
6. +---------------+       | +--------+    |  
7.                         +-------+-------+  
8.                                 |  
9.                                 v  
10.                         +---------------+  
11.                         | Database      |  
12.                         | Server        |  
13.                         +---------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. node "Web Server" {  
4.   component "Web App"  
5. }  
7. node "App Server" {  
8.   component "Business Logic"  
9. }  
11. node "Database Server" {  
12.   database "Database"  
13. }  
15. "Web Server" --> "App Server"  
16. "App Server" --> "Database Server"  
18. @enduml  

复制代码

5. 复合结构图（Composite Structure Diagram，组合结构图）：

• 展示类或组件的内部结构
  
• 显示各部门怎样相互协作
  

ASCII图示：

1. +-------------------------------+  
2. |          电脑系统             |  
3. |                               |  
4. | +-------+        +---------+  |  
5. | | CPU   |<------>| 内存    |  |  
6. | +-------+        +---------+  |  
7. |    ^                 ^        |  
8. |    |                 |        |  
9. |    v                 v        |  
10. | +-------+        +---------+  |  
11. | | 硬盘   |<------>| 网卡   |  |  
12. | +-------+        +---------+  |  
13. +-------------------------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. package "电脑系统" {  
4.   component CPU  
5.   component "内存"  
6.   component "硬盘"  
7.   component "网卡"  
8.   
9.   CPU <--> "内存"  
10.   CPU <--> "硬盘"  
11.   "内存" <--> "网卡"  
12.   "硬盘" <--> "网卡"  
13. }  
15. @enduml   

复制代码

6. 包图（Package Diagram）：

• 显示体系的包结构和包之间的依赖关系
  
• 资助管理大型体系的构造结构
  

ASCII图示：

1. +----------------+     +----------------+  
2. |   UI包         |     |   业务逻辑包    |  
3. |                |---->|                |  
4. +----------------+     +----------------+  
5.         |                     |  
6.         |                     |  
7.         v                     v  
8. +----------------+     +----------------+  
9. |   工具包       |     |   数据访问包    |  
10. |                |<----|                |  
11. +----------------+     +----------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. package "UI包" as UI  
4. package "业务逻辑包" as BL  
5. package "工具包" as Tools  
6. package "数据访问包" as DA  
8. UI --> BL  
9. UI --> Tools  
10. BL --> DA  
11. DA --> Tools  
13. @enduml

复制代码

7. 设置图（Profile Diagram，表面图）：

• 用于定义UML的扩展机制
  
• 答应开发者定制UML以顺应特定范畴
  

ASCII图示：

1. <<stereotype>>  
2. +----------------+  
3. |  移动设备       |  
4. +----------------+  
5. | +安全级别: int  |  
6. +----------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. skinparam stereotypeCBackgroundColor #ADD8E6  
5. class "移动设备" <<stereotype>> {  
6.   + 安全级别 : int  
7. }  
9. @enduml  

复制代码

举动图（Behavior Diagrams）

举动图主要描述体系的动态举动：
8. 用例图（Use Case Diagram）：

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

ASCII图示：

1. +-----------------------------+  
2. |       ATM系统               |  
3. |                             |  
4. |  +----------+               |  
5. |  |          |               |  
6. |  |  取款     |<------+      |  
7. |  |          |       |       |  
8. |  +----------+       |       |  
9. |                     |       |  
10. |  +----------+       |       |  
11. |  |          |       |       |  
12. |  | 查询余额   |<------+------ 客户  
13. |  |          |       |       |  
14. |  +----------+       |       |  
15. |                     |       |  
16. |  +----------+       |       |  
17. |  |          |       |       |  
18. |  |  存款     |<------+      |  
19. |  |          |               |  
20. |  +----------+               |  
21. |                             |  
22. +-----------------------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. left to right direction  
5. actor 客户 as customer  
7. rectangle "ATM系统" {  
8.   usecase "取款" as withdraw  
9.   usecase "查询余额" as checkBalance  
10.   usecase "存款" as deposit  
11. }  
13. customer --> withdraw  
14. customer --> checkBalance  
15. customer --> deposit  
17. @enduml

复制代码

9. 活动图（Activity Diagram）：

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

ASCII图示：

1.         +----------------+  
2.         |    开始购物     |  
3.         +----------------+  
4.                 |  
5.                 v  
6.         +----------------+  
7.         |   浏览产品      |  
8.         +----------------+  
9.                 |  
10.                 v  
11.         +----------------+  
12.         |   选择产品      |  
13.         +----------------+  
14.                 |  
15.                 v  
16.         +----------------+  
17.         |   加入购物车    |  
18.         +----------------+  
19.                 |  
20.                 v  
21.         +----------------+  
22.         |  是否继续购物?  |  
23.         +----------------+  
24.           /           \
25.       [是] /             \ [否]  
26.         /                 \
27.         |                  v  
28.         |          +----------------+  
29.         |          |    结算        |  
30.         |          +----------------+  
31.         |                  |  
32.         |                  v  
33.         |          +----------------+  
34.         |          |   输入地址     |  
35.         |          +----------------+  
36.         |                  |  
37.         |                  v  
38.         |          +----------------+  
39.         |          |   选择支付     |  
40.         |          +----------------+  
41.         |                  |  
42.         |                  v  
43.         |          +----------------+  
44.         |          |   确认订单     |  
45.         |          +----------------+  
46.         |                  |  
47.         |                  v  
48.         |          +----------------+  
49.         |          |   支付成功     |  
50.         |          +----------------+  
51.         |                  |  
52.         v                  v  
53. +----------------+  +----------------+  
54. |   继续浏览      |  |    结束购物    |  
55. +----------------+  +----------------+  

复制代码

PlantUML生成图：

1. @startuml  
3. start  
4. :开始购物;  
6. repeat  
7.   :浏览产品;  
8.   :选择产品;  
9.   :加入购物车;  
10.   :是否继续购物?;  
11. backward:是;  
12. repeat while (继续购物?)  
14. :结算;  
15. :输入地址;  
16. :选择支付;  
17. :确认订单;  
18. :支付成功;  
19. :结束购物;  
21. stop  
23. @enduml  

复制代码

10. 状态图（State Machine Diagram）：

• 描述对象在生命周期内的状态厘革
  
• 展示变乱怎样触发状态转换
  

ASCII图示：

1.       +----------+   注册   +----------+  
2.       |  未注册   |-------->|  待激活   |  
3.       +----------+         +----------+  
4.                                 |  
5.                                 | 激活  
6.                                 v  
7.       +----------+   冻结   +----------+  
8.       |  已冻结   |<--------|  正常     |  
9.       +----------+          +----------+  
10.          |                     ^  
11.          |                     |  
12.          |        解冻          |  
13.          +-------------------->+  

复制代码

PlantUML生成图：

1. @startuml  
3. [*] --> 未注册  
5. 未注册 --> 待激活 : 注册  
6. 待激活 --> 正常 : 激活  
7. 正常 --> 已冻结 : 冻结  
8. 已冻结 --> 正常 : 解冻  
10. @enduml  

复制代码

11. 序列图（Sequence Diagram）：

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

ASCII图示：

1. 用户               界面                 数据库   |                  |                   |  
3. |--登录请求-------->|                   |  
5. |                  |---验证用户信息---->|  
7. |                  |<--返回验证结果-----|  
9. |<--显示登录结果----|                   |  
11. |                  |                   |  

复制代码

PlantUML生成图：

1. @startuml  
3. skinparam sequenceArrowThickness 2  
4. skinparam sequenceParticipant underline  
6. actor 用户  
7. boundary 界面  
8. database 数据库  
10. 用户 -> 界面: 登录请求  
11. activate 界面  
12. 界面 -> 数据库: 验证用户信息  
13. activate 数据库  
14. 数据库 --> 界面: 返回验证结果  
15. deactivate 数据库  
16. 界面 --> 用户: 显示登录结果  
17. deactivate 界面  
19. @enduml

复制代码

12. 通讯图（Communication Diagram,协作图）：

• 也称为协作图
  
• 展示对象之间的交互关系
  
• 强调对象之间的构造结构而非时间次序
  

1.        +-------+  
2.        | 用户   |  
3.        +-------+  
4.           |  
5.       1:登录请求  
6.           |  
7.           v  
8.        +-------+           +-------+  
9.        | 界面   |--2:验证-->| 数据库 |  
10.        +-------+           +-------+  
11.           |  
12.     4:显示结果  
13.           |  
14.           v  
15.        +-------+  
16.        | 用户   |  
17.        +-------+  

复制代码

PlantUML生成图：

1. @startuml  
3. ' 定义对象  
4. object "用户" as user  
5. object "界面" as ui  
6. object "数据库" as db  
8. ' 定义对象间的链接和消息  
9. user --> ui : 1: 登录请求
10. ui --> db : 2: 验证
11. db --> ui : 3: 返回结果
12. ui --> user : 4: 显示结果
14. @enduml

复制代码

13. 交互概览图（Interaction Overview Diagram）：

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

ASCII图示：

1.       +----------------+  
2.       |    开始登录     |  
3.       +----------------+  
4.               |  
5.               v  
6.       +----------------+  
7.       | 验证用户名密码 |  
8.       +----------------+  
9.               |  
10.          [验证成功]  
11.         /          \
12.        /            \
13. +----------------+  +----------------+  
14. | sd 查询用户权限 |  | sd 记录登录失败 |  
15. +----------------+  +----------------+  
16.        \            /  
17.         \          /  
18.          \        /  
19.       +----------------+  
20.       |     结束登录    |  
21.       +----------------+  

复制代码

PlantUML生成图：

1.        
2. @startuml
4. :开始登录;
6. :验证用户名密码;
8. if (验证成功?) then (yes)
9.   :查询用户权限;
10. else (no)
11.   :记录登录失败;
12. endif
14. :验证结束;
16. @enduml

复制代码

14. 时序图（Timing Diagram）：

• 展示对象状态随时间厘革的情况
  
• 特别适用于实时体系的建模
  

和序列图对比：
特性序列图时序图主要关注点对象间的消息交互对象的状态厘革时间轴方向垂直方向（从上到下）水平方向（从左到右）表达重点交互次序和逻辑流程状态持续时间和厘革时刻适用场景分析对象协作和消息流分析实时体系中状态厘革表现方式生命线和消息箭头状态线和状态厘革点 ASCII图示：

1. 状态  
2.      ^  
3. 闲置 |__________                _________  
4.      |          |              |  
5. 忙碌 |          |______________|  
6.      |          |              |  
7.      +---------------------------------> 时间  
8.              收到请求         处理完成  

复制代码

PlantUML生成图：

1. @startuml  
2. concise "状态 " as Server  
4. @0  
5. Server is 闲置  
7. @5  
8. Server is 忙碌  
10. @15  
11. Server is 闲置  
13. @enduml   

复制代码

应用场景

• 需求分析阶段：用例图、活动图
  
• 体系计划阶段：类图、对象图、序列图
  
• 实现阶段：组件图、摆设图
  
• 测试阶段：状态图、时序图
  

对于不同的建模需求，可以选择使用不同范例的UML图表，它们共同资助开发团队更好地明白、计划和实现软件体系。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。