讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode中的PlantUML:用代码画出架构图

阿枫酱_2655

阿枫酱_2655

发布时间:2025-12-30 11:22:33

|

837人浏览过

|

来源于php中文网

原创

需安装PlantUML插件、Graphviz及配置本地渲染路径,确保文件为.puml格式并含@startuml/@enduml,使用UTF-8无BOM编码且语法正确。

vscode中的plantuml:用代码画出架构图

如果您在 VSCode 中使用 PlantUML 插件编写架构图代码,但预览窗口未渲染图形或显示空白,则可能是由于插件配置缺失、Graphviz 未安装或语法错误导致。以下是解决此问题的步骤:

本文运行环境:MacBook Air,macOS Sequoia。

一、确认并安装 PlantUML 插件与依赖

VSCode 中的 PlantUML 渲染依赖于插件本身及后端渲染引擎(如 Graphviz 或 PlantUML 服务器)。仅安装插件不足以启用本地绘图功能,必须确保底层工具链完整。

1、打开 VSCode 扩展市场,搜索 PlantUML,安装由 jebbs 发布的官方插件。

2、在终端中执行 dot -V 验证 Graphviz 是否已安装;若提示命令未找到,则需通过 Homebrew 安装:brew install graphviz。

3、重启 VSCode,确保插件激活状态为已启用。

二、配置 VSCode 的 PlantUML 设置项

默认情况下,PlantUML 插件可能未启用本地 Graphviz 渲染,需手动指定可执行路径,否则会回退至在线服务(受网络与防火墙限制)。

1、按下 Cmd + , 打开设置界面,在搜索框输入 plantuml.render。

2、将 PlantUML: Render 设置为 local。

3、继续搜索 plantuml.java,点击 Edit in settings.json,添加如下行:"plantuml.java": "/opt/homebrew/opt/openjdk/bin/java"(路径需根据本机 OpenJDK 实际位置调整)。

三、验证 PlantUML 代码语法与文件关联

PlantUML 文件必须以正确扩展名保存且首行声明语言类型,否则插件无法识别为可渲染源码,预览功能将失效。

1、新建文件,保存为 architecture.puml(扩展名必须为 .puml 或 .pu)。

2、在文件顶部第一行写入 @startuml,末尾写入 @enduml。

3、在两者之间插入标准架构图示例,例如:[Web Server] --> [API Gateway]。

四、启用实时预览并排除编码干扰

VSCode 默认不自动开启预览窗格,需手动触发;同时,UTF-8 BOM 或非 ASCII 字符编码可能导致解析中断,需统一为无 BOM 的 UTF-8。

1、右键编辑器内 PlantUML 文件内容,选择 Preview PlantUML,或使用快捷键 Cmd + Shift + P 后输入 PlantUML: Preview Current Diagram。

2、点击右下角编码标识(如 UTF-8),选择 Reopen with Encoding → UTF-8,确保无 BOM。

3、检查文件中是否混用全角标点(如中文顿号、引号),全部替换为半角符号。

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

相关专题

更多
504 gateway timeout怎么解决
504 gateway timeout怎么解决

504 gateway timeout的解决办法:1、检查服务器负载;2、优化查询和代码;3、增加超时限制;4、检查代理服务器;5、检查网络连接;6、使用负载均衡;7、监控和日志;8、故障排除;9、增加缓存;10、分析请求。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

754

2023.11.27

default gateway怎么配置
default gateway怎么配置

配置default gateway的步骤:1、了解网络环境;2、获取路由器IP地址;3、登录路由器管理界面;4、找到并配置WAN口设置;5、配置默认网关;6、保存设置并退出;7、检查网络连接是否正常。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

357

2023.12.07

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2115

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3222

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1096

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3679

2025.09.10

常见的编码方式
常见的编码方式

常见的编码方式有ASCII编码、Unicode编码、UTF-8编码、UTF-16编码、GBK编码等。想了解更多编码方式相关内容,可以阅读本专题下面的文章。

1448

2023.10.24

a和A对应的ASCII码数值
a和A对应的ASCII码数值

a的ascii码是65,a的ascii码是97;ascii码表中,一个字母的大小写数值相差32,一般知道大写字母的ascii码数值,其对应的小写字母的ascii码数值就算出来了,是大写字母的ascii码数值“+32”。想了解更多相关的内容,可阅读本专题下面的相关文章。

5247

2024.10.24

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

20

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
dev.java 官方:Learn Java
dev.java 官方:Learn Java

共0课时 | 0人学习

Java JDBC数据库连接官方教程
Java JDBC数据库连接官方教程

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn