Workflows

Visual Workflow Builder

Create automation workflows with a drag-and-drop visual editor

The workflow builder provides a visual canvas for designing automation rules. Built on React Flow, it offers an intuitive interface for creating complex workflows without writing code.

Canvas Interface

Main Canvas

The central area displays your workflow as a node graph. You can:

  • Pan: Click and drag on empty space
  • Zoom: Use scroll wheel or pinch gesture
  • Select: Click any node to select it
  • Multi-select: Hold Shift and click multiple nodes

Add Node Panel

Located in the top-left corner with quick access buttons:

Node TypeColorPurpose
ConditionYellowBranch based on true/false evaluation
ActionBlueExecute an operation
DelayPurplePause before continuing
EndGrayTerminate the workflow path

Controls and MiniMap

  • Bottom-left controls: Zoom in/out, fit view, toggle lock
  • Bottom-right minimap: Overview for navigating large workflows

Working with Nodes

Adding Nodes

  1. Click a node type button in the Add Node panel
  2. The node appears on the canvas
  3. Drag it to your preferred position
  4. Click to select and configure in the right panel

Connecting Nodes

  1. Hover over a node to see connection handles (small circles)
  2. Click and drag from a source handle to a target node
  3. Connections animate to show data flow direction

For condition nodes:

  • Right handle (green): True branch output
  • Bottom handle (red): False branch output

Configuring Nodes

  1. Click any node to select it
  2. The right panel shows configuration options
  3. Set the label, type, and specific parameters
  4. Changes save automatically

Deleting

  • Select a node or connection line
  • Press Delete or Backspace

Grid and Snapping

The canvas uses a 15px grid with snap-to-grid enabled for clean alignment.

Workflow Validation

The builder validates and warns for:

  • No trigger: Workflow must have exactly one trigger node
  • Disconnected nodes: Nodes not connected to the main flow
  • Missing branches: Condition nodes without both paths connected

Saving and Activating

  • Save: Persist draft without activating
  • Activate: Enable the workflow to process events
  • Deactivate: Pause an active workflow

Keyboard Shortcuts

ShortcutAction
Delete / BackspaceDelete selected
Ctrl/Cmd + ZUndo
Ctrl/Cmd + Shift + ZRedo
Ctrl/Cmd + SSave workflow
EscapeDeselect all

Example: Priority Escalation

[Trigger: New Ticket]
        |
[Condition: Priority = Urgent?]
    |           |
  (Yes)       (No)
    |           |
[Action: Assign] [End]
    |
  [End]
  1. Trigger: Set to "ticket_created"
  2. Condition: Check ticket.priority equals urgent
  3. True branch: Add action to assign to senior agent
  4. False branch: Connect directly to end node

Tips

  1. Work top-to-bottom: Arrange nodes in execution order
  2. Use labels: Descriptive labels make debugging easier
  3. Test incrementally: Add and test nodes one at a time
  4. Use the minimap: Navigate large workflows efficiently

Next Steps