Skip to main content

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: react-flow-renderer