VSCode 依赖图需外部工具生成，常见问题包括Graphviz未安装、depcruise输出异常、SVG渲染失败及插件功能局限；推荐用madge生成可交互HTML图并严格过滤node_modules。
VSCode 本身不生成依赖图，所有「可视化依赖关系图」都依赖外部工具产出结构化数据，再由 Graphviz 或 HTML 渲染器绘图；插件只是快捷入口，不是点一下就出图的全自动方案。
dependency-cruiser 生成 SVG 时 dot 命令报错 command not found: dot
这是最常见断点：Graphviz 没装，或没进 PATH。
- macOS 执行
brew install graphviz，装完验证：dot -V应输出版本号 - Windows 去 graphviz.org 下安装包，安装时勾选「Add Graphviz to the system PATH」；若已装但报错，手动把类似
C:\Program Files\Graphviz2.44\bin加进系统环境变量 PATH - Linux（如 Ubuntu）用
sudo apt-get install graphviz
npx depcruise src/ --output-type dot | dot -Tsvg > deps.svg 管道链失败
这个命令链有三个典型断裂位置，按顺序排查：
-
depcruise输出为空 → 检查src/路径是否存在、是否被.dependency-cruiser.js中的exclude或doNotFollow规则误杀（比如写了node_modules却漏了斜杠，变成node_modules匹配到了my-node_modules） -
dot报syntax error in line X→ 几乎肯定是depcruise的警告日志混进了 dot 数据流，加--silent参数：npx depcruise --silent --output-type dot src/ | dot -Tsvg > deps.svg - 生成的 SVG 打开是空白 → 浏览器渲染超限（尤其大项目），改用 PNG：
dot -Tpng；或加--max-depth 2控制图深度，避免爆炸式展开
VSCode 插件 View Dependencies 只显示单向引用且不过滤 node_modules
右键文件 → View Dependencies 看起来快，但能力很窄：
- 它只展示「当前文件 import 了谁」，不展示「谁 import 了当前文件」——反向引用得用
Shift+Alt+F12（Find All References） - 对
import()动态路径、require('' + name)、eval加载的模块完全不可见 - 它不读取项目里的
.dependency-cruiser.js，所有过滤逻辑（如exclude: ['node_modules']）全部失效，第三方包全塞进图里，核心业务模块反而被淹没 - 首次加载慢，大项目可能卡顿十几秒；图中节点可点击跳转，但没有缩放、拖拽、悬停提示路径等基本交互
madge 生成的 HTML 图比 SVG 更实用
如果目标是快速识别循环依赖和整体流向，madge 的 HTML 输出更省事也更可靠：
- 命令：
npx madge --html deps.html --layout dot src/，打开deps.html即可缩放、拖拽、悬停看完整路径 - 循环节点自动高亮（不用肉眼找闭环箭头），比 SVG 直观得多
- ESM 项目务必加
--extensions js,ts,jsx,tsx，否则import全被忽略（它默认只认.js） - 它默认不扫
node_modules，天然避开噪音；若要排除特定内部包（如@myorg/utils），需配合--include-only '^(?!@myorg/utils)'这类正则
真正麻烦的从来不是跑通命令，而是图里堆满 node_modules 节点后，你根本找不到自己写的那几个核心模块在哪——每次生成前，必须确认配置里已显式过滤掉第三方依赖，否则图就等于没画。
