形状
这个示例展示了如何使用在流程图中常用的不同形状（如圆形、菱形或六边形）来渲染自定义节点。它还展示了如何创建侧边栏组件、自定义微型地图节点以及用于更改形状颜色的节点工具栏。
🌐 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.
该示例使用了一个集中化的 Shape 组件，根据形状类型渲染不同的 SVG 路径。通过使用 { type: 'shape', data: { type: 'diamond', color: '#ff0071' }} 定义节点数据，你可以控制渲染哪种形状以及它的显示方式，同时仅使用单一的节点类型实现。
🌐 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.
关于此 Pro 示例
🌐 About this Pro Example
- 依赖: @xyflow/react
- 许可证：xyflow Pro 许可证