推荐用 dependency-cruiser 生成 SVG/PNG 图：执行 npx dependency-cruiser@latest --init 初始化，再运行 npx depcruise --output-type dot src/ | dot -Tpng -o deps.png（需预装 Graphviz），注意配置 doNotFollow 或 exclude 避免循环引用卡死。
用 npm ls 或 yarn list 导出依赖树文本
VSCode 本身不内置依赖图渲染能力，得先拿到结构化数据。直接在终端运行 npm ls --depth=3 --all（--all 包含可选依赖，--depth 控制层级避免爆炸）能输出带缩进的树状文本；yarn list --depth=3 效果类似。注意别漏掉 --json 参数——它输出 JSON 格式，后续工具更易解析，但默认会包含大量元信息，建议加 --silent 避免混入警告日志。
安装 dependency-cruiser 生成可视化 SVG/PNG
比手写解析脚本快得多，且支持跨语言（TS/JS/ESM/CJS）。执行 npx dependency-cruiser@latest --init 生成默认配置，再运行 npx depcruise --output-type dot src/ | dot -Tpng -o deps.png（需提前装 Graphviz）。关键点：dot 命令对循环引用极其敏感，一旦模块 A → B → A，就会卡死或报 error: cycle detected；此时必须在 .dependency-cruiser.js 中配 doNotFollow 过滤掉 node_modules 或特定路径，或启用 exclude 跳过可疑循环模块。
在 VSCode 中用 Project Dependencies Viewer 插件实时预览
这个插件（ID：grunow.project-dependencies-viewer）能直接读取 package.json 和 import 语句，无需导出中间文件。但它只分析静态 import，对 require() 动态路径、import() 字符串拼接、eval 加载的模块完全不可见。启用后右键点击文件 → “Show Dependencies” 才触发扫描，首次加载慢（尤其大项目），且不支持点击跳转到被引用文件——只是单向展示“当前文件引了谁”，不能反查“谁引了当前文件”。
用 madge 检测循环依赖并导出交互式 HTML 图
madge 对循环检测更鲁棒，命令 npx madge --circular --format json src/ 可精准定位循环链路。想看图形？用 npx madge --image deps.png --layout dot src/，但 PNG 是静态图；更实用的是 npx madge --html deps.html src/——生成的 HTML 支持缩放、拖拽、鼠标悬停显示路径，且默认高亮所有循环节点。不过它默认只识别 CommonJS 的 require，若项目全用 ESM，得加 --extensions js,ts,jsx,tsx 显式声明后缀，否则大量模块会被忽略。
真正麻烦的不是生成图，而是图里一堆 node_modules 内部依赖把关键业务链路淹没了。每次生成前，务必用配置文件过滤掉第三方包，否则你盯着图看了十分钟，可能连自己写的两个核心模块在哪都没找到。
