Workday Orchestrate 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.
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:
src/core/parse.ts turns the typed-wrapper JSON into a clean model,
tolerating both wrapped and bare group objects across exporter versions.src/core/graph.ts builds a graph from that model, synthesizing edges,
branch fan-outs and joins, loop containers, and the detached error region.src/core/layout.ts positions everything with a deterministic two-pass
algorithm (bottom-up sizing, top-down placement) around a vertical spine.- The webview renders the result with React Flow, themed with VS Code CSS
variables so it follows your light/dark theme.
Roadmap
- Static validation: broken suborchestration references, references to
undefined values, unreachable branches.
- Breadcrumb navigation for subflow drill-in, export to PNG/SVG.
- Editing (rename steps, toggle disabled, edit expressions) via workspace
edits.
