FlowViz helps you visualize your project and file dependencies in VS Code using interactive graphs. Explore modules, services, components, dialogs, and routing in your TypeScript project visually!
Features
🔹 Project Dependency Graph – Visualize the full project structure.
🔹 File Dependency Graph – Inspect imports, services, and template components of a single file.
🔹 Interactive Webview Graphs – Click nodes to open files, highlight relationships, search nodes.
🔹 Right-click Explorer Integration – Open a file graph directly from the VS Code Explorer.
🔹 Customizable Layouts – Switch between Dagre and Cose layouts, zoom to fit.
Commands
Command
Description
FlowViz: Show Project Dependency Graph
Shows a graph of all modules, services, and components in your project.
FlowViz: Show File Dependency Graph
Shows a graph of a single file’s dependencies. Works via editor or right-click menu.
Usage
Project Graph
Press Ctrl+Shift+P and search for FlowViz: Show Project Dependency Graph.
Explore the interactive graph of your project modules.
File Graph
Open a .ts file or right-click a .ts file in the Explorer.
Choose FlowViz: Show File Dependency Graph.
Click on nodes to open files, or double-click to navigate directly.
