DSA Flow Visualizer

DSA Flow Visualizer is a beginner-friendly VS Code extension that helps you understand how Dart console DSA programs execute.

Open a Dart file, click the editor run button, and see the program flow as a visual timeline with variables, call stack, output, and graph playback.

Features

• Auto-traces simple Dart console programs without manual trace code.
• Shows the currently executing line and source statement.
• Displays variables and highlights value changes.
• Shows the call stack for each captured step.
• Groups repeated loop flow in the graph, such as Loop x20 and Print x20.
• Includes Play, Pause, Previous, Next, and speed controls.
• Shows normal program output separately from trace data.
• Stops long runs after 10 seconds and auto trace after 300 steps so stuck loops still show the last captured step.

How To Use

1. Open a .dart console file.
2. Click the DSA Flow Visualizer play button in the editor title area.
3. Review the visual graph, current line, variables, stack, and output.

You can also run the command from the Command Palette:

DSA Flow Visualizer: Auto Visualize Current Dart File

Example

void main() {
  for (var i = 0; i < 20; i++) {
    print(i);
  }
}

The visualizer groups the repeated loop flow so it is easier to read:

Start -> Loop x20 -> Print x20 -> Stop

Selecting a step shows the active line, current stack, and variables such as i.

Supported Programs

This extension currently focuses on Dart console DSA practice files.

Auto trace works best with beginner-friendly Dart syntax:

• normal functions
• variable declarations
• assignments
• if
• for
• while
• print
• return

Flutter apps, UI lifecycle debugging, isolates, async-heavy apps, and real debugger integration are not supported yet.

Manual Trace Events

Manual JSON trace events are still supported for advanced or custom cases. Print one JSON object per line:

{
  "step": 1,
  "lineNumber": 12,
  "functionName": "findMax",
  "explanation": "Compare the current value with max.",
  "variables": {
    "current": 9,
    "max": 4
  },
  "stack": ["main", "findMax"]
}

There is also a helper command:

DSA Flow Visualizer: Insert Manual Trace Event

Development

npm install
npm run compile

Open this folder in VS Code and press F5 to launch an Extension Development Host.

Publishing Notes

Before publishing, replace your-publisher-id in package.json with your real VS Code Marketplace publisher ID.

Then package or publish with vsce:

npm install -g @vscode/vsce
vsce package
vsce publish