Skip to content

tmr232/function-graph-overview

Repository files navigation

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.

Screenshot of the extension

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
CFG with dark colors CFG with light colors CFG with custom colors

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

Custom Color Schemes

Custom color schems are created via the interactive demo.

  1. Enable the Color Picker above the graph
  2. Select the colors you want for your color scheme
    The interactive color picker
  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

Supported Languages