Dependinator

Dependinator visualizes code structure and dependencies as an interactive, navigable map — making complex architectures easier to understand, analyze, and refactor.

Think of it like a map app. Just as Google Maps shows continents when you're zoomed out and individual streets when you zoom in, Dependinator shows your whole system at a glance and reveals more detail about an area as you zoom into it. There are no separate "open" and "close" actions — you simply zoom in to drill down and zoom out to step back.

What you can do

Explore an interactive dependency map — see your codebase as a zoomable, navigable diagram instead of scrolling through files.
Zoom for detail — zoom into any node to reveal its internals, then zoom back out to see the bigger picture.
Follow dependencies — pick any node and trace what it depends on, or what depends on it, across the whole model.
Jump to source — in the VS Code extension, go straight from a node to the code it represents (and back).
Optional device sync — enable device sync to keep your models and views in sync across devices.

Getting around

Zoom in (scroll or pinch) to drill into an area and see more detail; zoom out to step back to the overview — just like panning and zooming a map.
Drag the background to pan across the model.
Search (the magnifier in the toolbar, or Ctrl+F) to jump straight to a node by name.
Use Fit to Screen from the menu to recenter and reset the view at any time.

Working with a node

Click a node to select it and show its toolbar. From there you can:

Show dependencies — reveal the lines to the node (what depends on it) or from the node (what it depends on).
Resize the node — drag its edges to give it more or less room in the layout.
Go to source — in the VS Code extension, nodes that map to code show a button that opens the corresponding file in the editor.

To see what's inside a node, you don't need a button — just zoom in on it and its internals come into view.

The Dependencies dialog

When you explore dependencies for a node, the Dependencies dialog lets you walk the dependency graph step by step:

Choose a direction — look at dependencies pointing to the selected node (its callers / dependents) or from it (the things it relies on).
Drill through the chain — select an item on either side to make it the new focus and keep following the references deeper into the system.
Navigate to a node — pick a dependency to highlight and center it on the map, so you can see where it sits in the overall structure.

The menu (the ☰ button, top-left) is your hub: open recent models and local paths, toggle hidden nodes, undo / redo, reset the layout, and enable device sync.

VS Code vs. the web app

The VS Code extension is where you'll do the real work of building and editing diagrams alongside your code. Click the diagram button in the editor title bar to show the diagram for the node at your current file, and from the diagram you can jump back to open the corresponding editor — so the map and the source stay in step. The extension is available on the Visual Studio Marketplace — in VS Code, search for "Dependinator" in the Extensions view.

The web app at dependinator.com is the companion for viewing your models outside VS Code, in a desktop or mobile browser. Editing works there too, but viewing and exploring is its primary use case — handy for reviewing an architecture on the go or sharing a view. Enable device sync in both the extension and the web app and the models you build in VS Code are available wherever you are.

Device sync

Enabling device sync (via the cloud button in the toolbar, or the menu) lets Dependinator sync your models and views across devices. It's entirely optional — everything works locally without an account.

To see the same diagram on, say, VS Code on your computer and dependinator.com on your phone, just enable device sync with the same account on both devices. Once it's enabled on each, your models and views stay updated on every device that has sync enabled.