Flow Editor

​

What is Flow Editor?

The Flow Editor is a visual workspace for building pipelines. It provides:

• Drag-and-drop interface for adding and arranging nodes
• Visual connections between nodes showing execution flow
• Vertical layout optimized for easy configuration
• Instant YAML sync - changes in Flow appear immediately in YAML (and vice versa)
• Interactive configuration - click nodes to configure their settings

---

​

Accessing Flow Editor

1. Navigate to Pipelines menu
2. Open an existing pipeline or create a new one
3. Click the Configuration tab
4. Select Flow mode (appears alongside YAML tab)

---

​

Flow Editor Interface

The Flow Editor consists of several key areas:

​

Main Components

​

Left Toolbar Buttons

---

​

Adding Nodes

​

Method 1: Add Node Button

1. Click the ➕ button (top right corner)
2. A node palette appears showing all available node types
3. Select the node type you want to add
4. Node appears on the canvas

Available Node Types:

• Agent
• Code
• Custom
• Decision
• HITL
• LLM
• MCP
• Printer
• Router
• State modifier
• Toolkit

​

Method 2: Drag from Connection

You can also add nodes while creating connections:

1. Drag a connector from an existing node
2. Release it in empty space on the canvas
3. Select Create New Node from the dropdown
4. Choose node type
5. New node is created with connection already attached

---

​

Configuring Nodes

Click on any node card to open its configuration panel:

​

Node Configuration Options

Each node type has specific configuration fields. Common options include:

• Node Name (click card title to rename)
• Input/Output state variables
• Node-specific settings (prompts, toolkits, conditions, etc.)
• Advanced options (Interrupt Before/After, Structured Output)

​

Renaming a Node

1. Click the node card title
2. Type the new name
3. Press Enter or click outside to save

---

​

Connecting Nodes

Nodes must be connected to define the execution flow. See the Nodes Connectors Guide for complete details.

​

Creating Connections

Method 1: Drag and Drop

1. Click and hold the output port (bottom of node card)
2. Drag the connector line to the input port (top of target node)
3. Release to create the connection

Method 2: Drop on Canvas

1. Drag connector from a node
2. Release in empty canvas space
3. Select existing node or create new node from dropdown
4. Connection auto-completes

​

Deleting Connections

Click on the connection line to select it, then press Delete on keyboard

---

​

Managing Nodes

​

Node Card Actions

Click the three-dots menu (⋮) on any node card to access node actions: Available Actions:

​

Moving Nodes

Rearrange nodes to improve visual clarity:

1. Click on a node card
2. Drag it to a new position on the canvas
3. Release to place

---

​

Canvas Controls

​

Collapse/Expand Cards

Toggle between compact and detailed node views:

• Collapsed: Shows only node name and type icon
• Expanded: Shows all configuration fields

Click the State button (top right) to open the state configuration sidebar. In the State Sidebar:

• View all pipeline state variables
• Add new custom states
• Configure default values
• Set state data types (String, Number, Array, Object)

See the States Guide for complete state configuration details.

---

​

Flow to YAML Synchronization

Changes made in Flow Editor instantly appear in YAML:

1. Add/modify nodes in Flow
2. Switch to YAML tab
3. See the updated YAML code
4. Switch back to Flow to continue visual editing

---

​

Keyboard Shortcuts

---

​

Best Practices

---

​

Troubleshooting

Nodes Not Connecting

Problem: Cannot create connection between nodes.Solutions:

• Check if nodes are compatible (e.g., Router requires specific output nodes)
• Verify you’re dragging from output port (bottom) to input port (top)
• Try Auto-fix Layout if nodes are overlapping

Canvas is Blank

Problem: Flow Editor shows empty canvas.Solutions:

• Switch to YAML tab to check if pipeline has nodes
• Click Fit View to center nodes
• Refresh the page

Changes Not Saving

Problem: Edits disappear after closing pipeline.Solutions:

• Click Save button before navigating away
• Check for error messages at top of screen
• Verify network connection

Node Configuration Not Opening

Problem: Clicking node doesn’t show configuration panel.Solutions:

• Click directly on the node card (not the connection lines)
• Unlock editing if canvas is locked (🔒 button)
• Expand the GENERAL section if collapsed

---

---