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.
This is a Pro example. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.
About this Pro Example
- Dependencies: @xyflow/react
- License: xyflow Pro License
Last updated on