# Module Dependency Diagrams > **TL;DR** > Required plugin: > > > > `JavaScript and TypeScript` -  the plugin is bundled with IntelliJ IDEA and enabled by default. With IntelliJ IDEA, you can get visualization of imports and exports within a context in JavaScript and TypeScript projects. ## Build module dependency diagrams Procedure: * Choose `Diagrams | Show Diagram` from the context menu of a JavaScript, TypeScript, or HTML file or from the context menu of a folder. The action is not available for `node_modules` and for `Excluded` folders. If the action is invoked on a folder where multiple types of diagrams can be built, additionally choose `JavaScript Module Dependency Diagram` from the Select Diagram Type list. IntelliJ IDEA analyzes the `import` and `require` statements and `script` tags in the selected file or in all the files in the selected folder recursively and in a separate tab displays a diagram that shows how these files depend on each other: ![ws_module_dependency_diagram.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram.png) * A diagram consists of a number of rectangles. Each of them shows the name of the analyzed selected file and a list of detected imports. If an import is resolved, an icon that indicates the type of the imported symbol (e.g. ![variable.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/variable.png) or ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.nodes.field.svg)) is shown next to it. * An arrow from an analyzed file points at the target file from which the detected imports are made. If the target file is a library, its name is displayed on the grey background. If an import from a library is not resolved, the target file is displayed as a grey rectangle with a red border. * Resolved imports and exports are marked with the ![import_icon.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/import_icon.png) or ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.export.svg) icons respectively. ## Analyze diagrams ![Analyze a diagram - context menu](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_context_menu.png) Procedure: * From the context menu of a diagram or a node, select `Analyze Graph` and then select the required action. ### Show diagram characteristics Procedure: * To get general information and statistics on a diagram, select `Analyze Graph | Show Graph Characteristics` from the context menu of the diagram. * To learn more about a specific metrics, click ![the Help icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.help.svg) next to it. ![Show Graph Characteristics](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_show_characteristics.png) ### Focus on selected nodes Procedure: * To examine several nodes deeper, select them and then select `Analyze Graph | Focus On Selected Nodes` from the context menu. ![Focus on the selected node](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_selected_nodes.png) All the nodes except the currently selected ones are hidden. ![Focus on selected nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_selected_nodes_result.png) * To restore the diagram, press `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` (NetBeans), `Ctrl+Z` (Visual Studio), `⌘ Z` (Visual Studio (macOS)), `Ctrl+Z` (Eclipse), `⌘ Z` (Eclipse (macOS)). ### Focus on node neighborhood Procedure: 1. To examine one node deeper, select the required node and then select `Analyze Graph | Focus On Node Neighborhood` from its context menu. 2. In the Focus View On Node Neighborhood dialog that opens, specify the dependencies to show and click Find. ![Focus View On Node Neighborhood dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_node_neighborhood_dialog.png) The selected node with its dependencies is shown. ![Neighborhood of the selected node](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_node_neighborhood.png) ### Focus on paths between two nodes Procedure: 1. Select the nodes the paths between which you want to examine and then select `Analyze Graph | Focus On Paths Between Two Nodes` from the context menu. ![Focus On Paths Between Two Nodes context menu](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_paths_between_nodes_steps.png) 2. In the Focus On Paths Between Two Nodes dialog, configure the search and click Find. ![Focus On Paths Between Two Nodes dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_paths_between_nodes_dialog.png) ### Focus on cycles Procedure: 1. To view only [cyclic dependencies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#cyclic_imports), select `Analyze Graph | Focus On Cycles` from the context menu of the diagram. 2. In the Focus View On Cycles dialog that opens, specify the types of cycles to be shown and the scope for analysis. ![Focus View On Cycle dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_cycles_dialog.png) The diagram shows the modules from the specified scope that contain cyclic imports between each other. ![Detected cycles](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_cycles.png) ### Measure diagram centrality Use this action to identify the important nodes in your diagram. Procedure: 1. Select `Analyze Graph | Measure Centrality` from the context menu of a diagram. 2. In the Measure Centrality dialog that opens, specify the key parameters to take into account and then click Measure. ![Measure Centrality dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_measure_centrality_steps.png) IntelliJ IDEA highlights nodes according to their calculated importance, so the most important nodes have the brightest selection. The importance of a node is expressed via fractional value from 0.0 to 1.0 measurement, which is displayed next to each node. ![Centrality measures results](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_measure_centrality_result.png) ### Group nodes into clusters You can have the nodes in a graph grouped into clusters automatically based on the similarity of node edges, with modern methods designed to determine the optimal number of clusters. Procedure: 1. Select `Analyze Graph | Automatic Clustering` from the context menu of a diagram. 2. In the Automatic Clustering dialog that opens, select the parameters to base clustering on and click Run. ![Automatic Clustering dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_automatic_clustering_steps.png) IntelliJ IDEA displays the generated clusters. ![Clusters](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_analyze_graph_automatic_clustering_result.png) ## Navigating from the diagram to the source code Procedure: * To jump from a diagram to a file, right-click the file in the diagram and choose `Jump to source` from the context menu. * To navigate to a specific `import` statement in the source code, right-click the required file in the diagram, choose `Jump to` from the context menu, and then choose the symbol to jump to from the Select Navigation Target list: ![ws_module_dependency_diagram_jump_to.png](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_module_dependency_diagram_jump_to.png) ## Context menu ### Selected Element Actions This menu item and the items under this node are shown when you have selected a node in the diagram. | Item | Description | | --- | --- | | Copy | Copy the selection. | | Find Usages | [Search for usages](find-highlight-usages.html) of the selection across the project. | | Show | View reference information on the selection, such as: * [Quick Definition](viewing-definition.html) * [Quick Type Definition](viewing-definition.html) * [Quick Documentation](viewing-javascript-reference.html) | | Go to | * [Navigation Bar](file-navigation.html#navigate-with-navigation-bar) * [Declaration](navigating-through-the-source-code.html#go_to_declaration) or [usages](navigating-through-the-source-code.html). * [Implementation(s)](navigating-through-the-source-code.html#go_to_implementation) * [Type Declaration](navigating-through-the-source-code.html#go_to_declaration) * [Super Method](typescript-support.html#ws_ts_go_to_implementation_or_superclass) * [Related Symbol](angular.html#ws_angular_navigation_procedure) | | Open In | * File Path - Select this option to view in which folder the selected item is stored. ![Open In File Path](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_ts_module_dependency_diagram_context_menu_selected_element_open_in_file_path.png) * Open in Terminal - Open the directory that corresponds to the selected item in the [terminal](terminal-emulator.html). | | Search with Google | Open the browser and start searching for the file path of the selected item with Google. ![Search with Google](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_ts_module_dependency_diagram_context_menu_selected_element_open_in_search_with_google.png) | | External Tools | Run an [external tool](configuring-third-party-tools.html) against the selected item. | ### Content | Item | Description | | --- | --- | | New | The item is only available when a node is selected in the diagram. Use this item to add the following types of notes to the current diagram. * Note * Note with element docs | | Change Visibility Level | Select the level of details, the available options are: * Overview * Details Learn more from the [yFiles official website](https://www.yfiles.com/resources/how-to/smooth-visualization-of-large-diagrams-in-javascript). > **Tip:** > The action is also available from the [toolbar](#toolbar_show_visibility_level). | ### Jump To The item is only available when a node is selected in the diagram. Use this item to open a popup list of files imports from which the selected item contains. Click a file in the popup to open it in the editor. ![Jump To](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_ts_module_dependency_diagram_context_menu_jump_to.png) ### Delete The action is only available when at least one node in the diagram is selected. Use the action to remove the selected node or nodes from the diagram. > **Tip:** > Removing a node from the diagram does not cause deleting the corresponding file from the project. ### Analyze Graph Select this item to access the actions to examine the diagram [as described above](#ws_module_dependency_diagram_analyze_graph). ### Refactor The menu item is only available when a node is selected. Use the menu item to open a popup list with the refactorings that are available in the current context: * [Rename](refactoring-source-code.html) * [Move](refactoring-source-code.html) * [Safe Delete](refactoring-source-code.html) ### Layout Select this menu item to open a popup list with available diagram layouts. Learn more from the [yFiles official website](https://www.yfiles.com/demos#layout). ### Orientation Select this item to open popup list where you can select the way to arrance the diagram visually on the screen. ### Apply Current Layout Select this menu item to apply the layout that is currenytly selected from the Layout list of the diagram context menu. The action is also available from the toolbar. ### Auto Route Edges Scale the contents of the diagram to the edges of the diagram window. The action is also available from the toolbar. ### Appearance Use this menu item configure the appearance of edges and labels, to specify whether to show grid or not, and so on. Learn more from the [yFiles official website](https://www.yfiles.com/demos#layout). ### Behaviour Use this menu item to open a popup list where you can enable or disable the following options: * [Snap to Grid](https://www.yfiles.com/demos/application-features/grid-snapping/) * Fit Content After Layout After the automatic layout algorithm finishes arranging the graph, the viewport automatically zooms and pans so the entire diagram fits into view. When the setting is enabled:, nodes and edges are rearranged by the layout algorithm. Then the canvas/view adjusts itself to show all content without manual zooming or scrolling. When the setting is enabled:, the layout still runs, But the current zoom level and viewport position stay unchanged. * Show Structure View For Selected Node - enable this option to have IntelliJ IDEA automatically show the [structure view](viewing-structure-of-a-source-file.html) of the file that corresponds to the currently selected node. ### Copy Diagram to Clipboard The action is also available from the toolbar. ### Copy Selection to Clipboard Choose this menu item and then select any diagram area – the selected area will be copied into the clipboard. The action is also available from the toolbar. ### Export Diagram Export the diagram using various formats, which are compatible with third-party tools, to a file, to an image, or open the diagram in the browser. ![Export Diagram](https://resources.jetbrains.com.cn/help/img/idea/2026.2/js_ts_module_dependency_diagram_context_menu_export_diagram.png) You can select and configure the following options: * ![Open in Web Editor](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.runConfigurations.web_app.svg): click this button to select a third-party editor to which you can export the diagram. * ![Copy Diagram to Clipboard](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.copy.svg): click this button to save the diagram to a clipboard using one of the available formats. * ![Save diagram](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.save.svg): click this button to save the current diagram as a file. You can use one of the available formats from the list. * ![Save image](https://resources.jetbrains.com.cn/help/img/idea/2026.2/markdown.icons.imageGutter.svg): click this button to save the current diagram in the PNG format. * ![Print](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.print.svg): click this button to print the diagram. The action is also available from the toolbar. ## Toolbar | Item | Description | | --- | --- | | ![Show Visibility Level](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.show.svg) | Click this icon to select the level of details, the available options are: * Overview * Details Learn more from the [yFiles official website](https://www.yfiles.com/resources/how-to/smooth-visualization-of-large-diagrams-in-javascript). | | ![Zoom In](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.image.zoomIn.svg) / ![Zoom Out](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.image.zoomOut.svg) | Zoom the diagram in / Zoom the diagram out | | ![Actual Size](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.image.actualZoom.svg) | Click this icon to restore the original size of the diagram, as it was befor zooming in or zooming out. | | ![Fit Content](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.image.fitContent.svg) | Click this icon to make the contents fit into the current diagram size. | | ![Apply Current Layout](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.graph.graphLayout.svg) | Click this icon to apply the layout that is currenytly selected from the Layout list of the diagram context menu. | | ![Auto Route Edges](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.move-to-button.svg) | Click this icon to scale the contents of the diagram to the edges of the diagram window. | | ![Copy Diagram to Clipboard](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.copy.svg) | Click this icon to copy the diagram into the clipboard. | | ![Copy Selection to Clipboard](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.inSelection.svg) | Click this icon and then select any diagram area – the selected area will be copied into the clipboard. | | ![Export Diagram](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.export.svg) | Click this icon to export a diagram using various formats, which are compatible with third-party tools, to a file, to an image, or open the diagram in the browser. ![Export diagram](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_export_diagram.png) You can select and configure the following options: * ![Open in Web Editor](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.runConfigurations.web_app.svg): click this button to select a third-party editor to which you can export the diagram. * ![Copy Diagram to Clipboard](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.copy.svg): click this button to save the diagram to a clipboard using one of the available formats. * ![Save diagram](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.save.svg): click this button to save the current diagram as a file. You can use one of the available formats from the list. * ![Save image](https://resources.jetbrains.com.cn/help/img/idea/2026.2/markdown.icons.imageGutter.svg): click this button to save the current diagram in the PNG format. * ![Print](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.print.svg): click this button to print the diagram. | | ![Refresh Data Model](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.refresh.svg) | Click this button to refresh the whole diagram. | | ![Open Diagrams Settings](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.settings.svg) | Click this button to open the [Diagram settings](diagrams.html) where you can configure additional options. | ## See also ### Reference [Diagrams](diagrams.html)