<f-flow fDraggable (fLoaded)="onLoaded()">
  <f-canvas>
    <f-connection [fReassignDisabled]="true" fOutputId="1" fInputId="2" fBehavior="floating">
      <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.START" class="connection-marker"
           [height]="5" [width]="5"
           [refX]="2.5" [refY]="2.5" markerUnits="strokeWidth">
        <circle cx="350" cy="350" r="350"/>
      </svg>
      <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.SELECTED_START" class="connection-marker"
           [height]="5" [width]="5"
           [refX]="2.5" [refY]="2.5" markerUnits="strokeWidth">
        <circle cx="350" cy="350" r="350"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END"  class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END"  class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>
    </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: 300, y: 0 }" fNodeInput fInputId="2" fInputConnectableSide="left">
      I'm a node
    </div>

    <f-connection [fReassignDisabled]="true" fOutputId="3" fInputId="4" fBehavior="floating">
      <svg viewBox="0 0 9 9" fMarker [type]="eMarkerType.START" class="connection-marker"
           [height]="9" [width]="9"
           [refX]="1.5" [refY]="4.2" markerUnits="strokeWidth">
        <rect y="4.24219" width="6" height="6" transform="rotate(-45 0 4.24219)"/>
      </svg>
      <svg viewBox="0 0 9 9" fMarker [type]="eMarkerType.SELECTED_START" class="connection-marker"
           [height]="9" [width]="9"
           [refX]="1.5" [refY]="4.2" markerUnits="strokeWidth">
        <rect y="4.24219" width="6" height="6" transform="rotate(-45 0 4.24219)"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M5.99961 7L0 3.5L5.99961 0V7Z" />
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END" class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M5.99961 7L0 3.5L5.99961 0V7Z" />
      </svg>
    </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: 300, y: 150 }" fNodeInput fInputId="4" fInputConnectableSide="left">
      I'm a node
    </div>

    <f-connection [fReassignDisabled]="true" fOutputId="5" fInputId="6" fBehavior="floating">
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.START"  class="connection-marker"
           [height]="7" [width]="6"
           [refX]="0.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_START"  class="connection-marker"
           [height]="7" [width]="6"
           [refX]="0.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END"  class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END"  class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>
    </f-connection>
    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 300 }" fNodeOutput fOutputId="5" fOutputConnectableSide="right">
      I'm a node
    </div>
    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 300 }" fNodeInput fInputId="6" fInputConnectableSide="left">
      I'm a node
    </div>
  </f-canvas>
</f-flow>