Flow Studio
Edge Types
Flow Studio provides two edge rendering types that determine how the connection line is drawn between nodes. The edge type affects appearance only — both types carry data identically during execution.
CustomEdge (Default)
The CustomEdge is the default edge type. It renders as a bezier curve between two ports. Characteristics:
- Smooth curved line with control point handles for manual curve adjustment
- Animated dashed pattern when execution is flowing through the edge
- Colour reflects the port type: blue (main), red (error), grey (control)
- Shows a condition label (if set) at the midpoint
- Edit button (pencil icon) appears on hover at the midpoint
SmartEdge (Auto-Routing)
The SmartEdge type uses pathfinding to route the edge around obstacles (other nodes). This prevents lines from crossing through node bodies, improving readability in dense workflows.
- Routes via right-angle segments (orthogonal routing)
- Recalculates path automatically when nodes move
- Slightly higher rendering cost — recommended for workflows with many crossing edges
- Convert to SmartEdge: right-click edge → "Convert to Smart Routing"
Switching Edge Type
Right-click any edge and choose:
- Convert to Curved — switches to CustomEdge (bezier)
- Convert to Smart — switches to SmartEdge (orthogonal)
- Convert to Straight — uses a simple straight line (no routing, no curve)
Edge Visual States
| State | Visual | When |
|---|---|---|
| Normal | Solid coloured line | Design mode, not selected |
| Selected | Thicker, accent colour, with midpoint button | After clicking the edge |
| Animating | Dashed pattern flowing from source to target | Execution is actively traversing this edge |
| Completed | Green tint | Execution passed through this edge successfully |
| Skipped | Dashed grey | Condition evaluated to false; edge not followed |