Ultimate
Module Dependency Diagrams

Last modified: 29 November 2022

Required plugins: JavaScript and TypeScript, Diagrams.

The plugins are available only in IntelliJ IDEA Ultimate, where they are 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