WebStorm 2018.1 Help

Module Dependency Diagrams

WebStorm supports visualization of imports and exports within a context both in JavaScript and TypeScript projects.
On this page:

Building a module dependency diagram

To build a diagram, choose Diagrams | Show Diagram on the context menu of a JavaScript, TypeScript, or HTML file or of a folder.

The action is not available on the node_modules folders and on folders that are marked as Excluded.

Analyzing a module dependency diagram

WebStorm 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 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 export icon icons respectively.

Navigating from the diagram to the source code

WebStorm supports navigation from the diagram:

  • To jump from a diagram to a file, right-click the file and choose Jump to source on 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 on the context menu, and then choose the symbol to jump to from the Select Navigation Target pop-up list:
    ws module dependency diagram jump to
Last modified: 20 July 2018

See Also

Reference: