使用VSCode编写和预览PlantUML图表

在VSCode中编写预览PlantUML图表需安装jebbs发布的官方插件，配置在线或本地渲染服务，支持类图、时序图等多种类型，保存即实时预览并可导出图片。

在 VSCode 中编写和预览 PlantUML 图表非常方便，只需安装插件并配置好环境，就能边写代码边实时查看图表效果。

安装 PlantUML 插件

打开 VSCode 扩展市场（Ctrl+Shift+X），搜索 PlantUML，选择由 jebbs 发布的官方插件（图标是蓝绿色 UML 图标），点击安装。重启 VSCode 后即可识别 .puml 或 .plantuml 后缀文件。

配置 PlantUML 渲染服务

该插件默认通过在线服务（https://www.plantuml.com/plantuml）渲染图表，无需本地安装 J*a 或 Graphviz。如需离线使用或自建服务，可在设置中修改 plantuml.server 地址，例如指向本地运行的 PlantUML Server。

• 检查网络是否能访问 plantuml.com（部分企业网络会屏蔽）
• 若想用本地渲染：先安装 J*a 和 PlantUML jar 包，再在设置中填入 plantuml.jar 路径
• 支持的图表类型包括：类图、时序图、活动图、状态机图、组件图等

快速编写与预览

新建一个 example.puml 文件，输入标准 PlantUML 语法：

系统优势： 1、 使用全新ASP.Net＋c#和三层结构开发. 2、 可生成各类静态页面（html,htm,shtm,shtml和.aspx) 3、 管理后台风格模板自由选择，界面精美 4、 风格模板每月更新多套，还可按需定制 5、 独具的缓存技术加快网页浏览速度 6、 智能销售统计，图表分析 7、 集成国内各大统计系统 8、 多国语言支持，内置简体繁体和英语 9、 UTF-8编码，可使用于全球

@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml

按 Ctrl+Alt+D（Windows/Linux）或 Cmd+Alt+D（Mac）即可在右侧弹出实时预览窗口；也可右键选择 “Preview Diagram”。编辑时保存（Ctrl+S）会自动刷新预览。

• 预览窗口支持缩放、拖拽、导出 PNG/SVG（右上角三个点菜单）
• 语法错误会在编辑器底部状态栏提示，悬停在波浪线下可看具体报错
• 支持主题切换，在设置中调整 plantuml.previewTheme

小技巧提升效率

把常用结构做成代码片段（snippets），比如输入 seq 回车就生成标准时序图框架；也可以将 PlantUML 嵌入 Markdown 文件中，配合 Markdown Preview Enhanced 插件直接渲染。

• 在 settings.json 中添加："plantuml.render": "auto" 实现保存即渲染
• 用 @startmindmap 写思维导图，同样支持预览
• 多图表文件可用工作区管理，预览互不干扰

基本上就这些。配置一次，后续写图就像写 Markdown 一样顺手。

以上就是使用VSCode编写和预览PlantUML图表的详细内容，更多请关注其它相关文章！