Code Chart Lens

Code Chart Lens is a VS Code extension that turns a selected C# method into an interactive vertical call-flow diagram. It is designed for quickly understanding controller-to-service-to-repository execution paths, including common error paths.

The current release supports C# source files. Support for additional languages is planned for future releases.

For a clean machine, install the .NET 8 runtime (or SDK for development) and VS Code. The packaged helper is framework-dependent and does not require Node.js after the VSIX is installed.

Functionality

• Analyzes C# source files (.cs) only.
• Starts from the method containing the current cursor or selection.
• Resolves method calls with Roslyn semantic analysis rather than name-only text matching.
• Discovers .sln and .csproj files for workspace context, while analyzing only .cs source files.
• Displays class name, method name, parameters, file path, and source line for every node.
• Renders a graph with depth-based layout and curved connectors.
• Uses vivid green connectors for the happy path.
• Uses red connectors for detected throw, catch, early failure returns, and explicit else paths.
• Shows separate happy/unhappy outcomes for conditional returns such as return ok ? Ok() : BadRequest().
• Opens the exact source location when a node is clicked.
• Shows progress while analysis runs and supports cancellation.
• Packages the compiled Roslyn helper inside the VSIX.

Using the extension

1. Open a C# workspace in VS Code.
2. Open a .cs file and place the cursor inside a controller, API, service, or other method.
3. Click Show Code Chart above the method, or run Code Chart Lens: Show Code Chart for Selection from the Command Palette.
4. Explore the generated graph.
5. Click any node to navigate directly to its class and method.

Example chart

The interactive chart in VS Code presents the same kind of execution flow as this example:

flowchart TD
    A[OrdersController.GetOrder] --> B[OrderService.GetOrder]
    B --> C[OrderRepository.FindById]
    C -->|order found| D[Return Ok]
    C -->|not found| E[Return NotFound]
    B -->|service failure| F[Throw OrderException]
    A -->|exception caught| G[Return Problem]

    classDef happy fill:#14532d,stroke:#22c55e,color:#fff
    classDef unhappy fill:#7f1d1d,stroke:#ef4444,color:#fff
    class A,B,C,D happy
    class E,F,G unhappy

Green nodes and connectors represent the happy path; red nodes and connectors represent detected error or unhappy paths. Select a C# method and choose Show Code Chart to generate a chart from your own code.

The extension rejects solution files, project files, and non-C# documents. Open the containing workspace folder for the best cross-file results.

Architecture

The TypeScript extension hosts the webview and owns navigation. The C# helper uses Roslyn to parse source, build a compilation, resolve invocation symbols, and return a small JSON flow model. The separation is intentional:

VS Code command
      ↓
LanguageAnalyzerFactory
      ↓
Roslyn C# helper
      ↓
JSON nodes and edges
      ↓
SVG webview graph

Language support is extensible through LanguageAnalyzer and AnalyzerFactory. A future TypeScript, Java, or Python implementation can provide the same CodeFlow model without changing the renderer.

Project layout

• src/extension.ts — VS Code command, webview, and source navigation.
• src/analyzers.ts — language analyzer interface and Roslyn process bridge.
• src/model.ts — shared node and edge types.
• roslyn-analyzer/Program.cs — Roslyn analysis service.
• tests/fixtures/FlowFixture.cs — cross-file analysis fixture.
• scripts/smoke.ps1 — end-to-end Roslyn smoke test, including conditional outcomes.

Build and test

Install dependencies, restore Roslyn, compile, and run the smoke test:

npm install --strict-ssl=false
dotnet restore roslyn-analyzer\CodeFlow.Roslyn.csproj
npm run compile
npm run test:roslyn
npm run test:extension
npm run benchmark

To launch the extension development host, open the folder in VS Code and press F5.

To create a distributable VSIX:

npm run package

The package is written to the workspace root as code-chart-lens-0.0.3.vsix.

Release history is in CHANGELOG.md. To roll back, use Extensions: Install Another Version... and select the previous VSIX, then run Developer: Reload Window.

Current analysis scope

The analyzer follows statically resolvable method invocations and identifies explicit throw, catch, if/else, and return constructs. Conditional returns are split into separate outcomes when their true/false expressions are available. Dynamic dispatch, reflection, generated code, external binaries, and every possible runtime branch are not guaranteed to appear. Roslyn compilation diagnostics are tolerated so incomplete codebases can still produce partial flows.