https://github.com/tmr232/function-graph-overview

Control-Flow Graph (CFG) Visualizer for VSCode
https://github.com/tmr232/function-graph-overview

control-flow-graph visualization vscode-extension

Last synced: 4 months ago
JSON representation

Control-Flow Graph (CFG) Visualizer for VSCode

• Host: GitHub
• URL: https://github.com/tmr232/function-graph-overview
• Owner: tmr232
• License: mit
• Created: 2024-08-30T17:41:39.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-10-01T19:21:52.000Z (9 months ago)
• Last Synced: 2025-10-07T01:28:14.719Z (9 months ago)
• Topics: control-flow-graph, visualization, vscode-extension
• Language: TypeScript
• Homepage: https://tmr232.github.io/function-graph-overview/
• Size: 5.91 MB
• Stars: 58
• Watchers: 2
• Forks: 6
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# Function Graph Overview

[Control-flow graph](https://en.wikipedia.org/wiki/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.

![Screenshot of the extension](./media/screenshots/banner_dark.png)

## Getting Started

1. Install via the [extension page](https://marketplace.visualstudio.com/items?itemName=tamir-bahar.function-graph-overview) 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](https://github.com/tmr232/jb-function-graph-overview)

for further instructions.

### Demo

You can try it out via an [interactive demo](https://tmr232.github.io/function-graph-overview/) 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                                                               |

| ---------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- |

| ![CFG with dark colors](media/screenshots/color-scheme/dark.png) | ![CFG with light colors](media/screenshots/color-scheme/light.png) | ![CFG with custom colors](media/screenshots/color-scheme/custom.png) |

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

You can change to a different preset via the settings:

![The "Color Scheme" menu in the VSCode settings](media/screenshots/color-scheme/settings.png)

### Custom Color Schemes

Custom color schemes are created via the [interactive demo](https://tmr232.github.io/function-graph-overview/).

1. Enable the `Color Picker` above the graph

2. Select the colors you want for your color scheme


   ![The interactive color picker](media/screenshots/color-scheme/color-picker.png)

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.


   ![The Custom Color Scheme field in the settings](media/screenshots/color-scheme/settings-custom.png)

## 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.

![Demonstration of pan & zoom in VSCode](media/gif/panzoom-demo.gif)

## Supported Languages

- [Go](https://tmr232.github.io/function-graph-overview/?language=go)

- [C](https://tmr232.github.io/function-graph-overview/?language=c)

- [C++](https://tmr232.github.io/function-graph-overview/?language=cpp)

- [Python](https://tmr232.github.io/function-graph-overview/?language=python)

- [TypesScript](https://tmr232.github.io/function-graph-overview/?language=typescript) & [TSX]((https://tmr232.github.io/function-graph-overview/?language=tsx))

- [JavaScript](https://tmr232.github.io/function-graph-overview/?language=typescript) & [JSX]((https://tmr232.github.io/function-graph-overview/?language=tsx))

- [C#](https://tmr232.github.io/function-graph-overview/?language=csharp)

- [Java](https://tmr232.github.io/function-graph-overview/?language=java)