CallWeb

Stop grepping to understand code flow. Put the cursor on any function, run one command, and CallWeb turns it into an accurate, explorable graph of who calls it and what it calls.

CallWeb asks the same language servers VS Code already uses (via the call hierarchy API), so results are as accurate as Go to Definition -> in any language with an LSP that supports call hierarchy (TypeScript, JavaScript, Python, Go, Rust, Java, C#, C/C++, and more).

Quick Start

Put the cursor on a function or method name.
Run CallWeb: Show Call Graph (Command Palette or right-click -> editor context menu).
Pick a direction:
- Incoming -> who calls this
- Outgoing -> what this calls
- Both -> callers and callees together
Explore the interactive tree that opens beside the editor.

Features

Accurate engine, language-server powered

Uses vscode.prepareCallHierarchy plus provideIncomingCalls / provideOutgoingCalls, recursing to a configurable depth (callWeb.maxDepth, default 3, capped at 6).
Works in any language whose language server supports call hierarchy.
When no call-hierarchy provider answers (plain text, exotic languages, server still warming up), CallWeb falls back to a regex text scan of your workspace and clearly badges every result as approximate, with a banner in the panel and a subtle status bar note.

Interactive graph panel

Collapsible tree with SVG connector lines; fully self-contained webview (no external libraries).
Each node shows the symbol name, containing file with line, and a call count badge (x3 = called 3 times from that site).
Click a node -> jump straight to its definition in the editor.
Click + -> expand a subtree; levels beyond the initial depth are fetched lazily from the language server on demand.
Recursion and cycles get a distinct cycle badge instead of expanding forever.
Breadcrumb bar traces the path from the root to the selected node (root -> caller -> deeper); click a crumb to reveal and scroll to that node.
Search box filters the tree: matches are highlighted, everything else is dimmed, and collapsed ancestors of matches auto-expand.
Huge graphs stay usable: each level is capped (callWeb.maxChildren) and the remainder collapses into an N more... indicator.

Export as DOT

The Export as DOT button in the panel (or the CallWeb: Export Current Graph as DOT command) copies Graphviz DOT text of the current graph to your clipboard.
Edges use plain -> syntax, so you can paste it into any Graphviz renderer:

digraph CallWeb {
  rankdir=LR;
  node [shape=box, style=rounded];
  "src/order.ts:12:processOrder" [label="processOrder\nsrc/order.ts:12"];
  "src/order.ts:30:validateOrder" [label="validateOrder\nsrc/order.ts:30"];
  "src/order.ts:12:processOrder" -> "src/order.ts:30:validateOrder";
}

Status bar

While the panel is open, the status bar shows CallWeb: <rootSymbol> | N nodes and updates as you lazily expand deeper levels.

Commands

Command	What it does
`CallWeb: Show Call Graph`	Build a call graph for the symbol at the cursor (QuickPick for direction). Also in the editor context menu.
`CallWeb: Export Current Graph as DOT`	Copy the open graph as Graphviz DOT text to the clipboard.

Settings

Setting	Default	Description
`callWeb.maxDepth`	`3`	Call levels fetched up front (1-6). Deeper levels load lazily when you expand nodes.
`callWeb.maxChildren`	`12`	Max children shown per node; the rest become an `N more...` indicator.
`callWeb.excludePatterns`	`node_modules`, `dist`, `out`, `build`	Globs skipped by the approximate text-scan fallback.

How It Works

vscode.prepareCallHierarchy resolves the symbol at your cursor through the active language server.
vscode.provideIncomingCalls and vscode.provideOutgoingCalls walk the graph in the direction you picked, level by level, up to callWeb.maxDepth.
Every node is cycle-checked against its ancestor chain; repeats are badged instead of re-expanded.
If step 1 returns nothing, a regex scanner searches workspace source files for definitions and call sites and builds an approximate graph, badged as such.

Example

Cursor on processOrder, direction Both:

processOrder                       src/order.ts:12
  Incoming (who calls processOrder)
    handleCheckout  x1             src/controller.ts:40
      startSession  x2             src/app.ts:9
  Outgoing (what processOrder calls)
    validateOrder   x1             src/order.ts:30
      checkInventory x1            src/inventory.ts:5
    calculateTotal  x2             src/order.ts:55
    sendConfirmation x1            src/mail.ts:14

Requirements

VS Code 1.85.0 or newer.
For exact results, a language server with call hierarchy support for your language (most built-in and popular extensions have it). Without one, CallWeb still works in approximate mode.

Author

Kanaihya Kumar - kanaihyakmr@gmail.com

License

MIT