用写代码的方式画图 - 试下 PlantUML 吧 | 京东云技术团队
字数 939 2025-08-10 22:27:01

PlantUML 使用指南：通过代码绘制专业图表

1. PlantUML 简介

PlantUML 是一个开源组件，始于2009年，采用GPL协议发布，允许通过编写代码的方式快速创建各种图表。主要特点包括：

  • 支持多种图表类型：UML图、流程图、时序图、架构图等
  • 文本格式便于版本控制（可diff）
  • 本地渲染，保障数据隐私
  • 30+内置主题，样式丰富可定制
  • 学习成本低，效率高

2. 支持的图表类型

2.1 UML类图

@startuml
class Car {
  -make: String
  -model: String
  +startEngine()
  +stopEngine()
}

class Engine {
  -type: String
  +start()
  +stop()
}

Car *-- Engine
@enduml

2.2 活动图

@startuml
start
:初始化系统;
if (检查配置?) then (是)
  :加载配置文件;
else (否)
  :使用默认配置;
endif
:启动服务;
stop
@enduml

2.3 流程图

@startuml
start
:用户登录;
repeat
  :输入用户名和密码;
  :验证凭证;
repeat while (验证失败?) is (是)
->否;
:显示欢迎页面;
stop
@enduml

2.4 时序图

@startuml
actor 用户 as U
participant "Web前端" as W
participant "API服务" as A
participant "数据库" as D

U -> W: 提交订单
W -> A: POST /orders
A -> D: INSERT订单
D --> A: 成功
A --> W: 201 Created
W --> U: 显示成功
@enduml

2.5 思维导图

@startuml
mindmap {
  * 核心功能
  ** 用户管理
  *** 注册
  *** 登录
  *** 权限控制
  ** 订单系统
  *** 创建订单
  *** 支付流程
  *** 退款处理
}
@enduml

3. 安装与配置

3.1 VS Code 安装

  1. 打开扩展市场
  2. 搜索"PlantUML"
  3. 安装最新版本插件
  4. 创建或打开.puml文件即可实时预览

3.2 IntelliJ IDEA 安装

  1. 打开插件市场(Preferences > Plugins)
  2. 搜索"PlantUML"
  3. 安装并重启IDE
  4. 支持.puml文件编辑和预览

3.3 命令行使用

# 下载plantuml.jar
java -jar plantuml.jar diagram.puml
# 生成PNG图片

3.4 在线编辑器

官网提供在线编辑功能，适合快速尝试：
https://plantuml.com/

4. 核心语法详解

4.1 时序图语法

@startuml
autonumber
title 认证流程时序图

actor 用户 as U
boundary "登录页面" as L
control "认证服务" as A
database "用户数据库" as D

U -> L: 输入凭证
L -> A: 提交认证请求
A -> D: 查询用户记录
D --> A: 返回用户数据
alt 认证成功
    A --> L: 返回令牌
    L --> U: 跳转首页
else 认证失败
    A --> L: 返回错误
    L --> U: 显示错误
end
@enduml

4.2 用例图语法

@startuml
left to right direction
actor 客户 as C
actor 管理员 as A

rectangle 电商系统 {
  (下订单) as (ORDER)
  (支付) as (PAY)
  (管理商品) as (MANAGE)
  
  C --> ORDER
  C --> PAY
  A --> MANAGE
}
@enduml

4.3 类图语法

@startuml
class Order {
  -id: String
  -createTime: Date
  -status: OrderStatus
  +addItem()
  +calculateTotal()
  +submit()
}

class OrderItem {
  -productId: String
  -quantity: int
  -price: BigDecimal
}

enum OrderStatus {
  CREATED
  PAID
  SHIPPED
  COMPLETED
}

Order "1" *-- "n" OrderItem
Order --> OrderStatus
@enduml

4.4 部署图语法

@startuml
node "Web服务器" {
  component "Nginx" as nginx
  component "Web应用" as web
}

node "数据库服务器" {
  database "MySQL" as mysql
}

cloud "CDN" {
  component "静态资源" as cdn
}

nginx -> web: 反向代理
web -> mysql: JDBC
web -> cdn: 上传资源
@enduml

5. 高级功能

5.1 主题应用

@startuml
!theme mars

title 主题示例
header 页眉
footer 页脚

actor 用户
participant 系统

用户 -> 系统: 请求
系统 --> 用户: 响应
@enduml

5.2 C4模型架构图

@startuml
!include <C4/C4_Container>

title 网银系统容器图

Person(customer, "客户", "银行客户有自己的私人银行账号")

System_Boundary(c1, "网银") {
  Container(web_app, "Web应用", "Java, Spring MVC", "传递静态内容和网银SPA")
  Container(spa, "单页应用", "JavaScript, Angular", "通过浏览器对用户提供所有的网银功能")
  ContainerDb(database, "数据库", "SQL数据库", "存储用户的注册信息,随机认证密码,访问日志等")
  Container(backend_api, "API应用", "Java, Docker容器", "通过API提供网银功能")
}

System_Ext(email_system, "邮件系统", "网络软件交换系统")
System_Ext(banking_system, "Mainframe银行系统", "存储所有的核心客户,账号,事务银行信息")

Rel(customer, web_app, "使用", "HTTPS")
Rel(customer, spa, "使用", "HTTPS")
Rel(spa, backend_api, "使用", "异步, JSON/HTTPS")
Rel_Back_Neighbor(database, backend_api, "读写", "同步, JDBC")
Rel_Back(customer, email_system, "发送邮件到")
Rel_Back(email_system, backend_api, "发送邮件", "SMTP")
Rel_Neighbor(backend_api, banking_system, "使用", "同步/异步, XML/HTTPS")
@enduml

6. 实用技巧

  1. 自动编号：在时序图中使用autonumber自动为消息添加序号
  2. 分组：使用alt/else、opt、loop等关键词创建逻辑分组
  3. 注释：使用note left/right添加注释
  4. 颜色：使用#color语法自定义元素颜色
  5. 布局：使用left to right direction控制方向

7. 学习资源

  1. 官方文档：https://plantuml.com/
  2. 示例库：https://github.com/plantuml/plantuml/tree/master/examples
  3. C4-PlantUML：https://github.com/plantuml-stdlib/C4-PlantUML

通过PlantUML，开发者可以专注于图表内容的表达而非图形编辑，大幅提升文档编写效率。建议从简单的时序图或类图开始，逐步掌握更复杂的图表类型。

PlantUML 使用指南：通过代码绘制专业图表 1. PlantUML 简介 PlantUML 是一个开源组件，始于2009年，采用GPL协议发布，允许通过编写代码的方式快速创建各种图表。主要特点包括： 支持多种图表类型：UML图、流程图、时序图、架构图等 文本格式便于版本控制（可diff） 本地渲染，保障数据隐私 30+内置主题，样式丰富可定制 学习成本低，效率高 2. 支持的图表类型 2.1 UML类图 2.2 活动图 2.3 流程图 2.4 时序图 2.5 思维导图 3. 安装与配置 3.1 VS Code 安装 打开扩展市场 搜索"PlantUML" 安装最新版本插件 创建或打开.puml文件即可实时预览 3.2 IntelliJ IDEA 安装 打开插件市场(Preferences > Plugins) 搜索"PlantUML" 安装并重启IDE 支持.puml文件编辑和预览 3.3 命令行使用 3.4 在线编辑器 官网提供在线编辑功能，适合快速尝试： https://plantuml.com/ 4. 核心语法详解 4.1 时序图语法 4.2 用例图语法 4.3 类图语法 4.4 部署图语法 5. 高级功能 5.1 主题应用 5.2 C4模型架构图 6. 实用技巧 自动编号 ：在时序图中使用 autonumber 自动为消息添加序号 分组 ：使用 alt/else 、 opt 、 loop 等关键词创建逻辑分组 注释 ：使用 note left/right 添加注释 颜色 ：使用 #color 语法自定义元素颜色 布局 ：使用 left to right direction 控制方向 7. 学习资源 官方文档：https://plantuml.com/ 示例库：https://github.com/plantuml/plantuml/tree/master/examples C4-PlantUML：https://github.com/plantuml-stdlib/C4-PlantUML 通过PlantUML，开发者可以专注于图表内容的表达而非图形编辑，大幅提升文档编写效率。建议从简单的时序图或类图开始，逐步掌握更复杂的图表类型。