<f-flow fDraggable (fLoaded)="onLoaded()"> <f-canvas> <f-connection fType="straight" fOutputId="output1" fInputId="input1"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }"> Node 1 <div fNodeOutput fOutputId="output1" fOutputConnectableSide="bottom" class="bottom"></div> </div> <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 100 }"> Node 2 <div fNodeInput fInputId="input1" fInputConnectableSide="top" class="top"></div> </div> <f-connection fType="straight" fOutputId="output2" fInputId="input2"></f-connection> <f-connection fType="straight" fOutputId="output3" fInputId="input3"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 0 }"> Node 1 <div fNodeOutput fOutputId="output2" fOutputConnectableSide="bottom" class="bottom-left"></div> <div fNodeOutput fOutputId="output3" fOutputConnectableSide="bottom" class="bottom"></div> </div> <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 100 }"> Node 2 <div fNodeInput fInputId="input2" fInputConnectableSide="top" class="top-left"></div> <div fNodeInput fInputId="input3" fInputConnectableSide="top" class="top"></div> </div> <f-connection fType="straight" fOutputId="output4" fInputId="input4"></f-connection> <f-connection fType="straight" fOutputId="output5" fInputId="input4"></f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 400, y: 0 }"> Node 1 <div fNodeOutput fOutputId="output4" fOutputConnectableSide="bottom" class="bottom-left"></div> <div fNodeOutput fOutputId="output5" fOutputConnectableSide="bottom" class="bottom-right"></div> </div> <div fNode fDragHandle [fNodePosition]="{ x: 400, y: 100 }"> Node 2 <div fNodeInput fInputId="input4" fInputConnectableSide="top" class="top"></div> </div> </f-canvas> </f-flow>