在VSCode中编写预览PlantUML图表需安装jebbs发布的PlantUML插件,可选在线或本地(需Graphviz、Java及plantuml.jar)渲染引擎,支持快捷预览(Ctrl+Alt+P)、导出(Ctrl+Alt+D)、自动刷新、代码片段及多图管理。

在 VSCode 中编写和预览 PlantUML 图表非常方便,关键在于正确安装插件、配置环境,并掌握基础语法和快捷操作。
安装 PlantUML 插件
打开 VSCode 的扩展市场(Ctrl+Shift+X),搜索 PlantUML,选择由 jebbs 发布的官方插件(图标为蓝白 UML 图标),点击“安装”。该插件支持语法高亮、代码片段、实时预览和导出功能。
配置 PlantUML 渲染引擎
插件默认使用在线服务(plantuml.com)渲染,但也可本地运行以保障隐私或离线使用:
- 若用在线方式:无需额外配置,新建
.puml文件即可直接预览 - 若用本地方式:需先安装 Graphviz(用于布局)和 Java,再下载 plantuml.jar,然后在 VSCode 设置中搜索 plantuml.jar,填入本地 jar 路径
- 验证是否生效:按 Ctrl+Alt+P,输入 “Preview Diagram”,看能否弹出渲染图
快速编写与预览图表
新建文件,保存为 example.puml,输入基础语法,例如:
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml
光标置于图内,按 Ctrl+Alt+P 即可唤出右侧预览窗;按 Ctrl+Alt+D 可导出为 PNG/SVG/PDF 等格式。
提升效率的小技巧
- 启用自动预览:在设置中开启 PlantUML: Preview On Save,保存即刷新
- 使用代码片段:输入
pu+ Tab 快速生成@startuml ... @enduml框架 - 多图管理:一个 .puml 文件可包含多个独立图表(用
@startuml/@enduml分隔),预览时会列出所有图表供切换 - 错误定位:语法出错时,VSCode 底部状态栏会提示行号和错误类型,常见如括号不匹配、关键字拼写错误
基本上就这些。配置一次,后续写图就像写 Markdown 一样顺手。










