Module Dependency Diagrams
Required plugins: JavaScript and TypeScript, Diagrams.
The plugins are bundled with PhpStorm and enabled by default.
Analyzing a 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.
or 
) 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
or 
icons respectively.
Navigating from the diagram to the source code
To jump from a diagram to a file, right-click the file and choose on the context menu.
To navigate to a specific
importstatement in the source code, right-click the required file in the diagram, choose on the context menu, and then choose the symbol to jump to from the Select Navigation Target list:
Thanks for your feedback!