形状

本示例展示了如何使用流程图中常用的不同形状（例如圆形、菱形或六边形）渲染 自定义节点。它还展示了如何创建侧边栏组件、自定义小地图节点以及用于更改形状颜色的节点工具栏。

¥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.

关于此 Pro 示例

¥About this Pro Example

• 依赖：@xyflow/react 

  ¥Dependencies: @xyflow/react 

• 许可证：xyflow 专业版许可证 

  ¥License: xyflow Pro License