Raptor

C-Chart — VS Code Extension

A bidirectional RAPTOR-style flowchart editor for C programs. Parses all C functions in a .c file into an interactive SVG flowchart with tabs, and keeps the code and chart in sync.

---

Prerequisites

Requirement	Version
Node.js	≥ 18
npm	≥ 9
VS Code	≥ 1.85

---

Setup

cd raptor-flowchart
npm install
npm run compile

---

Launch (F5 debug)

1. Open the raptor-flowchart/ folder in VS Code.
2. Press F5 — this compiles and launches an Extension Development Host window.
3. In the new window, open sample/demo.c.
4. Run RAPTOR: Open Flowchart from the Command Palette (Ctrl+Shift+P).

A side panel opens with the interactive flowchart.

---

Usage

Navigating functions

• Each C function appears as a tab at the top of the panel.
• Click a tab to switch to that function’s flowchart.
• Click + (after the last tab) to create a new function — fill in name, return type, and parameters.

Editing nodes

• Double-click any node shape to edit its content (label, condition, or for header).
• For call nodes use the format result = funcName(args) or funcName(args).
• For for nodes use the format init; condition; increment.

Inserting nodes

• Click the blue + circle on any arrow to insert a new node at that position.
• A context menu appears: Assign / I/O / If / While / For / Call.
• The insert respects nesting — clicking + inside a while body inserts into that body.

Sync behaviour

| Direction | Trigger | |—|—| | Code → Chart | Save the .c file (Ctrl+S) | | Chart → Code | Any node edit or insertion in the webview (immediate) |

---

IR Schema Reference

FunctionIR {
  name:       string        // C function name
  returnType: string        // e.g. "int", "void"
  params:     string        // raw param list, e.g. "int n"
  body:       FlowNode[]    // always starts with start, ends with end
}

IR { functions: FunctionIR[] }

FlowNode =
  | { type: "start" }
  | { type: "end" }
  | { type: "assign",  label: string }
  | { type: "io",      label: string }
  | { type: "if",      condition: string, trueBranch: FlowNode[], falseBranch: FlowNode[] }
  | { type: "while",   condition: string, body: FlowNode[] }
  | { type: "for",     init: string, condition: string, increment: string, body: FlowNode[] }
  | { type: "call",    name: string, args: string, assignTo?: string }

Node shapes

Node type	SVG shape	Colour
start / end	Oval (ellipse)	Green / Red
assign	Rectangle	Blue
io	Parallelogram	Orange
if / while / for	Diamond	Olive
call	Rectangle + double side stripes	Purple
call (recursive)	As above + ↺ loop arc	Purple + Red arc

---

Extending to more languages

Add a new generator function in src/parser.ts:

export function generateJava(ir: IR): string {
  // emit Java class + methods from ir.functions
}

The IR is language-agnostic — the same FunctionIR[] structure works for any imperative language.

---

Project structure

raptor-flowchart/
├── src/
│   ├── ir.ts          — IR type definitions (pure types, no runtime code)
│   ├── parser.ts      — C parser + C/Python code generators
│   ├── webview.ts     — Self-contained HTML/SVG/JS flowchart panel
│   └── extension.ts  — VS Code activation, command, bidirectional sync
├── sample/
│   └── demo.c        — Sample file exercising all node types
├── out/               — Compiled JS (generated by tsc)
├── package.json
└── tsconfig.json