Flow Studio
Port Model
ProcessElementPort defines a single connection point on a node. The port configuration in the NodeType template determines how the node appears on canvas, what connections are valid, and how data flows through the node.
ProcessElementPort Interface
// packages/flow-studio-types/src/node.types.ts
export interface ProcessElementPort {
portKey: string; // unique within the node: 'main', 'error', 'true', 'false'
portType: 'source' | 'target'; // output or input
label?: string; // optional label shown on hover
isMainPort: boolean; // true = primary data flow port
isErrorPort: boolean; // true = red error-route port
isRequired: boolean; // if target port: must be connected before saving
isMultiple: boolean; // if source: multiple edges allowed; if target: fan-in allowed
position?: 'top' | 'right' | 'bottom' | 'left'; // handle placement
}Port Field Reference
| Field | Effect |
|---|---|
portKey | Used as the edge's sourceHandle or targetHandle in React Flow; maps to ExpressionContext port names |
portType | source = output (right side by default); target = input (left side) |
isMainPort | Renders with larger handle; edge from main port carries the primary data |
isErrorPort | Renders red; used for error-handling connections; data carries the exception |
isRequired | Canvas validation warns if this input port has no incoming edge |
isMultiple | Source: fan-out allowed (multiple edges). Target: fan-in allowed (multiple edges merge) |
Typical Port Configurations
// HTTP Request node — one input, two outputs (success + error)
ports: [
{ portKey: 'main', portType: 'target', isMainPort: true, isErrorPort: false, isRequired: true, isMultiple: false },
{ portKey: 'main', portType: 'source', isMainPort: true, isErrorPort: false, isRequired: false, isMultiple: false },
{ portKey: 'error', portType: 'source', isMainPort: false, isErrorPort: true, isRequired: false, isMultiple: false }
]
// Merge node — two inputs, one output
ports: [
{ portKey: 'left', portType: 'target', isMainPort: true, isErrorPort: false, isRequired: true, isMultiple: false },
{ portKey: 'right', portType: 'target', isMainPort: false, isErrorPort: false, isRequired: true, isMultiple: false },
{ portKey: 'main', portType: 'source', isMainPort: true, isErrorPort: false, isRequired: false, isMultiple: false }
]