<f-flow fDraggable> <f-canvas> <f-connection fText="offset_straight" [fReassignDisabled]="true" fType="offset_straight" fOutputId="output1" fInputId="input1"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">drag me</div> <div fNode fDragHandle [fNodePosition]="{ x: 144, y: 140 }" fNodeInput fInputId="input1" fInputConnectableSide="left">drag me</div> <f-connection fText="circle" [fReassignDisabled]="true" fType="circle" fOutputId="output2" fInputId="input2"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeOutput fOutputId="output2" fOutputConnectableSide="bottom">drag me</div> <div fNode fDragHandle [fNodePosition]="{ x: 468, y: 24 }" fNodeInput fInputId="input2" fInputConnectableSide="bottom">drag me</div> </f-canvas> </f-flow>