Code Call Graph Editor

Visualize Code Call Relationships in VS Code — Function/Method call graph visualization with graphical editing, code navigation, and multiple layout algorithms.

English | 简体中文

Overview

Installation

From VS Code Marketplace

Open VS Code
Open Extensions panel (Ctrl+Shift+X)
Search for Code Call Graph Editor
Click Install

Windows Dev Environment (from source)

If you develop this repo on Windows and see errors like Cannot find module 'vscode', Cannot find module 'path', or npm is not recognized, run:

# 1) Install Node.js LTS (user scope)
winget install --id OpenJS.NodeJS.LTS --exact --source winget --scope user --accept-package-agreements --accept-source-agreements --disable-interactivity

# 2) Reopen VS Code (PATH refresh)

# 3) Install dependencies
npm.cmd install

# 4) Verify build
npm.cmd run compile

If npm is still not recognized in current PowerShell session, refresh PATH in-session:

$machinePath = [Environment]::GetEnvironmentVariable('Path','Machine')
$userPath = [Environment]::GetEnvironmentVariable('Path','User')
$env:Path = "$machinePath;$userPath"

Then run npm.cmd -v and npm.cmd run compile.

If TypeScript diagnostics still persist in editor:

TypeScript: Select TypeScript Version → Use Workspace Version
TypeScript: Restart TS Server
Developer: Reload Window

Quick Start

In code editor, place cursor on a function/method definition
Right-click and select Create Call Graph, or press Ctrl+Shift+G
Auto-generate .callgraph.json file and open the graphical editor
Double-click nodes to jump to corresponding source code

Core Features

One-Click Call Graph Generation

Place cursor on any function/method and press Ctrl+Shift+G to automatically analyze call chains and generate a call graph. Based on LSP Call Hierarchy protocol, supports all languages that provide this capability. Generate Call Graph

Graphical Editor

Canvas editor based on AntV X6 with rich interactive operations:

Double-click canvas — Create Code node
Right-click canvas — Create Code or Note node
Drag nodes — Move freely
Box selection/Multi-select — Batch operations
Toolbar connect button — Enter connection mode, click target node to create edge
Copy/Paste — Ctrl+C / Ctrl+V
Undo/Redo — Ctrl+Z / Ctrl+Y

Graphical Editor

Code Navigation: Double-click Code nodes to automatically open corresponding source files and highlight method definitions.

Method Library: Press Ctrl+Shift+M in code to add method at cursor to library. In canvas, click node toolbar's bind button to select and bind methods from library.

Code Navigation & Method Binding

Add to Active Call Graph

From a code editor, right-click a function/method and choose Add to Active Call Graph.

Behavior:

If there are opened call graph pages, it appends to the last recorded active .callgraph.json page.
If no call graph page is currently opened, it shows a picker of all .callgraph.json files in workspace.
After selection, the extension opens that call graph page and appends the method node.
If no .callgraph.json exists in workspace, it shows a warning.

Multiple Layout Algorithms

Built-in 4 graph layout algorithms, switch via top-right dropdown:

Algorithm	Features
Dagre	Classic hierarchical layout, suitable for most call graphs (default)
ELK Layered	Advanced hierarchical layout with better edge crossing minimization
ELK Tree	Tree layout, ideal for pure tree-like call relationships
Custom (BFS)	Custom breadth-first layout

Supports Top-to-Bottom (TB) and Left-to-Right (LR) directions. Edge routes auto-refresh when switching directions.

Supports Global Layout (when no nodes selected) and Partial Layout (layout only selected nodes). Layout Algorithms

Alignment & Distribution

When 2+ nodes are selected, alignment toolbar auto-appears at canvas bottom:

Align: Left, Horizontal Center, Right, Top, Vertical Center, Bottom
Distribute: Horizontal/Vertical even spacing (requires 3+ nodes)
Auto Layout (Selected): Apply layout to selected nodes only

Snap guides assist manual alignment when dragging nodes.

Alignment & Distribution

Tag System

Add colored tags to Code nodes for categorization:

Predefined Tags: Loop, Condition, Async, Entry, Critical, Todo (colors configurable)
Custom Tags: Right-click node → Tags → New Tag
Toggle Tags: Check/uncheck in right-click node → Tags menu

Tags display at node bottom as colored pills.

Tag System

Note Nodes & Markdown

Note nodes support full Markdown rendering, perfect for adding annotations to call graphs:

Headers, lists, bold/italic, code blocks, tables
Interactive Checkboxes: Use - [ ] / - [x] syntax, click to toggle
Resizable: Drag bottom-right handle when selected
Edit Mode: Double-click to enter raw Markdown editing

Note Nodes

Edge Highlighting & Selection

When node is selected, all connected edges auto-highlight in blue
When edge is directly selected, displays with thicker style and higher z-index
Multi-layer zIndex management for clear distinction of overlapping edges

The sidebar provides a Call Graph Explorer panel that lists all .callgraph.json files in your workspace and their node structure.

Two display modes, toggle via toolbar button:

Mode	Description
Flat	Lists all nodes alphabetically under each file
Tree	Shows call relationship tree — root nodes (in-degree = 0) are collapsible, child nodes are always expanded. Same node may appear under multiple parents (DAG → tree)

Key interactions:

Action	Behavior
Click file row	Opens the call graph editor tab
Click expand/collapse arrow	Toggle file's node list
Click node	Navigate to source code definition
`Ctrl+Click` node	Select and highlight node in graph editor
Hover node	Highlight all occurrences of same node in sidebar (same file only)
Right-click file	Open, Reveal in Explorer, Delete
Right-click node	Go to Code, Select in Graph, Copy Name, Copy Qualified Name

Bidirectional sync with graph editor:

Clicking a node in the graph editor auto-selects the corresponding node in the sidebar
Ctrl+Click a node in the sidebar selects and centers that node in the graph editor (opens the file if not already open)

Cross-graph copy & paste:

Copy nodes from one call graph and paste into another:

Select nodes in graph A → Ctrl+C (or right-click → Copy Nodes)
Switch to graph B tab → Ctrl+V (or right-click canvas → Paste Nodes)
Copied nodes appear at viewport center with new IDs. Edges between copied nodes are preserved.

AI / Copilot Integration

This project includes .github/copilot-instructions.md defining AI instructions for call graph data format.

Method 1: Copilot Auto-Recognition

If your project has .github/copilot-instructions.md, VS Code Copilot will auto-read it. Just chat directly:

"Analyze the Calculator class call relationships in src/services/calculator.ts and generate callgraph.json"

Method 2: Copy Prompt Template

For other AI tools, copy this prompt template and replace {file path or code}:

Please analyze the function call relationships in the following code and generate XX.callgraph.json.

Requirements:
- Output JSON format with nodes and edges arrays
- Each node contains: id, label, type("code"), symbol(name, uri, containerName, line, signature)
- Each edge contains: from(caller id), to(callee id)
- Label format: For class methods, use "methodName\nClassName" (\n for newline)
- Line numbers start from 0
- URI uses workspace-relative paths
- Signature format:
  * Typed languages (TypeScript/Java/C#/Go/Rust): parameter types only, e.g., "(number, string)"
  * Untyped languages (Python/Ruby/Lua/JavaScript): parameter names, e.g., "(name, level)"

Code:
{file path or code}

AI will output .callgraph.json content in the correct format. Save as xxx.callgraph.json to open in editor.

Note Node Quick Prompt

Use this when you want to summarize content and add a note node to an existing file:

Summarize {content} and add a note node to {file}.

Requirements:
- Keep all existing nodes and edges unchanged
- Append one node: id "note-1", label "Note", type "note"
- content: short Markdown summary of {content}
- edges: leave as-is (do not add new edges)

Keyboard Shortcuts

Global Shortcuts

Shortcut	Function
`Ctrl+Shift+G`	Generate call graph from method at cursor
`Ctrl+Shift+M`	Add method at cursor to method library

Canvas Shortcuts

Shortcut	Function
`Delete` / `Backspace`	Delete selected nodes or edges
`Ctrl+Z`	Undo
`Ctrl+Y` / `Ctrl+Shift+Z`	Redo
`Ctrl+C`	Copy selected nodes (also copies to cross-graph clipboard)
`Ctrl+V`	Paste nodes (from same graph or cross-graph clipboard)
`F2`	Edit selected node/edge text
`Space`	Select all text and edit
`Esc`	Cancel connection mode / Cancel edit
Type characters	Clear text and type (when single node/edge selected)

Configuration

Search callGraph in VS Code Settings to configure:

Setting	Type	Default	Description
`callGraph.predefinedTags`	array	6 predefined tags	Predefined tag list (name + color)
`callGraph.codeNodeColor`	object	`{fill: "#1e3a5f", stroke: "#4a9eff"}`	Code node colors
`callGraph.noteNodeColor`	object	`{fill: "#1A1A1A", stroke: "#555555"}`	Note node colors
`callGraph.unboundCodeNodeColor`	object	`{fill: "#3d2020", stroke: "#d48a8a"}`	Unbound code node colors
`callGraph.locationFallbackNodeColor`	object	`{fill: "#3d3520", stroke: "#d4a84a"}`	Location fallback node colors (LSP not found, using line number)
`callGraph.showFileNameTag`	boolean	`false`	Auto-show filename tags
`callGraph.fileNameTagColor`	string	`"#607D8B"`	Filename tag color
`callGraph.removeMethodAfterBind`	boolean	`false`	Remove method from library after binding

File Format

Call graphs are stored as .callgraph.json files, essentially standard JSON:

{
  "title": "Calculator Call Graph",
  "nodes": [
    {
      "id": "node-1",
      "label": "add\nCalculator",
      "type": "code",
      "symbol": {
        "name": "add",
        "uri": "src/calculator.ts",
        "containerName": "Calculator",
        "line": 22,
        "signature": "(number, number)"
      },
      "tags": ["Entry"]
    },
    {
      "id": "note-1",
      "label": "Note",
      "type": "note",
      "content": "# Note\nThis is a description"
    }
  ],
  "edges": [
    {
      "from": "node-1",
      "to": "node-2",
      "type": "call"
    }
  ]
}

Node Types:

code — Code node, bound to function/method in source file
note — Note node, supports Markdown content

Edge Types:

call — Call relationship (gray arrow)
explain — Explanation relationship (gold arrow)

Supported Languages

This extension is based on VS Code LSP's Call Hierarchy capability, theoretically supporting all languages that provide it:

TypeScript / JavaScript
C# (.NET)
Java
Python
Go
C / C++
Rust
And other language service extensions supporting Call Hierarchy

Manual node creation and AI-generated call graphs don't rely on LSP, supporting any language.

Internationalization

简体中文 (Simplified Chinese)
English

The extension automatically switches based on VS Code's language settings.

Donate

If this project helps you, feel free to buy me a coffee :)

Alipay Donation:

Thank you for your support!

Feedback

If you have any suggestions or feature requests, feel free to open an issue on GitHub Issues, or contact me via email: 1908191241@qq.com

License

MIT

Code Call Graph Editor

dear-my-dear

Code Call Graph Editor

Installation

Windows Dev Environment (from source)

Quick Start

Core Features

One-Click Call Graph Generation

Graphical Editor

Code Navigation & Method Binding

Add to Active Call Graph

Multiple Layout Algorithms

Alignment & Distribution

Tag System

Note Nodes & Markdown

Edge Highlighting & Selection

Sidebar Explorer

AI / Copilot Integration

Keyboard Shortcuts

Global Shortcuts

Canvas Shortcuts

Configuration

File Format

Supported Languages

Internationalization

Donate

Feedback

License