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