webstorm的show diagram仅生成源码级import/require调用链图，非npm/yarn包依赖树；需先确保node_modules已安装、package.json/tsconfig.json配置正确、sources root标记无误，再右键→diagrams→show diagram，等提示就绪后fit to window并导出png。
WebStorm 里没有“模块依赖关系图”的独立入口，右键菜单里的 Diagrams → Show Diagram 就是唯一可用路径，但它画的不是 npm/yarn 的包依赖树，而是你代码里 import 和 require 实际写出的调用链。
为什么右键点不出 Show Diagram？
菜单灰掉或点击无反应，基本是解析上下文没搭好：
-
node_modules没安装，或项目根目录下缺package.json（JS/TS 项目） - TypeScript 项目没配
tsconfig.json，或"baseUrl"/"paths"别名失效 → 所有@/utils类导入标红，图中全是灰色矩形 - Java 项目没标记 Sources Root，或 Project SDK 指向错误 JDK →
import com.xxx全无法解析 - 文件含 BOM、某行
import缺引号或拼写错误 → 分析静默失败，无提示
如何正确生成并导出这个图？
它不是“一键生成”，得先让 WebStorm 把依赖关系算出来：
- 右键目标文件或文件夹 →
Diagrams→Show Diagram，等右下角提示 “Diagram is ready” - 点顶部工具栏的
Fit to window（缩放到窗口大小），否则导出时内容被截断 - 点
Export diagram图标（小箭头朝外的方框）→ 选PNG（兼容性最好）或SVG（部分编辑器里会丢字体） - 想贴进文档？右键图表 →
Export diagram→Copy to clipboard，选PNG最稳
图里一堆灰色矩形是怎么回事？
带红色边框的灰色矩形 = WebStorm 无法解析该导入路径，不是 bug，是明确的失败信号：
- Webpack/Vite 别名（如
@/hooks）没在jsconfig.json或tsconfig.json中声明"baseUrl"和"paths" - 第三方库缺类型定义（
.d.ts），尤其自定义模块声明没写全 - 相对路径跨层级错误（如
../../../lib/foo实际不存在） - 该文件被 WebStorm 标为
Excluded（右键文件 →Mark as Excluded）
真正容易被忽略的是：这个图不读 package-lock.json、不展开 lodash 内部依赖了哪个版本的 is-number。它只忠实反映你代码里写了哪一行 import —— 想看完整包层级树，必须切终端跑 npm ls 或 mvn dependency:tree。
