CallWeb

Stop grepping to understand code flow. Put the cursor on any function, run one command, and CallWeb turns it into an accurate, interactive graph of who calls it and what it calls - with color-coded incoming/outgoing arrows you can customize.

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

1. Put the cursor on a function or method name.
2. Run CallWeb: Show Call Graph (Command Palette or right-click -> editor context menu).
3. Pick a direction:
   • Incoming -> who calls this
   • Outgoing -> what this calls
   • Both -> callers and callees together
4. Explore the interactive graph that opens beside the editor - callers on the left, your function in the center, callees on the right.

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 (dashed node border), with a banner in the panel and a subtle status bar note.

Interactive graph panel

• A spatial, pannable/zoomable graph (self-contained SVG webview, no external libraries): callers spread to the left, the selected symbol sits in the center, callees spread to the right, laid out in tidy columns by depth.
• Color-coded, customizable arrows: incoming-call arrows and outgoing-call arrows get distinct colors and always point toward the function being called. Open the Legend to recolor incoming, outgoing, and root live with color pickers - your choices persist (and are also editable as callWeb.*Color settings).
• Hover a node to highlight its connections and see a tooltip (kind, file:line, call count, direction). Click a node to focus it (its edges pop, everything else dims) and open an info card with a clickable breadcrumb path from the root. Double-click (or the info card's Open definition) jumps straight to the source.
• Expand on demand: click the + circle on a node to fetch its next level from the language server; click - to collapse. Each node shows a call-count badge (×3 = called 3 times), and oversized levels show a +N more indicator.
• Pan by dragging the background, zoom with the wheel or the + / - / ⤢ controls, and Fit to frame the whole graph.
• Filter with the search box (matches stay lit, the rest dim) and toggle the Callers / Callees chips to focus a single direction.
• Recursion and cycles get a distinct ↻ cycle badge instead of expanding forever.

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

Settings

How It Works

1. vscode.prepareCallHierarchy resolves the symbol at your cursor through the active language server.
2. vscode.provideIncomingCalls and vscode.provideOutgoingCalls walk the graph in the direction you picked, level by level, up to callWeb.maxDepth.
3. Every node is cycle-checked against its ancestor chain; repeats are badged instead of re-expanded.
4. 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. Callers fan out to the left with incoming-colored arrows pointing into processOrder; callees fan out to the right with outgoing-colored arrows pointing out:

   startSession ─▶ handleCheckout ─▶┐            ┌─▶ validateOrder ─▶ checkInventory
                                    ├─▶ processOrder ─┤
                                    ┘            ├─▶ calculateTotal
                                                 └─▶ sendConfirmation
   (incoming / callers, left)     (root, center)   (outgoing / callees, right)

Hover any node to spotlight its connections, click it to focus and see the breadcrumb path back to the root, click the + circle to pull in the next level, and double-click to jump to the definition. Open the Legend to recolor the incoming, outgoing, and root palette to your taste.

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