VS Code 无法自动生成真正靠谱的代码逻辑图；现有工具仅提供静态结构快照，适用于摸清模块边界、识别孤岛文件等场景，但不理解业务语义或运行时调用链。
VS Code 里真能自动生成靠谱的代码逻辑图吗？
不能。目前所有插件生成的「逻辑图」都是静态结构快照，不是运行时调用链，也不理解业务语义。它们靠解析 AST 或正则提取函数/类/依赖关系，结果高度依赖代码规范程度和语言支持粒度。如果你指望点一下就看清“用户下单后库存怎么扣”，会失望；但用来快速摸清模块边界、识别孤岛文件、发现循环依赖，确实省半小时手动翻找。
Graphviz + Code2flow 是最稳的文本流图方案code2flow 不是 VS Code 插件，而是命令行工具，但配合 Graphviz 渲染，生成的调用图可读性远超多数图形化插件。它支持 Python、JavaScript、TypeScript、Go 等主流语言，且只依赖语法结构，不跑代码，无副作用。
code2flow 不是 VS Code 插件，而是命令行工具，但配合 Graphviz 渲染，生成的调用图可读性远超多数图形化插件。它支持 Python、JavaScript、TypeScript、Go 等主流语言，且只依赖语法结构，不跑代码，无副作用。
- 安装：先装 graphviz（macOS 用 brew install graphviz，Windows 下载官方 installer），再 pip install code2flow
- 生成：在项目根目录执行 code2flow --no-grouping --output diagram.png src/**/*.ts
- 关键参数：--no-grouping 避免合并函数（否则调用链会被吞掉），--max-depth 3 控制图复杂度
- 坑：遇到 export * from 'xxx' 或动态 import() 会漏节点；TS 中类型声明（interface、type）不参与图生成，别误以为“没画出来=没用到”
Code Outline 插件适合快速定位函数调用上下文Code Outline 不画图，但它把当前文件的函数定义、调用位置、被谁调用，全列在侧边栏里，点击直接跳转。对理清单个文件内部逻辑特别有效，尤其适合接手命名混乱、无注释的老 JS/TS 文件。
- 启用后右键函数名 → “Show Call Hierarchy”，就能看到本函数被哪些地方调用（仅限当前工作区索引范围）
- 注意：它依赖 VS Code 的语义索引，首次打开大项目要等几秒，jsconfig.json 或 tsconfig.json 缺失会导致 JS 文件调用关系不准
- 和 Peek Definition 的区别：后者只看定义，前者展示双向调用关系，更接近“局部逻辑图”
Dependency Cruiser + HTML 报告适合查模块耦合问题
老项目最怕“改一个函数，三个模块报错”。dependency-cruiser 能扫描整个项目，输出依赖图 + 违规报告（比如 A 模块不该引用 B 模块），比纯可视化插件更有诊断价值。
- 安装：npm install --save-dev dependency-cruiser，配 .dependency-cruiser.js 规则文件
- 运行：depcruise --output-type html --exclude "^node_modules" --output-to dep-report.html src/
- 关键配置项：forbidden 里写 { from: { path: "src/utils" }, to: { path: "src/components" } }，就能揪出违规跨层调用
- 坑：默认不分析 require() 字符串拼接（如 require(name + '.js')），这类动态依赖它看不见
复杂点在于：没有插件能自动区分“技术依赖”和“业务逻辑流”。比如 fetchUser() 调用了 apiClient.get()，图上连了一条线，但它不会告诉你这一步是校验权限还是加载头像——那得你读代码。别让图替你思考，让它帮你少翻两个文件就行。
