# 模块依赖关系图

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 必需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

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

## 构建模块依赖关系图

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/js_ts_building_module_dependency_diagram.mp4)

Procedure:

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

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

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

IntelliJ IDEA 递归分析所选文件或所选文件夹中的所有文件中的  `import`  和  `require`  语句以及  `script`  标签，并在单独的选项卡中显示一个图表，展示这些文件之间的相互依赖关系：

![ws_module_dependency_diagram.png](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram.png)

* 一个图表由多个矩形组成。 每个都会显示 分析选择的文件 名称以及检测到的导入列表。 如果一个导入被解析，将会在其旁边显示一个指示导入符号类型（例如 ![variable.png](https://resources.jetbrains.com/help/img/idea/2026.3/variable.png) 或 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.nodes.field.svg)）的图标。

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

* 解决的 导入 和 导出 分别用 ![import_icon.png](https://resources.jetbrains.com/help/img/idea/2026.3/import_icon.png)或 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.export.svg)图标标记。

## 分析图表

![分析图表 - 上下文菜单](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_context_menu.png)

Procedure:

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

### 显示图表特征

Procedure:

* 要获取图表的一般信息和统计数据，请在图表的上下文菜单中选择  `分析图形｜显示图形特征` 。

* 如需了解详情关于某项指标，请点击其旁边的 ![帮助图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.help.svg)。

![显示图表特征](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_show_characteristics.png)

### 聚焦于选中节点

Procedure:

* 要更深入地检查多个节点，请先选择它们，再从上下文菜单中选择  `分析图形｜聚焦于选中节点` 。

![聚焦于选中节点](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_selected_nodes.png)

除当前选中节点外，所有节点都被隐藏。

![聚焦于选中节点](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_selected_nodes_result.png)

* 要恢复图表，请按 `Ctrl+Z` (Windows), `⌘ Z` (macOS), `⌘ Z` (IntelliJ IDEA Classic (macOS)), `⌘ Z` (macOS System Shortcuts), `Ctrl+Z` (XWin), `Ctrl+Z` (GNOME), `Ctrl+Z` (KDE), `Ctrl+Shift+Minus` (Emacs), `Ctrl+Z` (Sublime Text), `⌘ Z` (Sublime Text (macOS)), `Ctrl+Z` (Visual Studio), `⌘ Z` (Visual Studio (macOS)), `Ctrl+Z` (NetBeans), `Ctrl+Z` (Eclipse), `⌘ Z` (Eclipse (macOS))。

### 聚焦于节点邻域

Procedure:

1. 要更深入地检查某个节点，请选择所需节点，然后从其上下文菜单中选择  `分析图形｜聚焦于节点邻域` 。

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

![聚焦于节点邻域视图对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_node_neighborhood_dialog.png)

显示包含依赖项的选中节点。

![选中节点的邻域](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_node_neighborhood.png)

### 聚焦于两个节点之间的路径

Procedure:

1. 选择要检查其间路径的节点，然后从上下文菜单中选择  `分析图形｜聚焦于两个节点之间的路径` 。

![聚焦于两个节点之间路径的上下文菜单](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_paths_between_nodes_steps.png)

2. 在   聚焦于两个节点之间的路径   对话框中，配置搜索内容并点击   查找  。

![聚焦于两个节点间路径对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_paths_between_nodes_dialog.png)

### 聚焦于循环

Procedure:

1. 如需仅视图 [循环依赖](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#cyclic_imports)，请在图表的上下文菜单中选择  `分析图形｜聚焦于循环` 。

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

![聚焦于循环视图对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_cycles_dialog.png)

图表显示了指定作用域中彼此之间存在循环导入的模块。

![检测到的循环](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_cycles.png)

### 测量图中心性

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

Procedure:

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

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

![度量中心性对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_measure_centrality_steps.png)

IntelliJ IDEA 根据节点的计算重要性高亮显示节点，最重要的节点被明亮地选中。 节点的重要性以 0.0 到 1.0 的小数值表示，显示在每个节点旁边。

![中心性度量结果](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_measure_centrality_result.png)

### 将节点分组为集群

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

Procedure:

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

2. 在打开的   自动集中   对话框中，选择作为集群依据的形参，然后点击   运行  。

![自动聚类对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_automatic_clustering_steps.png)

IntelliJ IDEA 显示生成的集群。

![集群](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_analyze_graph_automatic_clustering_result.png)

## 从图表导航至源代码

Procedure:

* 从图表跳转到文件，请在图表中右键点击该文件，然后在上下文菜单中选择  `跳转到源` 。

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

![ws_module_dependency_diagram_jump_to.png](https://resources.jetbrains.com/help/img/idea/2026.3/ws_module_dependency_diagram_jump_to.png)

## 上下文菜单

### 选定元素操作

仅当在图表中选中了节点时，才会显示此菜单项及其下的项。

|  条目  |  描述  |
| --- | --- |
|  复制  |  复制选定内容。  |
|  查找用法  |  [在整个项目中搜索选中内容的用法](find-highlight-usages.html)。  |
|  显示  |     视图选中内容的引用信息，例如：        * [快速定义](viewing-definition.html)    * [快速类型定义](null)    * [快速文档](viewing-javascript-reference.html)    |
|  转到  |      * [导航栏](file-navigation.html#navigate-with-navigation-bar)    * [声明](navigating-through-the-source-code.html#go_to_declaration) 或 [用法](null)。    * [实现(s)](navigating-through-the-source-code.html#go_to_implementation)    * [类型声明](navigating-through-the-source-code.html#go_to_declaration)    * [超级方法](typescript-support.html#ws_ts_go_to_implementation_or_superclass)    * [相关符号](angular.html#ws_angular_navigation_procedure)    |
|  打开位置  |      * 文件路径 - 选择此选项可视图选中项所在的文件夹。 ![在文件路径中打开](https://resources.jetbrains.com/help/img/idea/2026.3/js_ts_module_dependency_diagram_context_menu_selected_element_open_in_file_path.png)    * 在终端中打开 - 在 [终端](terminal-emulator.html) 中打开与选中项对应的目录。    |
|  使用 Google 搜索  |     打开浏览器，使用 Google 搜索选中项的文件路径。      ![使用 Google 搜索](https://resources.jetbrains.com/help/img/idea/2026.3/js_ts_module_dependency_diagram_context_menu_selected_element_open_in_search_with_google.png)  |
|  外部工具  |  对选中项运行 [外部工具](configuring-third-party-tools.html)。  |

### 内容

|  条目  |  描述  |
| --- | --- |
|  新建  |     仅在图表中选中节点时，此项才可用。 使用此项可向当前图表添加以下类型的备注。        * 备注    * 带元素文档的备注    |
|  更改可见性级别  |     选择详细级别，可用选项如下：        * 概述    * 详细信息      了解详情请访问 [yFiles 官方网站](https://www.yfiles.com/resources/how-to/smooth-visualization-of-large-diagrams-in-javascript)。      > **Tip:** > 此操作也可在 [工具栏](#toolbar_show_visibility_level) 中使用。    |

### 跳转到

仅在图表中选中节点时，此项才可用。 使用此项可打开弹出列表，显示选中项所包含的文件导入列表。 在弹出窗口中点击文件以在编辑器中打开。

![跳转到](https://resources.jetbrains.com/help/img/idea/2026.3/js_ts_module_dependency_diagram_context_menu_jump_to.png)

### 删除

仅在图表中至少选中一个节点时，此操作才可用。 使用操作可将所选节点从图表中移除。

> **Tip:**
> 从图表中移除节点不会导致项目中相应文件的删除。

### 分析图表

选择此项以访问用于检查图表的操作 [如上所述](#ws_module_dependency_diagram_analyze_graph)。

### 重构

仅在选中节点时此菜单项可用。 使用此菜单项可打开弹出列表，展示当前上下文中可用的重构操作：

* [重命名](null)

* [移动](null)

* [安全删除](null)

### 布局

选择此菜单项可打开图表可用布局的弹出列表。 了解详情请访问 [yFiles 官方网站](https://www.yfiles.com/demos#layout)。

### 方向

选择此项可打开弹出列表，在屏幕上选择图表视觉排列方式。

### 应用当前布局

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

### 连线路由自动化

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

### 外观

使用此菜单项可配置边和标签的显示效果、指定是否显示网格等。 了解详情请访问 [yFiles 官方网站](https://www.yfiles.com/demos#layout)。

### 行为

使用此菜单项可打开弹出列表，以启用或禁用以下选项：

* [对齐到网格](https://www.yfiles.com/demos/application-features/grid-snapping/)

* 布局后适应内容 自动布局算法完成图排列后，视口会自动缩放和平移，以使整个图表适应视图。 启用设置时： 节点和边将由布局算法重新排列。 随后画布/视图会自行调整，无需手动缩放或滚动，即可显示全部内容。 启用设置时： 布局仍在运行，但当前缩放级别和视口位置保持不变。

* 为选中节点显示结构视图 - 启用此选项后，IntelliJ IDEA 会自动显示与当前选中节点对应文件的 [结构视图](viewing-structure-of-a-source-file.html)。

### 将图表复制到剪贴板

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

### 将所选内容复制到剪贴板

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

### 导出图表

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

![导出图表](https://resources.jetbrains.com/help/img/idea/2026.3/js_ts_module_dependency_diagram_context_menu_export_diagram.png)

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

* ![在 Web 编辑器中打开](https://resources.jetbrains.com/help/img/idea/2026.3/app.runConfigurations.web_app.svg)：点击此按钮以选择要将图表导出到的第三方编辑器。

* ![将图表复制到剪贴板](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.copy.svg)：点击此按钮以使用可用格式之一将图表保存到剪贴板。

* ![保存图表](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.save.svg)：点击此按钮以将当前图表保存为文件。 您可以使用列表中的可用格式之一。

* ![保存图像](https://resources.jetbrains.com/help/img/idea/2026.3/markdown.icons.imageGutter.svg)：点击此按钮以将当前图表保存为 PNG 格式。

* ![打印](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.print.svg)：点击此按钮以打印图表。

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

## 工具栏

|  条目  |  描述  |
| --- | --- |
|  ![显示可见性级别](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.general.show.svg)  |     点击此图标以选择详细级别，可用选项如下：        * 概述    * 详细信息      了解详情请访问 [yFiles 官方网站](https://www.yfiles.com/resources/how-to/smooth-visualization-of-large-diagrams-in-javascript)。     |
|  ![放大](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.image.zoomIn.svg) / ![缩小](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.image.zoomOut.svg)  |  放大图表 / 缩小图表  |
|  ![实际大小](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.image.actualZoom.svg)  |  点击此图标可恢复图表的原始大小，即放大或缩小前的状态。  |
|  ![适应内容](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.image.fitContent.svg)  |  点击此图标以使内容适应当前图表大小。  |
|  ![应用当前布局](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.graph.graphLayout.svg)  |  点击此图标以应用从图表上下文菜单   布局   列表中当前选中的布局。  |
|  ![连线路由自动化](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.move-to-button.svg)  |  点击此图标将图表内容缩放至图表窗口边缘。  |
|  ![将图表复制到剪贴板](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.copy.svg)  |  点击此图标将图表复制到剪贴板。  |
|  ![将所选内容复制到剪贴板](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.inSelection.svg)  |  点击此图标，然后选择任意图表区域——所选区域将被复制到剪贴板。  |
|  ![导出图表](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.export.svg)  |     点击此图标可使用与第三方工具兼容的多种格式将图表导出为文件或图像，或在浏览器中打开图表。      ![导出图表](https://resources.jetbrains.com/help/img/idea/2026.3/ws_export_diagram.png)    您可以选择并配置以下选项：        * ![在 Web 编辑器中打开](https://resources.jetbrains.com/help/img/idea/2026.3/app.runConfigurations.web_app.svg)：点击此按钮以选择要将图表导出到的第三方编辑器。    * ![将图表复制到剪贴板](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.copy.svg)：点击此按钮以使用可用格式之一将图表保存到剪贴板。    * ![保存图表](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.save.svg)：点击此按钮以将当前图表保存为文件。 您可以使用列表中的可用格式之一。    * ![保存图像](https://resources.jetbrains.com/help/img/idea/2026.3/markdown.icons.imageGutter.svg)：点击此按钮以将当前图表保存为 PNG 格式。    * ![打印](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.print.svg)：点击此按钮以打印图表。    |
|  ![刷新数据模型](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.general.refresh.svg)  |  点击此按钮以刷新整个图表。  |
|  ![打开图表设置](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.general.settings.svg)  |  点击此按钮以打开 [图表设置](diagrams.html)，您可以在其中配置其他选项。  |

## See also

### 参考

[图](diagrams.html)