示例
🌐 Examples
浏览我们的示例，获取针对常见使用场景的实用复制粘贴解决方案，使用 React Flow。在这里，你可以找到我们的 MIT 许可示例，可以在项目中自由使用而无需限制，也可以找到我们的 Pro 示例，这些示例随我们的 React Flow Pro 订阅计划提供。
🌐 Browse our examples for practical copy-paste solutions to common use cases with React Flow. Here you can find our MIT Licensed examples, which you are free to use in your projects without restrictions, as well as our Pro examples that come with our React Flow Pro subscription plans.
Nodes
NODES
无论你将连接线放在哪里，都会出现一个新节点
NODES
使用 `isConnectable` 属性来限制一个句柄可以拥有的连接数量
NODES
显示节点内的任何内容
NODES
在不中断流程的情况下删除节点
NODES
将拖动限制到节点的特定部分
NODES
将整个节点变成句柄
NODES
检测一个节点是否与另一个节点重叠
NODES
使用边界框或可拖动图标更改节点的大小
NODES
所选节点旁边会出现一个带有按钮的工具栏
NODES
当节点彼此接近时自动创建边
NODES
可以使用 CSS 变换旋转的自定义节点
NODES
使用交互式控件在不同图形布局之间实现平滑过渡的动画效果
NODES
一次渲染数百个节点和边
NODES
更新特定节点的数据字段
NODES
渲染流程图中常用的不同形状的自定义节点。
Edges
EDGES
创建超越内置动画边缘的边缘动画。
EDGES
更改连接线的外观和行为
EDGES
沿边缘创建具有特殊路由或控件的边缘
EDGES
在找不到句柄时删除边缘
EDGES
将边标签渲染为边顶部的 div
EDGES
拖动时检测边缘与节点的交点。
EDGES
你可以使用 EdgeToolbar 组件在边的顶部显示内容。
EDGES
使边缘变直、呈阶梯状、平滑阶梯状或贝塞尔曲线
EDGES
不要将句柄放在固定点，而是让它随连接的边缘移动
EDGES
将边缘变成箭头、添加自定义图标或 SVG
EDGES
从任何选定的节点一次绘制多条连接线。
EDGES
单击并拖动以将现有边缘从一个句柄移动到另一个句柄
EDGES
边连接到最近的可用句柄
EDGES
通过渲染不可见的幽灵节点来推动 React Flow 边缘的功能。
EDGES
使用可拖动控制点实现自定义边以更改边的路径
Interaction
INTERACTION
此示例演示了如何使用助手来处理数据流
INTERACTION
React Flow 在连接过程中会触发不同的事件。使用这个示例来获取 an overview of those events and what order they are called in.
INTERACTION
右键单击节点以显示自定义操作
INTERACTION
仅在放大到足够近时才显示节点的内容
INTERACTION
使用原生 HTML 拖放 API 或 react-draggable 在 React Flow 窗格外进行拖放。
INTERACTION
检查新连接是否会导致图形中的循环
INTERACTION
保存图表的状态，并在刷新页面后重新加载
INTERACTION
点击两个句柄将它们连接起来，并为较小的设备放大句柄
INTERACTION
检查新连接是否有效并应添加
INTERACTION
显示有助于直观对齐节点的线条，并通过自动捕捉功能实现精确定位和布局控制。
INTERACTION
使用 React Flow 和 yjs 为多个用户构建协作图
INTERACTION
选择要剪切、复制和粘贴的节点和边
INTERACTION
用于移动、添加和删除节点和边的撤消和重做功能
Subflows & Grouping
SUBFLOWS & GROUPING
此示例演示了如何在 React Flow 中创建动态节点分组。
SUBFLOWS & GROUPING
使用拖放功能动态地将节点从父容器中附加和分离。
SUBFLOWS & GROUPING
渲染嵌套图和组节点，并配置子节点的行为
Layout
LAYOUT
将 dagre js 与 React Flow 集成以创建简单的树布局
LAYOUT
对于 dagre 的更强大的替代方案，你还可以使用 elkjs 来布局你的图表
LAYOUT
使用 elkjs 布局引擎的多个句柄来减少边缘交叉
LAYOUT
从左到右流动的图表
LAYOUT
使用 dagre 创建具有可展开和可折叠节点的层次树，以实现自动布局
LAYOUT
使用各种布局引擎（例如 dagre、d3-hierarchy 或 elkjs）自动排列节点
LAYOUT
使用 d3-force，新添加的节点永远不会与现有节点重叠
LAYOUT
一个自组织图，用户可以通过点击占位符元素添加节点，节点会自动定位。
LAYOUT
使用碰撞检测算法自动解决节点重叠问题
Styling
STYLING
显示 React Flow 内置但默认不使用的基本样式
STYLING
React Flow 提供了一个颜色模式属性，允许你在暗色和亮色之间切换 and system mode.
STYLING
使用 Tailwind CDN 轻松制作美观的流程
STYLING
受 turbo.build 网站启发，节点带有发光的动画渐变边框
Whiteboard
WHITEBOARD
一个可以通过擦除操作删除节点和边的工具
WHITEBOARD
一个使用套索选择工具选择多个项目的示例。
WHITEBOARD
一个使用 Svelte Flow 在白板上绘制矩形的示例。
WHITEBOARD
一个徒手绘图示例
