FlowScope

Visualize IBM ACE message flows and subflows without Eclipse.

FlowScope renders .msgflow and .subflow files as interactive, audit-friendly pipeline diagrams directly in VS Code. Built for integration and payment platform teams migrating off IBM ACE / Eclipse-based toolkits.

FlowScope is the sibling of StateScope — they share design tokens and iconography, but each extension owns its accent color (FlowScope green, StateScope blue). Together they replace the aging IBM ACE + RSAD toolchain.

Features

Message Flow Viewer (.msgflow / .subflow)

• Zero-config — open a file, see the graph.
• Pan (drag), zoom (Ctrl/Cmd + scroll), fit to view.
• Drag nodes to rearrange layout interactively.
• Click any node to inspect queue names, ESQL references, compute modes, message domains.
• ESQL drill-down — click a Compute/Filter node's ESQL link to open the referenced .esql file in a side tab.
• Subflow drill-down — click a SubFlow node to open the referenced .subflow inside FlowScope.
• Connections color-coded by terminal type; failure paths shown as dashed red lines.
• View raw XML side-by-side with one click; export SVG of the current diagram.

For UML state-machine (.emx) files, pair with StateScope.

Node palette

Supported files

Installation

From VSIX

code --install-extension flowscope-*.vsix

From source

git clone https://github.com/ShoaibKhan/FlowScope.git
cd FlowScope
npm install
npm run build
npm run package
code --install-extension flowscope-*.vsix

Usage

• Automatic: open any .msgflow or .subflow file.
• Right-click: Explorer sidebar → Open in FlowScope.
• Command Palette: Cmd/Ctrl+Shift+P → FlowScope: Open in FlowScope.

Sample files

See samples/ for an example IBAN validation flow.

Tech

• TypeScript + esbuild (no runtime npm dependencies).
• SVG rendered in a CSP-locked webview (nonce-gated scripts, localResourceRoots scoped to media/).
• Regex-based XML parsing — no transitive dependency tree.

Security posture

• Webview scripts run under a strict Content-Security-Policy with a per-load CSPRNG nonce.
• No runtime npm dependencies; no eval, no dynamic Function construction.
• saveNodeProperties is regex-scoped to a specific xmi:id block and escapes the id/attribute key before use.
• .esql and .subflow drill-down uses vscode.workspace.findFiles with a hard **/node_modules/** exclusion and a bounded result count.
• Suitable for deployment inside regulated environments (financial institutions, air-gapped networks).

License

MIT

Part of the Scope Suite (StateScope + FlowScope). Built for enterprise devs who need IBM ACE / RSAD visibility without the Eclipse tax.