Code Vision is a Visual Studio Code extension that visualizes function call relationships in your codebase using a butterfly graph (Call Tree). This visualization helps developers better understand and explore their code by showing both callers and callees of selected functions.
Features
Interactive Function Call Visualization
Display function call relationships in a butterfly graph format
Central node shows the selected function
Left side shows calling functions
Right side shows called functions
Supported Languages
C/C++
Python
(More languages coming soon)
Key Features
Right-click on any function to view its butterfly graph
Double-click nodes to jump to function definitions
Configurable depth for caller and callee hierarchies
Customizable node display limits per level
Installation
Open Visual Studio Code
Press Ctrl+P to open the Quick Open dialog
Paste the following command and press Enter:
ext install CodeVision
Click the Install button
Usage
Open a supported source code file
Right-click on any function
Select "Show Butterfly Graph" from the context menu
The butterfly graph will appear in a new panel
Basic Controls
Double-click a node: Jump to function definition
Use mouse wheel: Zoom in/out
Click and drag: Move the node
Configuration
The extension can be configured through VS Code settings:
{
"butterflyGraph.callerLevels": 2, // Number of caller hierarchy levels
"butterflyGraph.calleeLevels": 2, // Number of callee hierarchy levels
"butterflyGraph.maxNodesPerLevel": 10, // Maximum nodes per level
"butterflyGraph.theme": "default" // Graph color theme
}
Requirements
Visual Studio Code 1.99.1 or higher
Language Server Protocol (LSP) support for your programming language
For C/C++: Install "C/C++" extension (ms-vscode.cpptools)
For Python: Install "Python" extension (ms-python.python)
Known Issues
Large codebases may experience slower performance
Some dynamic language features may not be fully supported
Limited support for certain language-specific features
