Workflow Designer
The visual editor for building workflows. Reach it via Design in the top navigation bar, or by clicking a flow card on the Dashboard.
Layout
The designer has four main areas:
| Area | Location | Purpose |
|---|---|---|
| Top bar | Top of page | Flow name, version selector, action buttons |
| Left sidebar | Left panel | Flows list + node palette (Components) |
| Canvas | Center | Visual diagram editor |
| Properties panel | Right panel | Configuration for selected node or connection |
Top Bar
The top bar spans the full width and contains:
Left side:
- Flow name — click to rename the flow inline
- Version selector — shows the current version (e.g.,
v1 (DRAFT)). Click to open a dropdown listing all versions with DRAFT/PUBLISHED status. Click any version to load it in the designer.
Right side (action buttons):
| Button | What it does |
|---|---|
| Saved / Save | Saves the current state as a draft. Shown as "Saved" (disabled) when there are no unsaved changes. Keyboard shortcut: Ctrl+S. |
| Execute (green) | Opens the execution dialog to run the current flow. Requires unsaved changes to be saved first. |
| Publish (rocket icon) | Publishes the current draft version to make it active. Only enabled for DRAFT versions. |
| Version History (clock icon) | Opens the version history panel. |
| Share (link icon) | Opens public sharing / link settings. |
Left Sidebar
The sidebar has two tabs: Flows and Components.
Flows Tab
Lists all saved flows in your organization.
- Add Flow button — create a new flow
- Refresh button — reload the list
- Each flow shows its name with Edit, Duplicate, and Delete buttons
- The currently open flow is marked with a Currently editing badge
- Click any flow name to open it in the designer (opens in a new canvas tab)
Components Tab
The node palette — the source of all node types you can place on the canvas.
- Search box — filter nodes by name across all categories
- Categories — nodes are grouped:
| Category | Nodes |
|---|---|
| Flow Control | Start, End, Split Paths, Join Paths, If/Else, Call Process, Subprocess |
| Integration | Rest API, SQL, Send Email, Send SMS, Domain Task |
| AI | AI Agent, Voice Call, Email Tool, SQL Tool, REST API Tool, MCP Tool, Knowledge Base Tool, Web Search Tool, File Manager Tool |
| Logic | Custom Logic, Set Variable |
| Human | Input, Output |
Nodes marked with ⚙️ require an integration connection to be configured before they can run.
To add a node: drag it from the panel onto the canvas, or see Adding Nodes below.
Canvas
The central diagram editing area. This is where you place nodes, draw connections, and see your workflow take shape.
Canvas Toolbar
A small toolbar above the canvas controls the view:
| Control | What it does |
|---|---|
| Zoom In | Increase zoom (keyboard: +) |
| Zoom Out | Decrease zoom (keyboard: -) |
| Fit to Screen | Zoom to fit all nodes in view (keyboard: Ctrl+1) |
| Reset Zoom | Return to 100% zoom (keyboard: Ctrl+0) |
| → (LR layout) | Switch to Left-to-Right flow direction |
| ↓ (TB layout) | Switch to Top-to-Bottom flow direction |
| Focus | Toggle focus mode — hides UI panels for a distraction-free canvas view |
| Validate | Check the flow for errors and warnings; shows a count badge when issues exist |
Adding Nodes
- Find the node in the Components tab on the left sidebar
- Drag it from the panel onto the canvas and release at the desired position
- Or: use the right-click context menu on the canvas
Connecting Nodes
- Hover over a source node until connection handles appear on its edges
- Click and drag from a handle to the target node
- Release on the target node to create the connection
- The default connection type is
sequenceFlow
Connection colors visible on the canvas:
- Gray — standard sequence flow
- Green — success or true-condition flow
- Red — error or false-condition flow
- Orange — timeout flow
Selecting Nodes
| Action | How |
|---|---|
| Select a node | Click it |
| Select a connection | Click the arrow line |
| Multi-select | Ctrl+Click each item, or drag a selection rectangle |
| Select all | Ctrl+A |
| Deselect | Click empty canvas |
Node Operations
| Action | How |
|---|---|
| Move node | Drag to new position |
| Delete | Select, then Delete or Backspace |
| Copy | Ctrl+C |
| Paste | Ctrl+V |
| Duplicate | Ctrl+D |
| Undo | Ctrl+Z |
| Redo | Ctrl+Shift+Z |
Layout Direction
Toggle between two orientations using the LR / TB buttons in the canvas toolbar:
- Left-to-Right (→) — flow runs from left to right (default)
- Top-to-Bottom (↓) — flow runs from top to bottom
Switching recalculates node positions automatically. You can fine-tune manually after switching.
Sub-Process Editing
When a Subprocess node is on the canvas, double-click it to enter its inner canvas. A breadcrumb bar appears at the top of the canvas showing your path (e.g., Main Flow > My Subprocess). Click any breadcrumb segment to navigate back up.
Properties Panel (Step Settings)
The right panel shows configuration for whatever is currently selected on the canvas.
| Selection | Panel title | Shows |
|---|---|---|
| Nothing selected | Flow Settings | Flow name, description, flow variables, time limits, retry settings |
| A node | Step Settings | Node-specific properties (varies by node type) |
| A connection | Connection Rules | Connection type, condition expression |
Click the × button in the panel header to close it. Re-open by clicking any node or connection.
Flow Settings (nothing selected)
| Section | Fields |
|---|---|
| Basic Settings | Flow Name *, Description, Flow Type |
| Flow Variables | Shared variables — Name, Default Value, Data Type. Add with "Add Variable" button |
| Time Limits & Retries | Flow-level timeout (Duration, Unit, Action) and retry settings (Max Tries, Delay, Unit) |
Step Settings (node selected)
Shows the configuration fields for the selected node type. Required fields are marked with *. The content varies by node type — see the Node Reference for details on each type.
Connection Rules (connection selected)
| Field | Description |
|---|---|
| Connection Type | sequenceFlow, trueFlow, falseFlow, successFlow, errorFlow, timeoutFlow, toolConnection |
| Condition | JUEL expression evaluated at runtime — e.g., ${status == 'approved'}. Only available for conditional flow types. |
Multi-Tab Editing
The designer supports opening multiple flows simultaneously in a tab bar at the top of the canvas. The + button (at the far right of the tab bar) opens another flow without closing the current one. Click the × on any tab to close it.
Validate
Click Validate in the canvas toolbar to run a validation check. A panel opens listing all errors and warnings:
- Errors (red) — must be fixed before the flow can run correctly (e.g., required field missing, node not connected)
- Warnings (orange) — non-blocking but worth reviewing
The Validate button shows a badge with the count of issues. The badge is red if there are errors, orange if there are only warnings.
Keyboard Shortcuts
Press ? anywhere in the designer to open the keyboard shortcut reference. Summary:
| Shortcut | Action |
|---|---|
| Ctrl+S | Save flow |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo |
| ? | Show keyboard shortcuts |
| Esc | Close panel or modal |
| Ctrl+A | Select all nodes |
| Delete | Delete selected nodes/connections |
| Ctrl+C | Copy selected |
| Ctrl+V | Paste |
| Ctrl+D | Duplicate selected |
| + | Zoom in |
| - | Zoom out |
| Ctrl+0 | Reset zoom to 100% |
| Ctrl+1 | Fit diagram to screen |