Shapes

This example shows how to implement a custom node that can render different shapes like a circle, diamond or hexagon that are commonly used in flow charts. The shape node can be configured with these options which are added to the node data object:

width: number
height: number
color: string - the background color of the node
shape: string - the shape that the node should render (circle, round-rect, hexagon, diamond, arrow-rect, database, triangle, parallelogram)

Dependencies: reactflow

This is a Pro example. If you are subscribed to React Flow Pro you can access the annotated source code.