DepsView

Real-time dependency graph for your codebase. See your architecture, detect issues, and understand impact — at a glance.

Why DepsView?

AI coding tools generate code fast, but they don't see your architecture. They create phantom imports, circular dependencies, and tightly-coupled modules — and you won't notice until the project breaks.

DepsView gives you a live architectural map that updates in real-time as files change. You see what's connected, what's broken, and what's at risk — at a glance.

No other tool does this. Dependency Cruiser generates static SVGs. CodeSee is async. Graph-It-Live has no heatmap. DepsView is the only tool that shows modification activity on a live dependency graph.

Features

Live dependency graph

Interactive graph with hierarchical clustering. Files grouped by folder, colored by category (component, hook, service, page, util, config, test). Edges appear on hover — clean view by default.

Expand all

Unfold every cluster to see all files at once. Full inventory of your project.

Focus mode

Click any file or folder to isolate its connections. Toggle depth 1 (direct) or depth 2 (indirect). Everything else fades. Press Esc to exit.

Depth 1 — direct connections	Depth 2 — indirect connections

Real-time heatmap

Recently modified files pulse with heat animations. See what the AI is touching right now.

Architectural detections

Circular dependencies (CYCLE badge), phantom imports (missing files), shadow imports (AI hallucinations), orphan files, excessive coupling.

Impact radius

Hover any file to see impact rings: which files break if you modify it. Three levels: direct (red), indirect (orange), far (yellow).

Context Bridge

One-click copy of architectural context optimized for LLM prompts. Generate a diagnostic report or copy a fix prompt for any issue.

MCP Server

AI assistants query your architecture directly. No copy-paste needed.

Export PNG

High-resolution 2x retina export for docs, PRs, and architecture reviews.

Search

Ctrl+F to find files by name. Navigate with Enter/arrows.

Install

VS Code / Cursor / Windsurf

Search DepsView in the Extensions marketplace, or:

ext install depsview.depsview

Open the command palette (Ctrl+Shift+P) and run DepsView: Show Dependency Graph.

The graph updates automatically on every file save.

Standalone browser (no VS Code needed)

npx depsview serve .

Open http://localhost:7890. The graph updates live as you edit files in any editor.

# Custom port
npx depsview serve /path/to/project --port 8080

CLI

npx depsview scan . --pretty
npx depsview scan /path/to/project -o graph.json

MCP Server

Give your AI assistant direct access to architectural data.

Claude Code (.claude/settings.json):

{
  "mcpServers": {
    "depsview": {
      "command": "node",
      "args": ["/path/to/depsview/dist/mcp.js", "--project", "."]
    }
  }
}

Tools

Keyboard shortcuts

Supported languages

Configuration

VS Code settings (settings.json):

{
  "depsview.entryPointPatterns": ["scripts/"],
  "depsview.couplingThreshold": 10,
  "depsview.diagnostics": {
    "cycle": "error",
    "phantom": "error",
    "shadow": "warning",
    "orphan": "hint",
    "coupling": "hint"
  }
}

License

MIT