推荐！高效灵活的、可集成的、文本化绘图工具 —— PlantUML

背景

最近有绘制流程图需求，之前一直用的是 mermaid.live/ 免费额度用完之后，又又又要充值！

且不说这穷病，每次 .live 编辑完，再 down 下来，挪到平台上面，很是繁琐。

于是乎，还得回顾初心：有没有免费的、可集成的 UML 工具，那 GPT 首推的就是 ------ PlantUML

传送门：plantuml.com/zh/

先来看本瓜结合大模型，分分钟输出的："上身"效果：

在线运行：plantuml.com/running ，效果还是非常 nice 的！

首推 PlantUML，基于它 3 大优势：

优势1：版本控制友好

使用纯文本语法描述图形，无需依赖复杂的图形界面。借助文本文件的方式，可以轻松地将图形描述纳入版本管理系统（如 Git），便于团队协作与代码审查。------ 文本化描述降低了格式混乱和二进制文件版本合并冲突的风险。

优势2：自动化集成

支持在持续集成（CI）流水线中自动生成最新的设计图。可以在编写代码的同时，通过脚本自动渲染生成 SVG 或 PNG 格式的图像，极大提升文档与开发过程的一致性。

优势3：多种图形表达

不仅支持 UML 类图、时序图、活动图等常见图形，还能生成架构图、流程图、状态图等。通过灵活的语法和样式自定义，可以绘制出清晰、专业的图表。

PlantUML 还提供了丰富的皮肤参数，让你可以根据企业 CI/CD 标准或个人喜好自定义颜色、边框和布局。

接下来，来看看它的使用！👍

使用

1、基础语法结构

PlantUML 图表总是以 @startuml 开始，以 @enduml 结束。

中间的部分就是图形描述语法。下面以一个简单的时序图为例：

less 复制代码

@startuml
actor 用户
participant "系统前端" as Frontend
participant "业务服务器" as Backend

用户 -> Frontend: 发起请求
Frontend -> Backend: 转发请求
Backend --> Frontend: 返回数据
Frontend --> 用户: 展示结果
@enduml

2、图形类型

常用类型有，比如：UML 类图 描述类、接口、继承、关联关系；流程图和活动图

利用 start、stop、if 等关键字构建流程；状态图 描述对象状态的转换，适合展示系统内部状态变化等等

scala 复制代码

@startuml
class Animal {
    +String name
    +eat()
}

class Dog extends Animal {
    +bark()
}

Animal <|-- Dog
@enduml

scss 复制代码

@startuml
start
:初始化系统;
if (是否登录?) then (是)
  :显示首页;
else (否)
  :显示登录页;
endif
stop
@enduml

less 复制代码

@startuml
[*] --> Idle
Idle --> Processing : 触发请求
Processing --> Idle : 完成请求
Processing --> Error : 出现错误
Error --> Idle : 重试
@enduml

PlantUML 支持 skinparam 进行全局样式配置。例如，设置字体、颜色和边框样式可以让图表风格统一

4、集成

许多现代代码编辑器都支持 PlantUML 插件，例如 VSCode、IntelliJ IDEA 和 Sublime Text。通过插件，你可以在编辑器内实时预览 UML 图，不必频繁切换到外部工具。

利用 CI 工具（如 Jenkins、GitLab CI），你可以在代码更新时自动生成最新的 PlantUML 图，并嵌入项目文档。

PlantUML 图还可以嵌入 Markdown 文件或 Wiki 系统中。许多平台（如 GitHub、Confluence）支持通过扩展插件渲染 PlantUML 代码，从而实现文档与图表的完美融合。

小结

综上，基于纯文本的描述方式，开发者、架构师和团队的首选绘图工具 ------ PlantUML

赶紧的，部署来尝尝咸蛋 ------ # 快速入门指南