WebStorm 中“Show Diagram”导出的是源码级导入依赖图，非文件结构图；需确保项目配置正确、无语法错误，右键→Diagrams→Show Diagram后导出PNG/SVG；灰色节点表示路径解析失败；完整包依赖树须用终端命令（如npm ls、mvn dependency:tree）。
WebStorm 里没有“文件结构图”这个官方功能，你真正想导出的，是 Show Diagram 生成的源码级依赖关系图——它基于 import、require 或 Java 的 import xxx 语句，不是文件树，也不是 Project 面板的目录列表。
导出前先确认：Diagram 菜单项为什么是灰色的？
右键文件或文件夹看不到 Diagrams → Show Diagram，大概率卡在以下任一环节：
-
node_modules没安装，或项目根目录下没有package.json（JS/TS 项目） - TypeScript 项目缺失
tsconfig.json，或"baseUrl"/"paths"别名配置错误导致大量导入标红 - Java 项目未标记
Sources Root，或 JDK 未正确关联（import com.xxx全部解析失败） - 当前文件编码含 BOM，或某处
import行语法错误（比如漏了引号），导致分析中途静默失败
导出依赖图的实操步骤（仅限 Show Diagram）
确认菜单可用后，按顺序操作才能导出有效图表：
- 右键目标文件或文件夹 →
Diagrams → Show Diagram，等右下角提示“Diagram is ready” - 点击顶部工具栏的
Fit to window（缩放到窗口大小），否则导出时内容被截断 - 点
Export diagram图标（小箭头朝外的方框），选PNG或SVG；如需插入文档，选Copy to clipboard→PNG（SVG 在 Word/PPT 中常丢字体） - 导出的图不包含
package-lock.json或pom.xml中的传递依赖，只反映你代码里真实写了哪些import
为什么导出的图里一堆灰色矩形？
灰色带红色边框的节点 = WebStorm 无法解析该导入路径，常见于：
- Webpack/Vite 别名（如
@/utils）未在jsconfig.json或tsconfig.json中声明"baseUrl"和"paths" - 缺少类型定义（
.d.ts），尤其第三方库的自定义模块声明 - 路径拼写错误，或相对路径跨层级错误（如
../../lib/foo实际不存在） - 该模块被
exclude在 tsconfig 中，或文件被 WebStorm 标为Excluded（右键文件 →Mark as Excluded）
想导出真正的包依赖树？别用 Diagram
如果目标是 npm/yarn/mvn 的完整依赖清单（含版本、冲突、传递依赖），Show Diagram 完全不适用。必须切到终端：
- Node.js：
npm ls --depth=5 > deps_tree.txt或yarn list --depth=5 - Maven：
mvn dependency:tree -Dincludes=groupId:artifactId - PHP Composer：
composer show --tree
这些命令输出的是锁文件或仓库解析结果，和 Show Diagram 的源码静态分析逻辑完全不同——别混用，也别指望 WebStorm 替代它们。
