需配置PlantUML扩展、Graphviz及本地服务:一、安装jebbs的PlantUML扩展;二、brew安装Graphviz并配置dot路径;三、下载plantuml.jar并运行-picoweb启动本地服务,设置server为http://localhost:8080;四、新建.puml文件编写代码,用Cmd+Shift+P调用Preview预览。

如果您希望在 VSCode 中通过编写 PlantUML 代码快速生成类图、时序图等 UML 图形,则需要配置支持 PlantUML 渲染的扩展与后端服务。以下是实现该目标的具体步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装 PlantUML 扩展
VSCode 本身不原生支持 PlantUML 渲染,需借助第三方扩展将 .puml 文件语法高亮并触发图表生成。该扩展是后续所有操作的基础依赖。
1、打开 VSCode,点击左侧活动栏的扩展图标(或按 Cmd+Shift+X)。
2、在搜索框中输入 PlantUML,找到由 jebbs 维护的官方扩展 “PlantUML”。
3、点击“安装”,等待扩展完成加载。
二、配置本地 Graphviz(可选但推荐)
Graphviz 提供 dot 引擎,用于渲染类图、组件图等需要布局计算的 UML 图形。若未安装,部分图形可能无法正确显示或仅支持 PNG 导出。
1、在终端中执行 brew install graphviz(macOS 用户)。
2、验证安装:运行 dot -V,确认输出包含版本信息。
3、在 VSCode 设置中搜索 plantuml.graphviz,将路径设为 /opt/homebrew/bin/dot(Apple Silicon)或 /usr/local/bin/dot(Intel Mac)。
三、启用本地 PlantUML 服务
PlantUML 扩展默认调用在线服务器,存在隐私与网络延迟问题。启用本地服务可离线渲染且保障代码安全。
1、下载最新 plantuml.jar 文件至本地目录,例如 ~/tools/plantuml.jar。
2、在终端中运行:java -jar ~/tools/plantuml.jar -picoweb,启动本地 HTTP 服务(默认端口 8080)。
3、在 VSCode 设置中搜索 plantuml.server,将其值修改为 http://localhost:8080。
四、创建并预览 .puml 文件
新建文件并以 .puml 为后缀,即可触发 PlantUML 扩展的语法识别与实时预览功能。预览窗口支持 SVG/PNG 切换与导出。
1、在 VSCode 中新建文件,保存为 sequence.puml。
2、输入基础时序图代码:@startuml\nAlice -> Bob: Hello\nBob --> Alice: Hi\n@enduml。
3、按下 Cmd+Shift+P,输入 PlantUML: Preview Current Diagram 并回车,右侧将弹出渲染视图。










