PlantUML 全类型图详解（开发者必备）

最新推荐文章于 2026-06-28 14:31:38 发布

原创最新推荐文章于 2026-06-28 14:31:38 发布 · 390 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

知识库

核心定位：PlantUML 是纯文本驱动的统一建模工具，通过简单的文本语法生成各类 UML / 非 UML 图。它的最大优势是版本控制友好（和代码一起存在 Git 中）、集成度极高（支持所有主流 IDE、Markdown、博客）、无需手动拖拽排版，是开发者首选的绘图工具。

本文所有实例均结合你的 Qt/C++ 开发、TCP 聊天室、项目管理 场景，代码可直接复制运行。

一、PlantUML 基础与工具推荐

1. 核心优势

✅ 纯文本编写，和代码一起提交 Git，支持版本对比和回滚
✅ 自动排版，无需手动调整元素位置和连线
✅ 支持所有主流 IDE（VS Code、Qt Creator、IDEA）和 Markdown 编辑器
✅ 语法简单，学习成本低，一次学会终身受用
✅ 完全开源免费，支持本地部署和离线使用

2. 推荐工具

表格

工具	适用场景
VS Code + PlantUML 插件	日常开发首选，实时预览、一键导出
PlantUML 在线编辑器	https://www.plantuml.com/plantuml/ 快速测试
Markdown 编辑器（Typora/Obsidian）	文档和博客中直接嵌入
Qt Creator PlantUML 插件	在 Qt 开发环境中直接查看和编辑

二、结构型图（描述系统静态结构）

用于展示系统中各个元素的静态关系，是系统设计的基础。

1. 类图（Class Diagram）⭐⭐⭐⭐⭐（最常用）

定义：描述系统中的类、类的属性、方法以及类之间的关系（继承、关联、聚合、组合、依赖）。 核心元素：类、属性、方法、继承（--|>）、关联（--）、聚合（--o）、组合（--*）、依赖（..>）。

实例：二进制数据雨项目核心类

plantuml

@startuml
' 样式设置
skinparam class {
    BackgroundColor #f0f8ff
    BorderColor #2c3e50
    ArrowColor #2c3e50
}

' 雨滴类
class RainDrop {
    + qreal x
    + qreal y
    + qreal speed
    + int length
    + QVector<QChar> chars
    + QVector<qreal> alphas
    + bool isActive
    
    + void reset()
    + void update()
}

' 雨滴管理器类
class RainManager {
    - RainConfig m_config
    - QVector<RainDrop> m_drops
    - int m_windowWidth
    - int m_windowHeight
    - int m_columnWidth
    
    + RainManager(const RainConfig& config)
    + void init(int width, int height)
    + void updateFrame()
    + void resize(int width, int height)
    + const QVector<RainDrop>& getDrops() const
}

' 配置结构体
struct RainConfig {
    + int fontSize
    + QString fontFamily
    + QColor headColor
    + QColor bodyColor
    + int fps
    + qreal minSpeed
    + qreal maxSpeed
    + qreal density
}

' 关系定义
RainManager "1" --* "*" RainDrop : 包含多个雨滴
RainManager -- RainConfig : 依赖配置
@enduml

适用场景：

面向对象系统设计，定义类结构和接口
代码架构设计，梳理模块间的依赖关系
技术文档编写，向他人解释代码结构

不适用场景：过于复杂的业务流程、动态交互过程。

2. 组件图（Component Diagram）⭐⭐⭐⭐

定义：描述系统中各个组件的划分以及组件之间的依赖关系，展示系统的模块化结构。 核心元素：组件（[组件名]）、接口、依赖（..>）。

实例：TCP 聊天室系统组件划分

plantuml

@startuml
skinparam component {
    BackgroundColor #e8f4f8
    BorderColor #2980b9
    ArrowColor #2980b9
}

' 客户端组件
package 客户端 {
    [ChatRoomClientUI]
    [ChatRoomCore]
    [ChatRoomClientNetwork]
    [ChatRoomShared]
}

' 服务器组件
package 服务器 {
    [ChatRoomServer]
    [ChatRoomNetwork]
    [ChatRoomShared]
}

' 依赖关系
[ChatRoomClientUI] ..> [ChatRoomCore]
[ChatRoomCore] ..> [ChatRoomClientNetwork]
[ChatRoomClientNetwork] ..> [ChatRoomShared]

[ChatRoomServer] ..> [ChatRoomNetwork]
[ChatRoomNetwork] ..> [ChatRoomShared]

' 网络连接
[ChatRoomClientNetwork] --> [ChatRoomNetwork] : TCP 连接
@enduml

适用场景：

系统模块化设计，划分功能边界
微服务架构设计，展示服务间的调用关系
第三方依赖管理，梳理系统的外部依赖

不适用场景：类级别的详细设计、动态执行流程。

3. 部署图（Deployment Diagram）⭐⭐⭐

定义：描述系统的物理部署结构，展示软件组件在硬件节点上的分布情况。 核心元素：节点（node）、组件、部署关系。

实例：聊天室系统部署结构

plantuml

@startuml
skinparam node {
    BackgroundColor #fdf2e9
    BorderColor #e67e22
    ArrowColor #e67e22
}

node "用户电脑" {
    [ChatRoomClient.exe]
}

node "云服务器" {
    [ChatRoomServer.exe]
    [MySQL 数据库]
}

node "Nginx 反向代理" {
    [Nginx]
}

' 部署关系
[ChatRoomClient.exe] --> [Nginx] : HTTP/HTTPS
[Nginx] --> [ChatRoomServer.exe] : TCP 转发
[ChatRoomServer.exe] --> [MySQL 数据库] : 数据存储
@enduml

适用场景：

系统物理部署方案设计
服务器架构规划，展示硬件和软件的对应关系
网络拓扑设计，说明系统的网络结构

4. 包图（Package Diagram）⭐⭐⭐

定义：描述代码的组织方式，展示包与包之间的依赖关系。 核心元素：包（package）、依赖（..>）。

实例：Qt 项目代码组织结构

plantuml

@startuml
skinparam package {
    BackgroundColor #f0f0f0
    BorderColor #34495e
    ArrowColor #34495e
}

package com.rain.ui {
    [RainWidget]
}

package com.rain.core {
    [RainManager]
    [RainDrop]
    [RainConfig]
}

package com.rain.utils {
    [MathUtils]
    [FileUtils]
}

' 依赖关系
com.rain.ui ..> com.rain.core
com.rain.core ..> com.rain.utils
@enduml

适用场景：

代码目录结构设计
大型项目的模块划分
梳理包之间的依赖关系，避免循环依赖

三、行为型图（描述系统动态行为）

用于展示系统中元素的动态交互和状态变化，是描述系统运行逻辑的核心。

1. 时序图（Sequence Diagram）⭐⭐⭐⭐⭐（最常用）

定义：描述对象之间按照时间顺序的交互过程，展示消息的发送和接收顺序。 核心元素：参与者（actor/participant）、消息（->）、返回值（-->）、循环（loop）、条件分支（alt/else）。

实例：TCP 聊天室用户登录流程

plantuml

@startuml
skinparam sequence {
    ArrowColor #2c3e50
    ActorBorderColor #2c3e50
    ActorBackgroundColor #ecf0f1
    ParticipantBorderColor #2c3e50
    ParticipantBackgroundColor #ecf0f1
}

actor 用户
participant 客户端UI
participant 客户端网络模块
participant 服务器网络模块
participant 服务器业务模块
database 数据库

' 登录流程
用户 -> 客户端UI : 输入用户名密码
客户端UI -> 客户端网络模块 : 发送登录请求
客户端网络模块 -> 服务器网络模块 : TCP 数据包(用户名, 密码)
服务器网络模块 -> 服务器业务模块 : 解析登录请求
服务器业务模块 -> 数据库 : 查询用户信息
数据库 --> 服务器业务模块 : 返回用户信息
alt 登录成功
    服务器业务模块 --> 服务器网络模块 : 登录成功响应
    服务器网络模块 --> 客户端网络模块 : TCP 数据包(成功)
    客户端网络模块 --> 客户端UI : 显示登录成功
    客户端UI --> 用户 : 进入聊天室界面
else 登录失败
    服务器业务模块 --> 服务器网络模块 : 登录失败响应
    服务器网络模块 --> 客户端网络模块 : TCP 数据包(失败)
    客户端网络模块 --> 客户端UI : 显示错误信息
    客户端UI --> 用户 : 提示用户名或密码错误
end
@enduml

适用场景：

接口设计，描述系统间的调用流程
业务流程设计，展示用户操作的完整过程
调试复杂的交互问题，梳理消息的传递顺序

不适用场景：静态结构描述、状态变化过程。

2. 活动图（Activity Diagram）⭐⭐⭐⭐

定义：描述一个活动的执行流程，支持分支、循环、并行等控制结构，类似流程图但更符合 UML 标准。 核心元素：开始（start）、结束（end）、活动（:活动名;）、分支（if/then/else）、并行（fork/join）。

实例：Qt 项目完整构建发布流程

plantuml

@startuml
skinparam activity {
    BackgroundColor #e8f8f5
    BorderColor #1abc9c
    ArrowColor #1abc9c
}

start
:修改源代码;
:执行增量编译;
if (编译成功?) then (是)
    :停止运行中的服务器进程;
    :复制可执行文件到发布目录;
    :重新压缩生成ZIP包;
    :上传发布包到服务器;
    :通知用户更新;
else (否)
    :查看编译错误日志;
    :修复代码;
    :重新执行编译;
endif
end
@enduml

适用场景：

业务流程建模，描述复杂的业务逻辑
工作流设计，展示任务的执行顺序
算法流程描述，解释复杂的计算过程

3. 状态图（State Diagram）⭐⭐⭐

定义：描述一个对象在其生命周期中可能的状态以及状态之间的转换。 核心元素：状态（state）、转换（-->）、事件、动作。

实例：TCP 连接的状态变化

plantuml

@startuml
skinparam state {
    BackgroundColor #fdebd0
    BorderColor #f39c12
    ArrowColor #f39c12
}

[*] --> 关闭状态
关闭状态 --> 监听状态 : 调用listen()
监听状态 --> 已连接状态 : 收到客户端连接请求
已连接状态 --> 数据传输状态 : 开始收发数据
数据传输状态 --> 已连接状态 : 数据传输完成
已连接状态 --> 关闭状态 : 调用close()
关闭状态 --> [*]
@enduml

适用场景：

状态机设计，描述对象的状态变化
协议设计，展示网络协议的状态转换
有限状态机（FSM）的实现设计

4. 用例图（Use Case Diagram）⭐⭐⭐

定义：从用户的角度描述系统的功能需求，展示参与者与用例之间的关系。 核心元素：参与者（actor）、用例（(用例名)）、关联（--）、包含（include）、扩展（extend）。

实例：TCP 聊天室系统用例

plantuml

@startuml
skinparam usecase {
    BackgroundColor #f4ecf7
    BorderColor #8e44ad
    ArrowColor #8e44ad
}

actor 普通用户
actor 管理员

' 用户用例
(登录聊天室)
(发送消息)
(接收消息)
(查看在线用户)
(退出聊天室)

' 管理员用例
(封禁用户)
(删除消息)
(管理聊天室)

' 关系
普通用户 --> (登录聊天室)
普通用户 --> (发送消息)
普通用户 --> (接收消息)
普通用户 --> (查看在线用户)
普通用户 --> (退出聊天室)

管理员 --> (登录聊天室)
管理员 --> (发送消息)
管理员 --> (接收消息)
管理员 --> (封禁用户)
管理员 --> (删除消息)
管理员 --> (管理聊天室)
@enduml

适用场景：

需求分析阶段，梳理系统的功能需求
向非技术人员解释系统的功能
测试用例设计，覆盖所有用户场景

四、架构与系统设计图

1. C4 模型图⭐⭐⭐⭐（现代架构设计首选）

定义：C4 模型是一种分层的架构设计方法，从四个层次（Context、Container、Component、Code）描述系统架构，PlantUML 通过扩展库原生支持。 核心层次：

上下文层（Context）：系统与外部用户和系统的关系
容器层（Container）：系统的高层技术划分（应用、数据库、中间件）
组件层（Component）：容器内部的组件划分
代码层（Code）：组件内部的类和接口

实例：TCP 聊天室系统 C4 容器层

plantuml

@startuml
!include <C4/C4_Container>

' 样式设置
skinparam C4 {
    BackgroundColor #f8f9fa
    BorderColor #343a40
    ArrowColor #343a40
}

Person(user, "用户", "使用聊天室的普通用户")
Person(admin, "管理员", "管理聊天室的管理员")

System_Boundary(chatroom, "TCP聊天室系统") {
    Container(client, "客户端应用", "Qt/C++", "提供用户界面和网络通信")
    Container(server, "服务器应用", "Qt/C++", "处理业务逻辑和消息转发")
    ContainerDb(db, "数据库", "MySQL", "存储用户信息和聊天记录")
}

' 关系
Rel(user, client, "使用")
Rel(admin, client, "管理")
Rel(client, server, "TCP 连接")
Rel(server, db, "读写数据")
@enduml

适用场景：

软件系统架构设计，从高层到低层逐步细化
团队沟通，统一架构语言
技术文档编写，清晰展示系统架构

五、非 UML 实用图（开发高频使用）

PlantUML 不仅支持 UML，还支持很多实用的非 UML 图，是日常开发的利器。

1. ER 图（实体关系图）⭐⭐⭐⭐

定义：描述数据库的表结构以及表之间的关系，是数据库设计的标准工具。 核心元素：实体、属性、主键、外键、关系（一对一、一对多、多对多）。

实例：聊天室数据库设计

plantuml

@startuml
skinparam entity {
    BackgroundColor #f0f8ff
    BorderColor #2980b9
    ArrowColor #2980b9
}

entity 用户 {
    * 用户ID : INT <<PK>>
    --
    * 用户名 : VARCHAR(50)
    * 密码哈希 : VARCHAR(255)
    昵称 : VARCHAR(50)
    注册时间 : DATETIME
    最后登录时间 : DATETIME
}

entity 聊天记录 {
    * 消息ID : INT <<PK>>
    --
    * 发送者ID : INT <<FK>>
    * 接收者ID : INT <<FK>>
    * 消息内容 : TEXT
    * 发送时间 : DATETIME
    消息类型 : INT
}

entity 聊天室 {
    * 聊天室ID : INT <<PK>>
    --
    * 聊天室名称 : VARCHAR(50)
    创建者ID : INT <<FK>>
    创建时间 : DATETIME
}

' 关系
用户 "1" -- "*" 聊天记录 : 发送
用户 "1" -- "*" 聊天记录 : 接收
用户 "1" -- "*" 聊天室 : 创建
@enduml

适用场景：

数据库设计，定义表结构和关系
数据模型设计，展示数据的组织方式
数据库文档编写

2. 甘特图（Gantt Chart）⭐⭐⭐⭐

定义：展示项目的进度计划，清晰显示任务的开始时间、结束时间和依赖关系。 核心元素：任务、里程碑、依赖关系、时间轴。

实例：二进制数据雨项目开发计划

plantuml

@startgantt
skinparam gantt {
    BackgroundColor #f8f9fa
    BorderColor #343a40
    TaskBackgroundColor #e3f2fd
    TaskBorderColor #1976d2
    MilestoneBackgroundColor #ffc107
    MilestoneBorderColor #ff8f00
}

project starts on 2026-06-12
project scale daily

' 任务定义
[需求分析] lasts 2 days
[核心类设计] lasts 2 days
[RainDrop类实现] lasts 1 days
[RainManager类实现] lasts 2 days
[渲染层实现] lasts 2 days
[交互功能实现] lasts 1 days
[性能优化] lasts 2 days
[测试与修复] lasts 2 days
[打包发布] lasts 1 days

' 依赖关系
[核心类设计] starts at [需求分析]'s end
[RainDrop类实现] starts at [核心类设计]'s end
[RainManager类实现] starts at [RainDrop类实现]'s end
[渲染层实现] starts at [RainManager类实现]'s end
[交互功能实现] starts at [渲染层实现]'s end
[性能优化] starts at [交互功能实现]'s end
[测试与修复] starts at [性能优化]'s end
[打包发布] starts at [测试与修复]'s end

' 里程碑
milestone 项目启动 at [需求分析]'s start
milestone 版本发布 at [打包发布]'s end
@endgantt

适用场景：

项目进度管理，制定开发计划
任务分配，明确每个人的工作内容和时间
项目汇报，展示项目的整体进度

3. 思维导图（Mind Map）⭐⭐⭐

定义：用于头脑风暴和知识整理，以树状结构展示信息。 核心元素：根节点、子节点、分支。

实例：Qt 开发技术栈思维导图

plantuml

@startmindmap
skinparam mindmap {
    BackgroundColor #f8f9fa
    NodeBackgroundColor #e3f2fd
    NodeBorderColor #1976d2
    ArrowColor #1976d2
}

* Qt开发技术栈
** 核心模块
*** Core
*** GUI
*** Network
*** Widgets
*** QML
** 构建系统
*** qmake
*** CMake
** 工具
*** Qt Creator
*** Designer
*** Linguist
** 第三方库
*** Qt Charts
*** Qt Data Visualization
*** pyqtgraph
@endmindmap

适用场景：