IntelliJ IDEA
 
2022.3
Shortcuts: Windows
Get IntelliJ IDEA
You are viewing the documentation for an earlier version of IntelliJ IDEA.
  1. Non-JVM technologies
  2. JavaScript
  3. Module Dependency Diagrams

Ultimate
Module Dependency Diagrams

Last modified: 28 September 2022

Required plugin:

Javascript and TypeScript -  The plugin is available only in IntelliJ IDEA Ultimate, where it is enabled by default.

With IntelliJ IDEA, you can get visualization of imports and exports within a context in JavaScript and TypeScript projects.

Building a module dependency diagram

Analyzing a module dependency diagram

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

  • 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 or App nodes field) 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 red border.

  • Resolved imports and exports are marked with the Import icon or App toolbar decorator export icons respectively.

Navigating from the diagram to the source code

See also

Reference