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 画快速草图）。