Call Flow Visualizer

A Visual Studio Code extension that visualizes function call hierarchies as interactive graphs, helping developers understand code relationships and navigate complex codebases more efficiently.

Features

• Interactive Call Flow Visualization: Right-click on any function/method and select "Show Call Flow" to see its call hierarchy as a graph
• Bidirectional Analysis: View both incoming calls (who calls this function) and outgoing calls (what this function calls)
• Interactive Navigation: Click on any node in the graph to jump directly to that function in the source code
• Customizable Depth: Configure how many levels deep the analysis should go (default: 3 levels)
• Smart Layout: Automatically arranges nodes in a hierarchical layout with the selected function at the center
• Theme Support: Adapts to VS Code's current color theme (light/dark/high contrast)

Installation

1. Download the latest .vsix file from the releases
2. Open VS Code
3. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
4. Click on the "..." menu and select "Install from VSIX..."
5. Select the downloaded file

Or install directly from the VS Code Marketplace (when published):

ext install call-flow-visualizer

Usage

Basic Usage

1. Open a source code file in VS Code
2. Place your cursor on a function or method name
3. Right-click to open the context menu
4. Select "Show Call Flow"
5. The call flow graph will open in a new panel

Graph Interaction

• Click on a node to open that function in the editor
• Double-click on a node to focus/zoom on it
• Hover over nodes to see file paths and connections
• Scroll to zoom in/out
• Drag to pan around the graph

Controls

• Fit: Fit the entire graph in the viewport
• Reset Zoom: Reset to default zoom level
• Re-Layout: Recalculate and redraw the graph layout

Keyboard Shortcuts

• F - Fit graph to viewport
• R - Reset zoom
• ESC - Clear selection

Configuration

You can customize the extension through VS Code settings:

{
  // Maximum depth for call hierarchy analysis (default: 3)
  "callFlowVisualizer.maxDepth": 3,

  // Show incoming calls (callers) (default: true)
  "callFlowVisualizer.showIncomingCalls": true,

  // Show outgoing calls (callees) (default: true)
  "callFlowVisualizer.showOutgoingCalls": true,

  // Graph layout direction: "TB" (Top-Bottom) or "LR" (Left-Right)
  "callFlowVisualizer.layoutDirection": "TB"
}

Language Support

The extension relies on VS Code's Call Hierarchy API, which requires language server support. Currently supported languages include:

• TypeScript/JavaScript
• Python
• Java
• C/C++
• C#
• Go
• Rust
• PHP
• And more (depends on installed language extensions)

Color Coding

• Blue Node: The selected function (target)
• Green Nodes: Functions that call the selected function (incoming)
• Red Nodes: Functions called by the selected function (outgoing)

Requirements

• VS Code version 1.80.0 or higher
• Language extensions that support the Call Hierarchy API

Known Issues

• Large call hierarchies (>100 nodes) may experience performance degradation
• Circular dependencies are detected and prevented from causing infinite loops
• Some languages may have limited call hierarchy support

Troubleshooting

"Call hierarchy is not available"

• Ensure your cursor is positioned on a function/method name
• Check that the language extension for your file type is installed and supports call hierarchy
• Try saving the file if you've made recent changes

Graph doesn't appear

• Check the Output panel (View > Output) and select "Call Flow Visualizer" for error messages
• Ensure JavaScript is enabled in VS Code webviews
• Try reloading the window (Ctrl+R / Cmd+R)

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

Development Setup

1. Clone the repository
2. Run npm install
3. Open in VS Code
4. Press F5 to start debugging

Building

npm run compile  # Compile TypeScript
npm run package  # Create VSIX package

License

MIT

Credits

• Built with Cytoscape.js for graph visualization
• Icons from VS Code's built-in icon set

Changelog

See CHANGELOG.md for version history.

Support

For bug reports and feature requests, please use the GitHub Issues page.