Dependency Graph Extension (Beta) for Visual Studio Code

This extension provides a visual representation of the dependency graph of your projects in Visual Studio Code.

Supported Languages: Javascript(.js/.jsx), Typescript(.ts/.tsx)

Features

• Dependency Graph: Visualize the dependencies between your Javascript/Typescript files and classes in a graph.
• Interactive Graph: Click on a node to open the corresponding file in a new editor (if path identified).
• Support for Various Node Types: Supports classes, files, and other Javascript/Typescript constructs.
• Graph and Sequence Diagrams: Displays both dependency graphs and sequence diagrams for better understanding of relationships.
• Export as PNG/SVG: Export the generated graph as PNG or SVG for documentation or sharing purposes.

Graph View:

Sequential View:

How To Use

Right-click on any file in the vscode explorer of supported language type and choose View Dependency Graph option.

or,

Use the command palette (Ctrl+Shift+P) and type View Dependency Graph to open the graph for a supported file.

Export example:

Upcoming features

• Add right-click option for directories/workspaces to display file-level dependency graph
• Add support for other languages

Enjoy!