<f-flow fDraggable (fLoaded)="onLoaded()"> <f-canvas> <f-connection [fReassignDisabled]="true" fType="offset_straight" fOutputId="1" fInputId="2"> </f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="right"> I'm a node </div> <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 50 }" fNodeInput fInputId="2" fInputConnectableSide="left"> I'm a node </div> <f-connection [fReassignDisabled]="true" fType="circle" fOutputId="3" fInputId="4"> </f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="3" fOutputConnectableSide="right"> I'm a node </div> <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 200 }" fNodeInput fInputId="4" fInputConnectableSide="left"> I'm a node </div> </f-canvas> </f-flow>