白板功能

¥Whiteboard Features

React Flow 旨在构建基于节点的 UI，例如工作流编辑器、流程图和图表。即使 React Flow 并非用于创建白板应用，你也可能希望集成常用的白板功能。这些示例展示了如何在需要在节点和边旁边添加注释或草图时为应用添加绘图功能。

¥React Flow is designed for building node-based UIs like workflow editors, flowcharts and diagrams. Even if React Flow is not made for creating whiteboard applications, you might want to integrate common whiteboard features. These examples show how to add drawing capabilities to your applications when you need to annotate or sketch alongside your nodes and edges.

示例

¥Examples

✏️ 徒手绘图（专业版）

¥✏️ Freehand Draw (Pro)

在 React Flow 窗格上绘制平滑曲线。适用于注释或在现有节点周围绘制草图。

¥Draw smooth curves on your React Flow pane. Useful for annotations or sketching around existing nodes.

功能：

¥Features:

• 鼠标/触摸绘图

  ¥Mouse/touch drawing

• 可调节画笔大小和颜色

  ¥Adjustable brush size and color

• 将绘制的路径转换为自定义节点

  ¥converts drawn paths into custom nodes

常见用途：

¥Common uses:

• 为流程图添加注释

  ¥Annotating flowcharts

• 为图表添加注释

  ¥Adding notes to diagrams

• 围绕节点勾勒创意

  ¥Sketching ideas around nodes

查看示例代码

¥See example code

🎯 套索选择

¥🎯 Lasso Selection

通过绘制自由选择区域来选择多个元素，并可选择包含部分选定的元素。

¥Select multiple elements by drawing a freeform selection area with an option to include partially selected elements.

功能：

¥Features:

• 自由选择形状

  ¥Freeform selection shapes

• 元素的部分选择

  ¥partial selection of elements

常见用途：

¥Common uses:

• 同时选择节点和注释

  ¥Selecting nodes and annotations together

• 混合内容中的复杂选择

  ¥Complex selections in mixed content

查看示例代码

¥See example code

🧹 橡皮擦

¥🧹 Eraser

通过在项目上单击 “erasing” 来移除项目。使用碰撞检测来确定要删除的内容。

¥Remove items by “erasing” over them. Uses collision detection to determine what to delete.

功能：

¥Features:

• 基于碰撞的擦除

  ¥Collision-based erasing

• 可视化橡皮擦光标

  ¥Visual eraser cursor

常见用途：

¥Common uses:

• 移除流程的一部分

  ¥Removing parts of a flow

查看示例代码

¥See example code

📐 矩形绘制

¥📐 Rectangle Draw

通过点击并拖动创建矩形。适用于高亮区域或为节点组创建背景。

¥Create rectangular shapes by clicking and dragging. Good for highlighting areas or creating backgrounds for node groups.

功能：

¥Features:

• 点击并拖动创建矩形

  ¥Click-and-drag rectangle creation

• 可自定义颜色

  ¥Customizable colors

常见用途：

¥Common uses:

• 创建背景容器

  ¥Creating background containers

• 可视化地分组相关节点

  ¥Grouping related nodes visually

• 高亮显示部分图表

  ¥Highlighting sections of diagrams

查看示例代码

¥See example code

白板库

¥Whiteboard libraries

如果你正在寻找更完整的白板解决方案，请考虑使用专为白板应用设计的库，例如 tldraw  或 Excalidraw 。这些库提供了用于协作绘图、形状、文本等的全套功能。

¥If you are looking for a more complete whiteboard solution, consider using libraries that are specifically designed for whiteboard applications like tldraw  or Excalidraw . These libraries provide a full set of features for collaborative drawing, shapes, text, and more.