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