Function Graph Overview (for Visual Studio)

See live control-flow-graphs of your code!

This extension adds a CFG (Control-Flow-Graph) view for the current function in Visual Studio 2022.

Before installing, you can also try an interactive demo.

The extension currently supports C, C++, C#, Go, Java, Python, Javascript, TypeScript & TSX.

This is a port of the Function-Graph-Overview to Visual Studio.

Installation

• Using the IDE built-in extension manager:

  Extensions > Manage Extensions > Search for "Function Graph Overview" > Install

• You can also download the .vsix from the latest release and install it manually by double-clicking the file.

Getting Started

1. Open the tool window via View > Other Windows > Function Graph Overview.
2. Open a supported source file and place your cursor inside a function.
3. The graph updates automatically as you move between functions or edit code.

Features

• Live CFG rendering — automatically generates and displays a control flow graph for the function under the cursor as you navigate your code.
• Click-to-navigate — click a node in the graph to jump to the corresponding source location.
• Color scheme — choose between Dark, Light, System (follows IDE theme), or Custom (paste your own color scheme JSON).
• Configurable — toggle simplification, flat switch rendering, and current node highlighting.

All settings are available under Tools > Options > Function Graph Overview.

Settings

Color Scheme

To change the color scheme of the CFG, open the settings and go to Tools > Options > Function Graph Overview.

In the Color scheme field, you can choose between built-in color schemes (Dark, Light, System), or create your own:

1. Open the interactive demo
2. Enable the Color Picker above the graph
3. Select the colors you want for your color scheme
4. Press the Copy button to copy the color scheme into the clipboard
5. In Visual Studio, go to Tools > Options > Function Graph Overview
6. Select Custom in the Color scheme dropdown and paste the JSON into the Custom color scheme text field

Flat Switch

Use the Flat switch setting to change between two rendering modes for switch-like statements:

Flat Switch Enabled	Flat Switch Disabled

Contributing

See CONTRIBUTING.md for build instructions, architecture overview, and development workflow.