PlantUML + vscode 可高效绘制技术架构图，通过文本描述自动生成类图、时序图等，支持版本控制。安装 PlantUML 扩展和 java 环境后，新建 .puml 文件即可编写 DSL 代码，用 Ctrl+Alt+V 预览图表。推荐配置 Graphviz 提升渲染质量，并将图表文件纳入 git 管理，便于团队协作与迭代追溯。
想快速画出清晰的技术架构图？PlantUML + VSCode 是一个高效又轻量的选择。你不需要拖拽控件，只需用文本描述结构，就能自动生成类图、时序图、组件图等常见图表。整个过程可版本控制，修改方便，特别适合程序员和系统设计人员。
安装与基础配置
在 VSCode 中使用 PlantUML 很简单，关键步骤如下：
- 安装 PlantUML 扩展：打开 VSCode 插件市场，搜索 PlantUML 并安装（由 jebbs 提供）
- 确保已安装 Java 环境（PlantUML 基于 Java），或使用本地 Graphviz（用于布局渲染）
- 推荐同时安装 Graphviz (dot) 工具，提升图像渲染质量
- 扩展会自动调用 PlantUML.jar 生成 svg 或 PNG 图像
安装完成后，新建一个文件，命名为 example.puml，VSCode 就会识别 PlantUML 语法并支持预览。
编写第一个架构图
PlantUML 使用简洁的 DSL（领域专用语言）来定义图形。比如，绘制一个简单的组件架构图：
<font face="Consolas, 'Courier New', monospace"> @startuml [用户界面] --> [业务逻辑] [业务逻辑] --> [数据访问] [data access] --> [数据库] note right of [用户界面] Web 页面或 app end note note on link 使用 REST API 调用 end note @enduml </font>
按下 Ctrl + Alt + V（windows）或 Cmd + Option + V（mac），即可在侧边实时预览生成的架构图。你可以看到组件之间的流向和备注信息。
常用图表类型与技巧
PlantUML 支持多种图形，适用于不同场景：
- 组件图：展示系统模块划分与依赖，适合架构设计文档
- 时序图：描述请求在各服务间的调用顺序，调试接口流程很实用
- 类图：定义类、属性和方法，适合 OOP 设计
- 部署图：表示服务部署在哪些节点上，如服务器、容器等
小技巧：
- 用 #颜色 设置组件颜色，例如 [用户界面] #pink
- 使用 skinparam 统一字体或线条样式
- 通过 !include 引入公共样式文件，便于团队统一风格
集成到开发流程中
把 .puml 文件纳入 Git 管理，可以让架构演进有据可查。每次修改文本，都能看出差异。建议做法：
- 在项目 docs/ 目录下存放架构图源文件
- 配合 markdown 使用：“`plantuml 代码块可在 README 中直接渲染（需支持插件）
- 导出为 PNG 或 SVG：右键预览图 → “Export To” → 保存图像用于汇报或文档
基本上就这些。PlantUML 的优势在于“代码即图”，避免图形工具的碎片化问题。你在 VSCode 里写代码的同时，顺手就能维护系统图，效率高还易协作。