一、UML 简介

UML（统一建模语言）是一种标准化的可视化建模语言，广泛用于软件工程中。它就像是软件设计的”蓝图”，帮助开发团队更好地理解、设计和文档化软件系统。

UML 的主要⽤途

  1. 系统结构描述
    • 类图：展⽰类之间的关系
    • 组件图：描述系统的组件构成
  2. ⾏为建模
    • 序列图：展⽰对象间的交互
    • 活动图：描述业务流程
  3. 需求分析
    • ⽤例图：描述系统功能
    • 状态图：展⽰对象状态变化

学习资源推荐

  1. 在线教程
  2. 推荐书籍
    • 《UML⽤⼾指南》- Grady Booch
    • 《UML精粹》- Martin Fowler
  3. PlantUML 专项资源

二、UML 常⽤图表类型详解

1. 类图（Class Diagram）

类图用于描述系统中的类、接口以及它们之间的关系。

关系表示：

  • 继承：空⼼三⻆形实线
  • 实现：空⼼三⻆形虚线
  • 关联：实线箭头
  • 聚合：空⼼菱形实线
  • 组合：实⼼菱形实线
PlantUML源码
效果预览
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@startuml
class Animal {
  -name: String
  -age: int
  +eat(): void
  +sleep(): void
}

class Dog {
  -breed: String
  +bark(): void
}

class Cat {
  -color: String
  +meow(): void
}

Animal <|-- Dog
Animal <|-- Cat
@enduml

(此处为 PlantUML 渲染效果，实际使用需插件支持)

  • Animal (父类)
  • Dog (继承 Animal)
  • Cat (继承 Animal)

2. 用例图（Use Case Diagram）

用例图描述系统功能及其与外部参与者的关系。

PlantUML源码
效果预览
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@startuml
left to right direction
actor 用户
actor 管理员

rectangle 电子商务系统 {
  用户 --> (浏览商品)
  用户 --> (购买商品)
  用户 --> (查看订单)

  管理员 --> (管理商品)
  管理员 --> (处理订单)
  管理员 --> (用户管理)
}
@enduml

(此处为 PlantUML 渲染效果，实际使用需插件支持)

  • 用户 -> 浏览/购买/查看
  • 管理员 -> 管理/处理/用户管理

3. 时序图（Sequence Diagram）

时序图展示对象之间的交互过程。

PlantUML源码
效果预览
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@startuml
actor 用户
participant "Web客户端" as Client
participant "后端服务" as Server
database "数据库" as DB

用户 -> Client: 发起请求
activate Client

Client -> Server: API调用
activate Server

Server -> DB: 查询数据
activate DB
DB --> Server: 返回数据
deactivate DB

Server --> Client: 返回响应
deactivate Server

Client --> 用户: 显示结果
deactivate Client
@enduml

(此处为 PlantUML 渲染效果，实际使用需插件支持)
展示用户到数据库的完整调用链路。

三、Mermaid 介绍

Mermaid 是一种基于 JavaScript 的图表绘制工具，语法简单，广泛集成于 Markdown 编辑器中（如 Typora、Obsidian、GitHub）。

学习资源推荐

  1. 官⽅资源
  2. 中⽂教程
  3. ⽰例库

1. 流程图（Flowchart）进阶

Mermaid源码
效果预览
1
2
3
4
5
6
7
8
9
10
11
12
graph TD
    Start(开始) --> IsLogin{是否登录?}
    IsLogin -->|是| CheckAuth{检查权限}
    IsLogin -->|否| Login[跳转登录]
    Login --> LoginProcess[登录流程]
    LoginProcess --> IsLogin
    
    CheckAuth -->|有权限| Access[访问数据]
    CheckAuth -->|无权限| Error[提示错误]
    
    Access --> End(结束)
    Error --> End
1
2
3
4
5
6
7
8
9
10
11
12
graph TD
    Start(开始) --> IsLogin{是否登录?}
    IsLogin -->|是| CheckAuth{检查权限}
    IsLogin -->|否| Login[跳转登录]
    Login --> LoginProcess[登录流程]
    LoginProcess --> IsLogin
    
    CheckAuth -->|有权限| Access[访问数据]
    CheckAuth -->|无权限| Error[提示错误]
    
    Access --> End(结束)
    Error --> End

2. ⽢特图（Gantt Chart）

Mermaid源码
效果预览
1
2
3
4
5
6
7
8
9
10
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 需求阶段
    需求分析       :a1, 2024-01-01, 10d
    系统设计       :after a1, 5d
    section 开发阶段
    编码实现       :2024-01-16, 15d
    section 测试阶段
    系统测试       :2024-01-31, 5d
1
2
3
4
5
6
7
8
9
10
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 需求阶段
    需求分析       :a1, 2024-01-01, 10d
    系统设计       :after a1, 5d
    section 开发阶段
    编码实现       :2024-01-16, 15d
    section 测试阶段
    系统测试       :2024-01-31, 5d

3. ER 图（Entity Relationship Diagram）

Mermaid源码
效果预览
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    CUSTOMER {
        string name
        string email
        string address
    }
    ORDER {
        int order_id
        date created_at
        decimal total_amount
    }
    ORDER_ITEM {
        int item_id
        int quantity
        decimal price
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    CUSTOMER {
        string name
        string email
        string address
    }
    ORDER {
        int order_id
        date created_at
        decimal total_amount
    }
    ORDER_ITEM {
        int item_id
        int quantity
        decimal price
    }

4. 状态图（State Diagram）

Mermaid源码
效果预览
1
2
3
4
5
6
7
8
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中 : 开始处理
    处理中 --> 已完成 : 处理完成
    处理中 --> 失败 : 处理异常
    失败 --> 待处理 : 重试
    已完成 --> [*]
    失败 --> [*]
1
2
3
4
5
6
7
8
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中 : 开始处理
    处理中 --> 已完成 : 处理完成
    处理中 --> 失败 : 处理异常
    失败 --> 待处理 : 重试
    已完成 --> [*]
    失败 --> [*]

四、实际应⽤场景

1. 系统架构设计

使用 UML 组件图描述系统架构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@startuml
package "前端层" {
  [Web客户端]
  [移动客户端]
}

package "应用层" {
  [用户服务]
  [订单服务]
  [支付服务]
}

package "数据层" {
  database "用户数据库"
  database "订单数据库"
  database "支付数据库"
}

[Web客户端] --> [用户服务]
[Web客户端] --> [订单服务]
[移动客户端] --> [用户服务]
[移动客户端] --> [订单服务]

[用户服务] --> [用户数据库]
[订单服务] --> [订单数据库]
[支付服务] --> [支付数据库]
@enduml

2. 业务流程建模

使用 Mermaid 流程图描述业务流程：

1
2
3
4
5
6
7
8
9
10
11
12
13
graph TD
    User[用户下单] --> CheckStock{库存检查}
    CheckStock -->|库存充足| CreateOrder[创建订单]
    CheckStock -->|库存不足| OutOfStock[提示缺货]
    
    CreateOrder --> Payment{支付方式}
    Payment -->|微信支付| WeChat[调用微信接口]
    Payment -->|支付宝| AliPay[调用支付宝接口]
    
    WeChat --> UpdateStatus[更新订单状态]
    AliPay --> UpdateStatus
    UpdateStatus --> SendNotify[发送通知]
    SendNotify --> End(结束)

五、⼯具使⽤建议与环境部署

1. ⼯具推荐

类型 推荐工具 适用场景
UML PlantUML + VS Code 插件 本地开发，需安装 Java 和 Graphviz，功能最强。
UML PlantText 在线使用，无需安装，适合临时绘图。
Mermaid VS Code + Mermaid 插件 配合 Markdown 文档编写，实时预览。
Mermaid Mermaid Live Editor 在线调试代码，分享图表。

2. UML 环境部署（VS Code）

  1. 安装必要的软件
    • 安装 Java 运⾏环境 (JRE)。
    • 安装 Graphviz：
      • Windows: 访问 Graphviz官网 下载安装包，或使用 choco install graphviz / winget install graphviz。
      • Mac: brew install graphviz
      • Linux: sudo apt install graphviz
  2. VS Code 插件配置
    • 必装插件：PlantUML。
    • 可选插件：PlantUML Preview。
  3. 配置 PlantUML
    • 打开 VS Code 设置，搜索 plantuml，设置 Graphviz 路径（如有需要）。
  4. 验证安装
    • 创建一个 .puml 文件，输入代码，使用 Alt+D 预览。

3. Mermaid 环境部署（VS Code）

  1. VS Code 插件安装
    • 安装 Markdown Preview Mermaid Support 插件。
    • 安装 Mermaid Markdown Syntax Highlighting 插件（推荐）。
  2. 使用方法
    • 在 Markdown 文件中使用 ```mermaid 代码块。
    • 使用 Ctrl/Cmd + Shift + V 预览 Markdown，图表会自动渲染。

快来参与讨论吧~