<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>