Dependinator

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

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 (namespaces, types, members), 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).
• Edit and annotate — in edit mode, arrange nodes, pick icons and colors, add your own nodes, links and notes, or sketch an architecture from an empty model.
• Export — save the current view, a selected area or the whole diagram as an SVG or PNG image.
• 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.
• Double-click a node to zoom the view to it.
• Search (the magnifier in the toolbar, or Ctrl+F) to jump straight to a node by name. Type parts of a name, e.g. PZS finds PanZoomService; ↑ ↓ and Enter pick a result.
• Use Fit to Screen (the toolbar button, Home, or the right-click menu) to recenter and reset the view at any time.
• The breadcrumb under the toolbar shows where you are: the model, then the containers down to the selected node (or, with nothing selected, to the container around the middle of the screen). Click any crumb to zoom to it; the model crumb fits the whole diagram.
• Back and Forward (the toolbar arrows, Alt+← / →, or Backspace / Shift+Backspace) retrace your jumps: every search result, explorer row, breadcrumb click, double-click and Fit to Screen is a step you can return from.
• Alt+↑ (or the right-click menu) zooms out one container level per press, up to the whole diagram.

Working with a node

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

Minimap — View › Show Minimap puts a small overview in the bottom-right corner with a frame for what is on screen; click or drag in it to move the view. It zooms in with you: deep inside a container it shows that container's surroundings and scrolls along as you move.

New here? On the first start a short tour walks through the basics (zoom, click a node, open the explorer, search); Menu › Help › Show Tips brings it back any time.

• Show references / dependencies — open the Dependencies explorer for the nodes that use this node (references) or the nodes it uses (dependencies).
• Show more lines — for a container, draw the lines per child (one level deeper) instead of one bundled line, and back again.
• Zoom to node — fit the node to the screen (same as double-clicking it).
• Go to source — in the VS Code extension, nodes that map to code show a button that opens the corresponding file in the editor.
• Select several — Shift+click (or Ctrl+click) adds nodes to the selection, and Shift+drag draws a rectangle that selects the nodes inside it; the toolbar shows how many. Dragging one moves them all, and hide, color, size and delete apply to all of them in one undo step.
• Share a link — Copy Link to Node (node menu or right-click) and Export › Link to Current View copy a dependinator.com link that opens this model at that node or view. The link works for an account that has the model synced (device sync), and always for the demo model.
• Hide the node — from the toolbar menu; hidden nodes are dimmed, or removed entirely with View › Show Hidden Nodes off.
• See only its lines — while a node (or line) is selected, every line that does not touch it is faded (View › Dim Unrelated Lines, on by default); hover a faded line to see it at full strength.
• Legend — View › Show Legend explains every line style and node icon.
• While parsing — the overlay shows the solution and the time so far; "Continue in background" lets you keep exploring while it finishes. A background refresh tells you what changed.
• Find cycles — View › Show Cycles lists every container whose children depend on each other in a circle (projects, namespaces or classes referencing each other) and draws those lines in red; click a row to go there.
• Architecture rules — View › Show Architecture Rules lets you declare "this must not depend on that" by picking two nodes (a project, a namespace, a class). Every dependency that breaks a rule is listed per class pair and drawn orange; rules are saved with the model, so they stay checked after every re-parse.
• Find a path — why does one node depend on another? View › Find Path lets you choose two nodes and lists the shortest chains of dependencies from the first to the second; the chosen chain is drawn highlighted while every other line fades, and clicking a hop takes you there. The explorer's indirect rows (below) open the same panel for their chain.
• Leave lines out — View › Lines hides lines to external packages, inheritance lines or member-level lines, or shows only lines carrying at least 2, 5 or 10 links. The explorer's lines and direct lines you asked for are always drawn.

To see what's inside a node, you don't need a button — just zoom in on it and its internals come into view. Right-click a node, a line or the background for the same actions as a context menu.

The Dependencies explorer

When you show a node's references or dependencies, the Dependencies explorer opens beside the diagram and draws the node's own lines in the diagram:

• Choose a direction — look at the nodes that use the selected node (references) or the nodes it uses (dependencies).
• Drill into the chain — expand a row to split its line one level deeper in the diagram; the row lists the far side's children with their link counts.
• Include indirect — the » button also lists the nodes reached through other nodes, dimmed and with their hop counts, in the same containers as the direct ones. That is how you discover a dependency nobody referenced on purpose; hover such a row and click the chain button to see how it comes about.
• Navigate — click a row to pan the diagram to that node; hover a row for "show node", "show source code" (VS Code) and "show direct line".
• Keep the lines — closing the explorer keeps its lines until you select something else; pin them to keep them while you select other nodes, or hide them with the lines button or View › Hide All Direct Lines.

On a small screen a click on the diagram folds the explorer down to its title bar, so it does not cover the map; click the title bar to bring it back.

Edit mode

The diagram is view-only until you turn on Edit mode (the pencil in the toolbar, or Edit › Edit Mode). The setting is remembered. In edit mode you can:

• Move and resize nodes — drag a selected node, or drag its edge handles; the toolbar also has grow/shrink buttons. Layout changes are remembered per model.
• Arrange inside a container — pan and zoom the contents of the selected container without moving the container itself.
• Icons and colors — pick an icon (including Azure, AWS and Google cloud icons), an icon color, and a container color (border and background).
• Add nodes and links — double-click empty canvas, or use Edit › Add Node or the right-click menu; drag the + handle that appears at the right of a hovered node onto another node to link them, or onto the canvas to add a linked node.
• Notes — place numbered notes on the diagram (Edit › Add Note or the right-click menu) and list them with View › Show Notes Sidebar.
• Undo — every edit can be undone (Ctrl+Z); a delete offers Undo right in its message.

User-drawn nodes carry a small ✎ marker and can be renamed or deleted; parsed nodes cannot. Models › New Model creates an empty model to sketch an architecture by hand.

Keyboard and mouse

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. It parses the solution in your workspace (and re-parses when files change). The diagram follows the editor: switching to a C# file shows its node (setting Follow Active Editor), Ctrl+Alt+D reveals the node at the cursor, and from the diagram you can jump back to open the corresponding editor — so the map and the source stay in step. The command palette has Dependinator: Search Nodes and Re-parse Solution, and the status bar shows when it is parsing. 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. It cannot parse code itself: enable device sync in both the extension and the web app and the models you build in VS Code are available wherever you are. Editing works there too, and you can sketch design models by hand.

Device sync

The cloud button in the toolbar opens the device sync status: who is signed in, whether this model is in sync, has local changes to upload, has a newer cloud copy to download, or a conflict to resolve, with a button for each. Enabling device sync 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. Changes sync automatically in the background (a message tells you when the diagram was updated from the cloud); if both copies changed, the conflict dialog shows when each changed and asks which one should win.