VSCode插件精选：4款高效UML绘图工具
VS Code 作为开发者常用的轻量编辑器，通过插件可轻松实现 UML 图（时序图、类图、用例图等）的编写、预览与导出，无需切换专业绘图工具。以下是 4 款主流且实用的插件，覆盖 “文本编写”“可视化拖拽”“代码反向生成” 等不同场景，附核心功能、使用方式及优缺点，方便按需选择：
一、核心推荐：文本编写型（开发者首选，高效灵活）
这类插件通过 “特定语法 + 实时预览” 生成 UML 图，无需拖拽，适合习惯用代码 / 文本快速设计的开发者，支持版本控制（UML 代码可存入 Git）。
1. PlantUML（最全能，支持全类型 UML 图）
核心功能
- 支持 时序图、类图、用例图、活动图、组件图、状态图 等几乎所有 UML 类型，还能画流程图、架构图；
- 基于文本语法编写，实时渲染预览，支持导出 PNG、SVG、PDF 等格式；
- 可集成 Git 版本控制，多人协作编辑 UML 文本文件；
- 支持自定义样式（颜色、字体、布局），甚至嵌入数学公式、图片。
使用方式
- 安装插件：搜索 “PlantUML”（作者：jebbs）；
- 依赖配置：需安装 Graphviz（渲染引擎），官网下载后配置环境变量（Windows 需添加
Graphviz\bin路径）； - 新建文件：创建
.puml后缀文件，输入语法（示例如下），右键选择 “Preview PlantUML” 打开预览窗格；plantuml
// 时序图示例 title 用户登录时序图 actor 用户 participant 前端页面 participant 后端服务 participant 数据库用户 -> 前端页面: 输入账号密码 前端页面 -> 后端服务: 提交登录请求（携带加密参数） 后端服务 -> 数据库: 查询用户信息 数据库 --> 后端服务: 返回用户数据（存在） 后端服务 --> 前端页面: 返回登录成功（含 Token） 前端页面 --> 用户: 显示登录成功 - 导出：预览窗格右键选择 “Export”，选择格式保存。
优缺点
- 优点：功能全、语法简洁、支持版本控制、免费开源；
- 缺点：需记基础语法（入门成本低，有语法提示），依赖 Graphviz 配置。
2. Mermaid（轻量无依赖，适合快速草图）
核心功能
- 支持 时序图、类图、流程图、状态图、甘特图，语法比 PlantUML 更简洁；
- 无额外依赖（内置渲染引擎），安装即⽤，实时预览响应快；
- 支持导出 PNG、SVG，可嵌入 Markdown（很多平台如 GitHub、Notion 原生支持 Mermaid 语法）。
使用方式
- 安装插件：搜索 “Mermaid”（作者：Markdown Preview Mermaid Support，或直接安装 “Mermaid Editor”）；
- 新建文件：创建
.md或.mermaid文件，输入语法（示例如下），右键 “预览” 即可； -
// 类图示例 classDiagram class User {- id: String- name: String+ login(): Boolean+ getInfo(): Object } class Order {- orderId: String- amount: Number+ createOrder(): Boolean } User "1" --> "*" Order : 拥有 - 导出：预览窗格右键 “Save as” 导出图片。
优缺点
- 优点：轻量无依赖、语法简单、支持 Markdown 嵌入、免费；
- 缺点：支持的 UML 类型较少（无组件图、部署图），复杂图样式定制性弱。
二、可视化拖拽型（新手友好，所见即所得）
这类插件提供图形化编辑器，通过拖拽元素生成 UML 图，无需记语法，适合快速画草图或非技术人员协作。
3. Draw.io Integration（原 diagrams.net，免费无广告）
核心功能
- 支持 时序图、类图、用例图、架构图、流程图 等，内置海量 UML 标准元素；
- 纯拖拽操作，所见即所得，支持自定义元素样式、布局；
- 支持导出 PNG、SVG、PDF、JSON 等格式，可保存到本地 / 云端（Google Drive、OneDrive）；
- 无水印、无广告，完全免费，支持离线使用。
使用方式
- 安装插件：搜索 “Draw.io Integration”（作者：Henning Dieterichs）；
- 打开编辑器：在 VS Code 中按
Ctrl+Shift+P，输入 “Draw.io: New Diagram”，选择保存路径和画布大小； - 绘制：左侧拖入 UML 元素（如 “类”“时序图参与者”），拖拽连线，双击编辑文本；
- 导出：点击编辑器顶部 “File”→“Export as” 选择格式保存。
优缺点
- 优点：新手友好、拖拽高效、无水印免费、支持多格式导出；
- 缺点：不支持文本编写（灵活性弱），复杂图的排版需手动调整。
4. UMLet（轻量专业，适合 UML 标准图）
核心功能
- 专注 UML 标准图，支持 类图、时序图、用例图、活动图、状态图，元素完全符合 UML 规范；
- 轻量简洁，拖拽 + 快捷键操作（如
Ctrl+R快速添加关系），支持自定义模板； - 支持导出 PNG、SVG、PDF，可保存为
.uxf格式（UMLet 原生格式）。
使用方式
- 安装插件：搜索 “UMLet”（作者：UMLet）；
- 打开编辑器：按
Ctrl+Shift+P，输入 “UMLet: Open UMLet Editor”； - 绘制：左侧选择 UML 元素拖拽到画布，右键元素编辑属性（如类的属性、方法），拖拽连线建立关系；
- 导出：点击编辑器顶部 “Export” 选择格式。
优缺点
- 优点：UML 标准性强、操作简洁、轻量无广告、免费；
- 缺点：支持的图类型较少（无架构图、流程图），样式定制性不如 Draw.io。
三、代码反向生成型（从代码自动生成类图，开发者高效工具）
这类插件可解析现有代码（Java、Python、TypeScript 等），自动生成类图，适合梳理已有项目的架构。
5. CodeUML（支持多语言代码反向生成）
核心功能
- 支持 Java、Python、TypeScript、C# 等语言，解析代码后自动生成类图（含属性、方法、继承 / 关联关系）；
- 支持手动调整类图布局，导出 PNG、SVG；
- 可直接在 VS Code 中关联代码文件，点击类图元素跳转至对应代码。
使用方式
- 安装插件：搜索 “CodeUML”（作者：Ri Xu）；
- 生成类图：打开代码文件（如 Java 类），右键选择 “CodeUML: Generate UML”，选择生成范围（单个文件 / 整个项目）；
- 预览与导出：在生成的类图预览窗格中调整布局，右键导出图片。
优缺点
- 优点：代码反向生成高效、支持多语言、关联代码跳转；
- 缺点：仅支持类图，不支持其他 UML 类型，复杂项目解析速度较慢。
三、插件选择总结
| 场景需求 | 推荐插件 | 核心优势 |
|---|---|---|
| 开发者写全类型 UML 图 | PlantUML | 功能全、支持版本控制 |
| 快速画草图、嵌入 Markdown | Mermaid | 轻量无依赖、语法简单 |
| 新手 / 非技术人员拖拽绘图 | Draw.io Integration | 无水印免费、操作友好 |
| 梳理现有项目架构（类图） | CodeUML | 代码反向生成、关联代码 |
| 严格遵循 UML 标准 | UMLet | 标准性强、轻量简洁 |
如果是开发团队协作、需要版本控制，优先选 PlantUML；如果是快速画草图、嵌入文档，选 Mermaid；如果是新手或非技术人员，选 Draw.io；如果需要从代码生成类图，选 CodeUML。所有推荐插件均为免费，可根据实际需求组合使用（如 PlantUML 画复杂图 + Draw.io 画快速草图）。