This extension requires a CodeGraph-indexed workspace. On first launch it detects whether the project has been initialized and prompts you to run indexing.
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 sync silently in the background.
If a graph panel is open, a lightweight dataStale notification 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 dataStale message — 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.
You can also trigger indexing manually:
