Dependency Graph

Visual dependency graph of your workspace’s local imports. Output as a Mermaid flowchart — renders in chat or copyable into docs.

Languages

Language	Import pattern detected
TypeScript (.ts)	import ... from '...'
JavaScript (.js)	import ... from '...'
TSX (.tsx)	import ... from '...'
JSX (.jsx)	import ... from '...'
Python (.py)	Planned (regex import / from)
Go (.go)	Planned (regex import)

JS/TS fully parsed. Python and Go files are indexed as nodes but edge detection currently only handles ES module import ... from '...'.

Flow

sequenceDiagram participant User participant DG as DependencyGraphService participant VS as Workspace participant Cache User->>DG: generateGraph() DG->>Cache: Check cache alt Hit Cache-->>User: Cached Mermaid string else Miss DG->>VS: findFiles("**/*.{ts,js,jsx,tsx,py,go}")<br/>Excl: node_modules, dist, .git VS-->>DG: Up to 50 files loop Each file DG->>DG: Read + regex-extract imports DG->>DG: Resolve local imports (start with ".") DG->>DG: Add node + edges end DG->>DG: Build "graph TD" string DG->>Cache: Store DG-->>User: Return end

Behavior

Cache invalidation. FileSystemWatcher on **/*.{ts,js,jsx,tsx,py,go} — any create/change/delete invalidates. Next generateGraph() rebuilds.

Local imports only. Paths starting with . become edges. Third-party packages (lodash, react, etc.) excluded to keep the graph focused on your code.

File limit. Up to 50 files per workspace to prevent unwieldy graphs. Excluded dirs: node_modules, dist, out, .git, .vscode.

Node sanitization. Filenames sanitized for Mermaid: non-alphanumerics → underscores in node IDs; human-readable label preserves the original filename.

Example output

graph TD index_ts[index.ts] app_ts[app.ts] auth_service_ts[auth.service.ts] user_controller_ts[user.controller.ts] database_ts[database.ts] index_ts --> app_ts app_ts --> auth_service_ts app_ts --> user_controller_ts user_controller_ts --> auth_service_ts auth_service_ts --> database_ts

Force regenerate

Bypass the cache:

const graph = await dependencyGraph.generateGraph(true);

Useful after bulk file operations where the file watcher may not have caught all changes.

Usage

Available as an agent tool. Ask:

Show me the dependency graph for this project

Agent calls DependencyGraphService.generateGraph() and renders the Mermaid output in the chat.

Related

• Codebase analysis — full architectural analysis, superset of dependency graph