<f-flow fDraggable>
  <f-canvas>
    <f-connection [fSelectionDisabled]="true" [fBehavior]="eConnectionBehaviour.FIXED" fType="bezier" fOutputId="output1" fInputId="input1">
      <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.START" [height]="10" [width]="10" [refX]="5" [refY]="5">
        <circle cx="5" cy="5" r="2" stroke="none" fill="var(--connection-gradient-1)"></circle>
      </svg>
      <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.END" [height]="5" [width]="5" [refX]="4" [refY]="2.5">
        <path fill="var(--connection-gradient-2)" d="M0,0L700,350L0,700L150,350z"/>
      </svg>
    </f-connection>
    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">drag me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 144, y: 140 }" fNodeInput fInputId="input1" fInputConnectableSide="left">drag me</div>
  </f-canvas>
</f-flow>