Flow Studio
Connections Overview
Connections (edges) wire nodes together to define the execution order and data flow of your workflow. Understanding the port system — types, directions, and validation rules — is the foundation for building correct and reliable workflows.
What Edges Do
An edge between two nodes serves two purposes simultaneously:
- Control flow — defines the execution sequence (node A runs before node B)
- Data flow — the output of node A becomes accessible to node B via
$output.{nodeAId}
Port Visual Language
Ports are the connection points on nodes. They are rendered as small squares on the node boundary:
| Port Type | Visual | Meaning |
|---|---|---|
| Main (data) | Blue square | Primary data flow — the happy path |
| Error | Red square | Exception routing — node threw an error |
| Control | Grey square | Named output ports (e.g., "true", "false", "approved") |
| Input (target) | Left / top side of node | Receives data from upstream |
| Output (source) | Right / bottom side of node | Sends data downstream |
WorkflowConnection Model
Connections are stored in workflowStore.edges as WorkflowConnection objects:
interface WorkflowConnection {
id: string;
source: string; // source node ID
sourceHandle: string; // source port key (e.g., "output", "true", "error")
target: string; // target node ID
targetHandle: string; // target port key (e.g., "input")
data?: {
condition?: string; // JavaScript expression (optional)
label?: string; // display label
priority?: number; // evaluation order (1 = first)
};
type: 'custom' | 'smart'; // edge rendering type
}