PolylineEdge

An edge component that supports bends and the result of a yFiles layout algorithm.

The information about the edge path after running a layout algorithm will be given by the data.yData of each edge, see EdgeLayoutData.

const edgeTypes = {
  polyline: PolylineEdge
}

const LayoutFlow = () => {
  const [nodes] = useNodesState(initialNodes)
  const [edges] = useEdgesState(initialEdges)

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      edgeTypes={edgeTypes}
    ></ReactFlow>
  )
}

export default function Flow() {
  return (
    <ReactFlowProvider>
      <LayoutFlow />
    </ReactFlowProvider>
  )
}