WebStorm不能导出package.json或lock文件的完整依赖树，其Show Diagram仅基于源码中import/require语句生成调用链快照；点不出图或全灰矩形主因是解析上下文缺失：node_modules未安装、package.json格式错误、tsconfig未配或Java项目未标Sources Root等；正确导出需右键→Show Diagram→Fit to window→Export为PNG（兼容性最佳）；真需包层级树须用终端命令如npm ls或mvn dependency:tree。
WebStorm 不能直接导出 package.json 或 yarn.lock 里的完整依赖树为静态图，它画的“依赖图”只反映源码中实际写的 import 和 require 关系，不是 npm/yarn/pnpm 解析出来的包层级。
为什么 Show Diagram 点不出来或全是灰色矩形
依赖图生成失败，基本是解析上下文没搭好：
-
node_modules没装、package.json缺失或 JSON 格式错误（比如末尾多逗号），WebStorm 就不会激活模块解析逻辑 - TypeScript 项目没配
tsconfig.json，或baseUrl/paths别名没生效 → 所有路径导入标红，图中节点全变带红色边框的灰色矩形 - Java 项目没标记 Sources Root，或 Project SDK 指向了错误 JDK →
import com.xxx全部无法解析 - 文件含 BOM、或某行
import语法错误（如未闭合字符串）→ 分析中途静默失败，无报错提示
如何正确导出 import/require 级别的依赖图
这个图本质是源码调用链快照，导出前得先让它“算出来”：
- 右键目标文件或文件夹 →
Diagrams→Show Diagram，等右上角进度条消失 - 点顶部工具栏的
Fit to window（缩放到窗口大小），否则导出时内容被截断 - 点
Export diagram图标（小箭头朝外的方框）→ 选PNG或SVG；SVG在部分编辑器里会丢字体，优先选PNG - 想贴进文档？右键图表 →
Export diagram→Copy to clipboard，选PNG格式最稳
想看真正的包依赖树？别用 Diagram，去终端
如果目标是带版本号、传递依赖、冲突提示的完整树状结构，Diagram 功能完全不适用：
- Node.js 项目：
npm ls --depth=5 > deps_tree.txt或yarn list --pattern "." - pnpm 项目：
pnpm list --all --depth=5，输出更扁平，适合 grep 过滤 - Java Maven 项目：
mvn dependency:tree -Dincludes=org.apache.commons:commons-lang3 - 所有命令结果可重定向保存，再用 VS Code 或记事本打开查看层级
真正容易被忽略的是：Diagram 里显示的“lodash”只是你写了 import { debounce } from 'lodash' 这一行的结果，它不会告诉你 lodash 内部依赖了哪个版本的 is-number —— 那属于 package-lock.json 的职责范围，WebStorm 不读它。
