<f-flow fDraggable (fLoaded)="onLoaded()"> <f-canvas> <f-connection fType="segment" fOutputId="output1" fInputId="input1"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">right</div> <div fNode fDragHandle [fNodePosition]="{ x: 144, y: 140 }" fNodeInput fInputId="input1" fInputConnectableSide="bottom">bottom</div> <f-connection fType="segment" fOutputId="output2" fInputId="input2"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 320, y: 24 }" fNodeOutput fOutputId="output2" fOutputConnectableSide="auto">auto</div> <div fNode fDragHandle [fNodePosition]="{ x: 440, y: 140 }" fNodeInput fInputId="input2" fInputConnectableSide="right">right</div> <f-connection fType="segment" fOutputId="output3" fInputId="input3"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 596, y: 24 }" fNodeOutput fOutputId="output3" fOutputConnectableSide="bottom">bottom</div> <div fNode fDragHandle [fNodePosition]="{ x: 716, y: 140 }" fNodeInput fInputId="input3" fInputConnectableSide="top">top</div> </f-canvas> </f-flow>