You will never struggle with dependency management ever again.
Dependograph is a VSCode extension that lets you visualize your project's dependency structure in several interactive, and visually appealing ways. You don't want Dependograph. You needDependograph.
You want a bird's eye view of your project's dependencies
You're looking at a complicated codebase and wonder how files relate to each other
You want to understand how a variable/function is being used throughout the project
If you fall into any of these categories, Dependograph is the extension for you.
✨ Features
Feature
Status
Description
Force-Directed Dependency Graph
✅
Visualize your dependency structure as a directed graph with a force-directed layout
Hierarchical Dependency Graph
🟠
Visualize your dependency structure as a hierarchical graph
Webpack Chunk Graph
🟠
Use the Force-Directed Graph to visualize emitted chunks (Webpack only)
Graph Export Options
🟠
Download and share the generated visualizations
💻 Installation
Go to the Extensions tab in your Visual Studio Code window
Search for Dependograph by Aryan Pingle
Click on install
... and you're good to go!
⚙️ Development
You know the drill.
$ git clone https://github.com/aryanpingle/Dependograph.git
$ cd Dependograph
$ npm install
Use the VSCode task runner to start testing the extension.
[!NOTE]
You will need the esbuild Problem Matchers plugin to test the extension with live compilation. That's just how esbuild works unfortunately.
Everything is written in Typescript. The underlying code of the extension itself is transpiled to CommonJS, and code used for visualizations (and everything in webviews) is transpiled to ES2020.