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 need Dependograph.
- 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.
| 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 |
- 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!
You know the drill.
$ git clone https://github.com/aryanpingle/Dependograph.git
$ cd Dependograph
$ npm installUse 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.
- The project uses a modified fork of my mentor Daksh's code-analyser.
- ESBuild is my bundler of choice. It's crazy fast.
- 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 toES2020.