vscode-erd插件需依赖外部erd和dot命令才能工作:erd将.er文件转为.dot格式,dot负责渲染为PNG/SVG;二者必须安装并加入系统PATH,或在插件设置中手动指定绝对路径,且.er文件语法须严格符合规范。

vscode-erd 插件必须装 dot 和 erd 命令才能工作
直接安装 vscode-erd 插件后,预览 .er 文件会报错:Command 'erd' not found 或 dot command not found。这不是插件问题,而是它依赖外部命令行工具生成图表。
-
erd是一个轻量级 ERD 解析器,负责把.er文本转成 Graphviz 的.dot格式 -
dot来自 Graphviz 工具包,真正执行图形渲染(输出 PNG/SVG) - 两者都需添加到系统
PATH,否则插件无法调用
推荐安装方式:Windows 用 Chocolatey(choco install graphviz),macOS 用 Homebrew(brew install graphviz),Linux 用 apt/yum 安装 graphviz 包——这会同时提供 dot 和 erd(部分发行版需额外 apt install erd)。
ERD 文件格式和写法要严格匹配插件解析规则
vscode-erd 只认特定语法的 .er 文件,不是任意文本都能渲染。常见错误是复制粘贴网上示例后预览空白或报语法错误。
- 实体定义必须以
entity开头,字段用缩进或冒号分隔,例如:entity User { id: int, name: string } - 关系必须用
relationship显式声明,不能只靠字段名暗示(比如user_id不会自动连到User表) - 不支持中文标识符;空格、括号、换行需符合规范,多行定义建议用大括号包裹
- 文件保存后缀必须是
.er,且 VSCode 当前语言模式需设为ERD(右下角点击切换)
预览失败时先检查插件配置路径是否正确
即使 dot 和 erd 已安装,插件仍可能找不到它们——尤其在非标准路径安装或使用容器/WSL 环境时。
- 打开 VSCode 设置(
Ctrl+,),搜索erd-preview.erdPath和erd-preview.dotPath - 填入绝对路径,例如 Windows:
C:\Program Files\Graphviz2.44\bin\dot.exe,macOS:/opt/homebrew/bin/dot - 路径中不要包含空格或中文;若用 WSL,路径需指向 Linux 子系统内路径,而非 Windows 路径
- 改完设置后重启 VSCode,再试
Ctrl+Shift+P→ERD: Preview Current Window
vscode-erd 只支持静态 ERD,别指望它替代架构设计器
它本质是个预览器,不是设计工具。你不能在图上拖拽修改表结构,也不能导出可编辑的矢量图或同步回数据库。
- 适合场景:快速查看团队共享的
.er文档、验证建模逻辑、嵌入 README 做轻量说明 - 不适合场景:需要实时同步数据库 Schema、添加索引/约束、生成迁移脚本——这些得用 SQL Server 的架构设计器或 DBeaver
- 如果文件里有语法错误,插件只报错不提示具体哪一行,调试时建议用在线 ERD 验证器先校验文本
真正麻烦的从来不是装插件,而是确保 erd 和 dot 在 shell 里能跑通、路径配对、文件格式干净——三者缺一,预览就卡在第一步。


















