Interactive call-graph visualization for VS Code powered by CodeGraph and AntV G6.
- Browse the full call graph of any file with a single right-click
- Trace a selected symbol's callers and callees
- Expand / collapse nodes on the fly with double-click
- Navigate to source definitions via right-click context menu
- Background incremental sync on file save with stale-data notification
- Undo / redo, zoom controls, adaptive canvas resize
Requirements
This extension requires a CodeGraph-indexed workspace. On first launch it detects whether the project has been initialized and prompts you to run indexing.
You can also trigger indexing manually:
- Command Palette (
Ctrl+Shift+P) →CodeGraph: Initialize / Re-index
Indexing runs in the background via npx @colbymchenry/codegraph init. Progress shows elapsed time and a codebase-size-based estimate (e.g. ~3 min for 1500 source files).
Usage
-
Open any source file in a CodeGraph-indexed workspace.
-
Right-click the editor →
CodeGraph: Show Node Graph.
- No selection: the graph shows all functions, methods, and classes in the current file and their immediate call relationships.
- With text selected: the graph centers on that symbol — showing its callers (incoming) and callees (outgoing).
-
The graph opens in a side panel and fills it adaptively.
Graph interactions
| Action | Result |
|---|---|
| Double-click a node | Expand one level — query callers and callees of that node. Expanded nodes get an orange glow highlight. |
| Double-click an expanded node | Collapse its subtree (highlight removed) |
| Right-click a node | Context menu with Source (jump to definition) and Detail (full node metadata) |
| Right-click canvas | Context menu with Copy YAML and Copy Markdown Tree (export full graph) |
| Drag canvas | Pan the view |
| Scroll | Zoom in / out |
| Drag a node | Reposition it |
| Resize panel / window | Canvas automatically fills the new viewport |
Toolbar
| Button | Action |
|---|---|
| Undo / Redo | Step through expand / collapse history |
| Reset | Return to the initial graph (clears undo history) |
| ⚠ Outdated badge | Appears when the codebase changes behind the scenes |
| ↻ Reload | Rebuild the graph from the latest indexed data |
| Zoom In / Zoom Out / Fit | Adjust the viewport |
Background Sync & Stale Notification
When you save a file in the workspace:
- The extension debounces saves (2 s) and runs
codegraph syncsilently in the background. - If a graph panel is open, a lightweight
dataStalenotification is sent — no heavy data transfer. - A ⚠ Outdated badge appears in the toolbar.
- Click ↻ Reload to rebuild the graph with the latest data. The refresh tries to preserve your current view context (symbol or file), automatically picking up renamed symbols via the cursor position.
Extension Settings
This extension contributes the following settings (codegraphG6.*):
| Setting | Type | Default | Description |
|---|---|---|---|
codegraphG6.maxDepth |
number |
2 |
Default expansion depth when opening a graph (1–10) |
codegraphG6.direction |
string |
both |
Traversal direction: both, upstream (callers only), or downstream (callees only) |
Commands
| Command | ID | Description |
|---|---|---|
CodeGraph: Show Node Graph |
codegraph-g6.showGraph |
Open the call graph for the current file or selected symbol |
CodeGraph: Initialize / Re-index |
codegraph-g6.manualInit |
Run CodeGraph indexing on the workspace |
How It Works
- CodeGraph parses the project into a SQLite knowledge graph. It uses Tree-sitter AST extraction rather than a full LSP — making it lightweight, local, and language-agnostic.
- On
Show Node Graph, the extension queries CodeGraph for nodes and edges relevant to the current file or selected symbol. - The data is rendered as an interactive DAG using AntV G6 in a VS Code webview panel.
- Double-clicking a node triggers an incremental backend query; new nodes and edges are added without rebuilding the entire layout.
- On file save, CodeGraph runs an incremental sync. The webview is notified via a lightweight
dataStalemessage — no full graph data is pushed until the user clicks Reload.
Supported Languages
All languages supported by CodeGraph are available in this viewer:
TypeScript · JavaScript · Python · Go · Rust · Java · C# · PHP · Ruby · C · C++ · Objective-C · Swift · Kotlin · Scala · Dart · Lua · Luau · R · Svelte · Vue · Astro · Liquid · Pascal/Delphi
See the CodeGraph README for details on file extensions and framework-specific features.