Shapes
This example shows how to render Custom Nodes with different shapes commonly used in flow charts like circles, diamonds, or hexagons. It also showcases how to create a sidebar component, custom minimap nodes, and a node toolbar for changing the color of the shapes.
The example uses a centralized Shape component that renders different SVG paths based on
the shape type. By defining node data with
{ type: 'shape', data: { type: 'diamond', color: '#ff0071' }}, you can control which
shape gets rendered and how it appears, all while using a single node type implementation.
About this Pro Example
- Dependencies: @xyflow/react
- License: xyflow Pro License
Last updated on