Three Designer Modes
The designer has three distinct operating modes managed by designerModeStore. Switching modes fundamentally changes what you can do and what the canvas displays. Understanding when to use each mode is central to working effectively in Flow Studio.
Mode Overview
| Mode | Store Value | Primary Use | Canvas Behaviour |
|---|---|---|---|
| Design | 'design' | Build and edit workflows | Fully interactive: drag, connect, configure, delete |
| Execution | 'execution' | Run and monitor | Read-only graph; status overlays on nodes; Observer Panel open |
| Evaluation | 'evaluation' | Dry-run validation | Planned — not yet available |
Design Mode
Design Mode is active when you first open a ProcessThread that you have locked for editing. This is where you build your workflow:
- Drag nodes from the palette to the canvas
- Connect nodes by dragging from output ports to input ports
- Click nodes to open their configuration form in the right panel
- Move, rename, duplicate, and delete nodes and connections
- Create groups and swimlanes to organise large workflows
- Use Ctrl+Z / Ctrl+Y for undo and redo
Execution Mode
Switch to Execution Mode to run your workflow and monitor it in real time. Use the mode selector in the top toolbar:
Switch Mode
Click the Execution button in the mode selector. If you have unsaved changes, you are prompted to save first.
Observer Panel Opens
The Observer Panel automatically expands to the Execution Status tab. The canvas becomes read-only — node dragging and connection editing are disabled.
Click Run
The Run button appears in the top toolbar. Clicking it sends the execution request and nodes begin updating with status overlays as results stream in via SignalR.
Return to Design
Once monitoring is complete, switch back to Design Mode to iterate on the workflow. Execution history remains accessible in the Observer Panel's history section.
Node Status Overlays in Execution Mode
| Status | Visual | Meaning |
|---|---|---|
| Pending | Grey border, no icon | Node has not yet been reached in this execution |
| Running | Blue pulsing border, spinner icon | Node is actively executing on the backend |
| Completed | Green border, checkmark icon | Node finished successfully |
| Failed | Red border, X icon | Node threw an error or returned a failure result |
| Skipped | Dashed grey border, dash icon | Node was bypassed (e.g., condition was false) |
| Suspended | Amber border, pause icon | Node is awaiting human input (HIL suspend) |
Evaluation Mode (Planned)
Evaluation Mode will allow you to validate expression syntax, test node configuration, and simulate data flow without actually executing any backend logic. It is designed for:
- Testing expression engine outputs against sample data
- Verifying that all required node configurations are complete
- Checking that all edges have valid source and target connections
This mode is on the product roadmap and not yet available in the current release.