Orchestrate Flow Viewer

A VS Code / Cursor extension that renders Workday Orchestrate .orchestration and .suborchestration files as interactive flow diagrams.

Exported Orchestrate projects store each flow as a single line of deeply nested JSON, which is unreadable in a text editor. This extension draws the flow the way Workday's own builder does: a trigger card at the top, steps flowing downward, IF/ELSE branches fanning out side by side, loop bodies nested under their loop card, and error handlers surfaced on the cards that own them.

⚠️ Read-only viewer: for reference and clarity only. This extension renders flows so you can read and review them. It does not edit, validate, or compile anything, and what it displays is never a guarantee of correctness: Workday's Orchestration Builder is always the source of truth for what will or will not validate or compile. All development happens in Orchestration Builder; this viewer is only a window into the exported files.

Features

• Opening an .orchestration or .suborchestration file shows the diagram by default, with pan, zoom, minimap, and fit-to-view.
• Click any step to inspect it: assignments and their expressions, branch conditions, loop iterators, integration message severity and summary, store-document settings, CSV format columns (resolved from the flow's resources), suborchestration parameters, and subflow exports.
• Call Subflow cards show the target flow's name and open its diagram on click. Targets are resolved by flow id across the workspace.
• The flow-level error handler renders as a detached region below the flow; step-level handlers show as a lightning badge on the owning card, with their contents in the details panel.
• A toggle switches to a pretty-printed JSON view inside the panel. Open Raw JSON (or Reopen Editor With… → Text Editor) opens the real text editor, and a title-bar button there takes you back to the diagram.
• The diagram re-renders when the file changes on disk or in another editor tab.
• Step types the viewer doesn't recognize render as generic cards with a raw field dump in the details panel. Parse problems show a banner instead of a broken view.

Getting started

Open a folder containing an exported Orchestrate app (the folder with appManifest.json and an orchestration/ directory) and click any .orchestration file.

Development

npm install
npm run build      # bundle extension + webview into dist/
npm test           # vitest unit tests for the parser/graph/layout
npm run watch      # rebuild on change

Press F5 in VS Code to launch an Extension Development Host with the test fixtures opened as the workspace.

dev/harness.html renders the webview bundle in a plain browser against a fixture file (serve the repo root over HTTP). This is handy for iterating on the diagram without launching VS Code.

Packaging

npm run package    # production build + vsce package → .vsix

Install the .vsix in VS Code or Cursor via Extensions: Install from VSIX….

How it works

Orchestrate JSON wraps every value as {"_type": …, "_value": …} and encodes flow structure implicitly: sequence is array order, branching is containment, and there are no edges, node ids, or coordinates in the file. The extension works in four stages:

1. src/core/parse.ts turns the typed-wrapper JSON into a clean model, tolerating both wrapped and bare group objects across exporter versions.
2. src/core/graph.ts builds a graph from that model, synthesizing edges, branch fan-outs and joins, loop containers, and the detached error region.
3. src/core/layout.ts positions everything with a deterministic two-pass algorithm (bottom-up sizing, top-down placement) around a vertical spine.
4. The webview renders the result with React Flow, themed with VS Code CSS variables so it follows your light/dark theme.

Roadmap

• Breadcrumb navigation for subflow drill-in, export to PNG/SVG.