Function Graph Overview

Control-flow graph visualization for VS Code.

This extension adds a Graph Overview to VS Code, showing the CFG (control-flow graph) for the current function.

Getting Started

1. Install via the extension page at the VSCode Marketplace.

2. Open the command-palette (Ctrl+Shift+P or ⇧⌘P) and run the Function Graph Overview: Show Graph Overview command.

3. Open your code and place your cursor inside a function to see the graph.

4. You can drag the graph view to the other sidebar or to the bottom panel

JetBrains IDEs

If you're using a JetBrains IDE, see the JetBrains plugin for further instructions.

Demo

You can try it out via an interactive demo if you don't want to install it.

Note that the demo only supports a single function and ignores the cursor location.

Dark Mode

Both dark, light, and custom color schemes are supported.

Dark	Light	Custom

By default, the color scheme will match the VSCode theme (light or dark).

You can change to a different preset via the settings:

Custom Color Schemes

Custom color schemes are created via the interactive demo.

1. Enable the Color Picker above the graph
2. Select the colors you want for your color scheme
   
3. Press the Copy button to copy the color scheme into the clipboard
4. Paste the config into the Custom Color Scheme field in the VSCode extension settings.
   

Pan & Zoom

If the graph is too small, enable the "Pan & Zoom" checkbox. You can zoom with the mouse wheel, and pan by dragging the mouse. Additionally, the view will automatically pan to the highlighted node when it changes.

Supported Languages

• Go
• C
• C++
• Python
• TypesScript & TSX
• JavaScript & JSX