0

0

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

P粉986688829

P粉986688829

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

|

597人浏览过

|

来源于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 实际位置调整)。

名品购物网店系统
名品购物网店系统

适合品牌专卖店专用,从前台的美工设计就开始强调视觉形象,有助于提升商品的档次,打造网店品牌!后台及程序核心比较简洁,着重在线购物,去掉了繁琐的代码及垃圾程式,在结构上更适合一些中高档的时尚品牌商品展示. 率先引入语言包机制,可在1小时内制作出任何语言版本,程序所有应用文字皆引自LANG目录下的语言包文件,独特的套图更换功能,三级物品分类,购物车帖心设计,在国内率先将购物车与商品显示页面完美结合,完

下载

三、验证 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工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

588

2023.11.27

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

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

223

2023.12.07

json数据格式
json数据格式

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

419

2023.08.07

json是什么
json是什么

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

535

2023.08.23

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

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

311

2023.10.13

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

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

77

2025.09.10

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

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

599

2023.10.24

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

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

2151

2024.10.24

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Kotlin 教程
Kotlin 教程

共23课时 | 3万人学习

C# 教程
C# 教程

共94课时 | 7.9万人学习

Java 教程
Java 教程

共578课时 | 53.3万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号