Creating a Connection
Connecting two nodes is a drag operation from the source port to the target port. The connection is validated in real time and added to the workflow graph immediately on drop.
Step-by-Step
Hover Over the Source Node
Move your cursor over the node you want to connect FROM. All ports become visible as small coloured squares on the node boundary.
Click and Hold on a Source Port
Position your cursor precisely on the output port (right side). Click and hold. A connection line starts drawing from the port. The cursor changes to a crosshair.
Drag to the Target Node
Drag toward the target node. As you hover over it, its valid input ports highlight green. Invalid ports stay dim.
Release on the Target Port
Position the cursor precisely on the input port (left side) and release. If valid, the edge is drawn and added to workflowStore.edges. If invalid, the connection is cancelled.
Quick Connect
If you release a connection on an empty area of the canvas (not on a port), Flow Studio shows a Quick Connect popup — a searchable list of node types. Select a node type to:
- Create a new node at that position
- Automatically connect the source port to the new node's main input
This is the fastest way to build a chain of nodes without switching to the palette.
Auto-Connect on Node Drop
If you drag a new node from the palette and drop it near an existing node's output port, Flow Studio automatically creates a connection if:
- The new node's main input port is compatible with the existing node's main output port
- The existing node's output port is unconnected (or is
isMultiple)
This auto-connect behaviour speeds up linear workflow construction.