PhpStorm 2026.2 Help

模块依赖关系图

使用 PhpStorm,您可以在 JavaScript 和 TypeScript 项目中获取上下文内导入和导出的可视化。

构建模块依赖关系图

  • 从 JavaScript、TypeScript 或 HTML 文件的上下文菜单或文件夹的上下文菜单中选择 图表 | 显示图表

    该操作不适用于 node_modules 排除 文件夹。

    如果在可以构建多种类型图表的文件夹上调用此操作,请从 JavaScript 模块依赖图 列表中选择 选择图表类型

PhpStorm 递归分析所选文件或所选文件夹中的所有文件中的 导入require 语句以及 script 标签,并在单独的选项卡中显示一个图表,展示这些文件之间的相互依赖关系:

ws_module_dependency_diagram.png
  • 一个图表由多个矩形组成。 每个都会显示 分析选择的文件名称以及检测到的导入列表。 如果一个导入被解析,将会在其旁边显示一个指示导入符号类型(例如 variable.png )的图标。

  • 已分析文件指向 目标文件的箭头指示已检测到的导入内容。 如果 目标文件是一个库,则其名称会显示在灰色背景上。 如果从库中导入未解析,则 目标文件显示为带有红色边框的灰色矩形。

  • 解决的 导入导出分别用 import_icon.png 图标标记。

分析图表

分析图表 - 上下文菜单
  • 在图表或节点的上下文菜单中,选择 分析图表 ,然后选择所需操作。

显示图表特征

  • 要获取图表的一般信息和统计数据,请在图表的上下文菜单中选择 分析图形|显示图形特性

  • 要了解特定指标的详情,请点击其旁边的 帮助图标

显示图表特征

聚焦于选中节点

  • 要深入查看多个节点,选择这些节点,然后在上下文菜单中选择 分析图形|聚焦于所选节点

    聚焦于选中的节点

    除了当前选中节点外,所有节点都会被隐藏。

    聚焦于选中节点
  • 要还原图表,请按 Ctrl+Z

聚焦于节点邻域

  1. 要更深入查看某个节点,请选择该节点,然后在其上下文菜单中选择 分析图形|聚焦于节点邻域

  2. 在打开的 聚焦于节点邻近区域 对话框中,指定要显示的依赖项,然后点击 查找

    节点邻域视图对话框

显示选中节点及其依赖项。

选中节点的邻域

聚焦两个节点之间的路径

  1. 选择要查看其间路径的节点,然后在上下文菜单中选择 分析图形|聚焦于两个节点之间的路径

    聚焦两个节点之间的路径上下文菜单
  2. 聚焦于两个节点之间的路径 对话框中,配置搜索并点击 查找

    聚焦两个节点之间的路径对话框

聚焦于环路

  1. 要仅查看 循环依赖 ,请在图表的上下文菜单中选择 分析图形|聚焦于循环

  2. 在打开的 将视图聚焦于循环 对话框中,指定要显示的环类型和分析作用域。

    环路视图对话框

图表显示了指定作用域内包含相互循环导入的模块。

检测到的环路

测量图中心性

使用此操作可识别图表中重要的节点。

  1. 在图表的上下文菜单中选择 分析图 | 测量中心性

  2. 在打开的 度量中心性 对话框中,指定需要考虑的关键参数,然后点击 测量

    度量中心性对话框

    PhpStorm 会根据节点的重要性高亮显示节点,因此最重要的节点会有最亮的高亮效果。 节点的重要性以 0.0 到 1.0 的小数值表示,并显示在每个节点旁。

    中心性度量结果

将节点分组到集群中

可以根据节点边的相似性,利用现代方法自动将图中节点分为集群,并确定最佳集群数。

  1. 在图表的上下文菜单中选择 分析图形|自动聚类

  2. 在打开的 自动集中 对话框中,选择用于集群的参数,然后点击 运行

    自动集群对话框

    PhpStorm 显示生成的集群。

    集群

从图表导航至源代码

  • 要从图表跳转到文件,在图表中右键点击该文件,然后从上下文菜单中选择 跳转到源

  • 要在源代码中导航到特定的 导入 语句,请在图表中右键点击所需的文件,从上下文菜单中选择 跳转到 ,然后从 选择导航目标 列表中选择要跳转到的符号:

    ws_module_dependency_diagram_jump_to.png

上下文菜单

选定元素操作

当在图表中选中某个节点时,会显示此菜单项及其下级项。

项目

描述

复制

复制选中内容。

查找用法

在整个项目中查找选中内容的用法

显示

查看选中内容的引用信息,例如:

转到

打开位置

  • 文件路径 - 选择此选项可以查看选中项存储在哪个文件夹。

    在文件路径中打开
  • 在终端中打开 - 在 终端中打开与选中项对应的目录。

使用 Google 搜索

打开浏览器并使用 Google 搜索选中项的文件路径。

使用 Google 搜索

外部工具

对选中项运行 外部工具

内容

项目

描述

新建

仅在图表中选中节点时此项可用。 使用此项可向当前图表添加以下类型的备注。

  • 备注

  • 带元素文档的备注

更改可见性级别

选择详细级别,可用选项有:

  • 概述

  • 详细信息

yFiles 官方网站 了解详情。

跳转到

仅在图表中选中节点时此项可用。 使用此项打开一个弹出列表,显示选中项依赖导入的文件。 点击弹窗中的文件,将其在编辑器中打开。

跳转到

删除

仅当图表中至少选中了一个节点时该操作才可用。 使用该操作可将选中的节点从图表中移除。

分析图表

选择此项以访问用于分析图表的相关操作 如上所述

重构

仅在选中节点时,菜单项才可用。 使用该菜单项可以打开弹出列表,其中包含当前上下文下可用的重构操作:

布局

选择此菜单项可打开弹出列表,列出可用的图表布局。 从 yFiles 官方网站 了解详情。

方向

选择此项可弹出列表,在屏幕上选择图表的可视排列方式。

应用当前布局

选择此菜单项以应用当前在图表上下文菜单 布局 列表中选择的布局。 该操作也可在工具栏中使用。

自动连线路由

将图表内容缩放至图表窗口边缘。 该操作也可在工具栏中使用。

Appearance

使用此菜单项可配置连线和标签的外观,指定是否显示网格等。 从 yFiles 官方网站 了解详情。

行为

使用此菜单项可打开弹出列表,在其中启用或禁用以下选项:

  • 贴齐网格

  • 布局后适应内容

    自动布局算法整理完成后,视口会自动缩放和平移,以使整个图表适配显示。

    启用该设置时:节点和边由布局算法重新排列。 此时画布/视图会自动调整以显示全部内容,无需手动缩放或滚动。

    启用该设置时:布局仍会运行,但当前的缩放级别和视图位置保持不变。

  • 显示所选节点的结构视图 - 启用该选项后,PhpStorm 会自动显示与当前选中节点对应文件的 结构视图

将图表复制到剪贴板

该操作也可在工具栏中使用。

将选定内容复制到剪贴板

选择此菜单项,然后选择任何图表区域——所选区域将被复制到剪贴板。 该操作也可在工具栏中使用。

导出图表

使用多种与第三方工具兼容的格式将图表导出为文件、图片,或在浏览器中打开图表。

导出图表

您可以选择并配置以下选项:

  • 在 Web 编辑器中打开 :点击此按钮以选择一个第三方编辑器,您可以将图表导出到该编辑器。

  • 将图表复制到剪贴板 :点击此按钮以其中一种可用格式将图表保存到剪贴板。

  • 保存图表: 点击此按钮将当前图表保存为文件。 您可以使用列表中提供的一种格式。

  • 保存图片 :点击此按钮可将当前图表保存为 PNG 格式。

  • Print :点击此按钮以打印图表。

该操作也可在工具栏中使用。

工具栏

项目

描述

显示可见性级别

点击此图标选择详细级别,可用选项有:

  • 概述

  • 详细信息

yFiles 官方网站 了解详情。

放大/缩小

放大图表 / 缩小图表

实际大小

点击此图标可恢复图表缩放前的原始大小。

适应内容

点击此图标以使内容适应当前图表大小。

应用当前布局

点击此图标以应用当前在图表上下文菜单 布局 列表中选择的布局。

自动连线路由

点击此图标可将图表内容缩放至图表窗口边缘。

将图表复制到剪贴板

点击此图标以将图表复制到剪贴板。

将选定内容复制到剪贴板

点击此图标,然后选择任意图表区域——所选区域将被复制到剪贴板。

导出图表

点击此图标以使用各种格式导出图表,这些格式与第三方工具兼容,可以导出到文件、图像,或在浏览器中打开图表。

导出图表

您可以选择并配置以下选项:

  • 在 Web 编辑器中打开 :点击此按钮以选择一个第三方编辑器,您可以将图表导出到该编辑器。

  • 将图表复制到剪贴板 :点击此按钮以其中一种可用格式将图表保存到剪贴板。

  • 保存图表: 点击此按钮将当前图表保存为文件。 您可以使用列表中提供的一种格式。

  • 保存图片 :点击此按钮可将当前图表保存为 PNG 格式。

  • Print :点击此按钮以打印图表。

刷新数据模型

点击此按钮以刷新整个图表。

打开图表设置

点击此按钮以打开 Diagram settings ,您可以在其中配置其他选项。

2026年 7月 16日