NODES

Display any content inside of a node

NODES

Update the data field of a specific node

NODES

Render hundreds of nodes and edges at once

NODES

Hide a node or edge for expandable/collapsible diagrams

NODES

Restrict dragging to a specific part of node

NODES

Make the whole node into a handle

NODES

A new node appears wherever you drop the connection line

NODES

Automatically create edges when nodes get close to each other

NODES

Change the size of a node with a bounding box or draggable icon

NODES

A toolbar with buttons appears next to the selected node

NODES

A custom node that can be rotated using CSS transforms

NODES

Group nodes together by dragging them into the same container

NODES

Detect when a node overlaps with another node

NODES

Custom node that can render different shapes like a circle, diamond or hexagon that are commonly used in flow charts

NODES

Use the `isConnectable` prop to limit the number of connections a handle can have

NODES

Remove a node without breaking the flow

EDGES

Create edges with special routing or controls along the edge

EDGES

Create edge animations that go beyond the built in animated edge.

EDGES

Make edges straight, stepped, smooth-stepped, or bezier curved

EDGES

Implement a custom edge with draggable control points to change the path of an edge

EDGES

Click-drag to move an existing edge from one handle to another

EDGES

Change the appearance and behavior of the connection line

EDGES

Draw multiple connection lines at once from any selected nodes.

EDGES

Make your edges into arrows, add custom icons, or SVGs

EDGES

Delete an edge when it doesn't find a handle

EDGES

Instead of having the handle at a fixed point, let it move with the connected edge

EDGES

Edges connect to the closest available handle

EDGES

Render edge labels as divs on top of edges

EDGES

Push what React Flow edges are capable of by rendering invisible ghost nodes.

LAYOUT

Render nested graphs and group nodes, and configure the behavior of child nodes

LAYOUT

A diagram that flows from left to right

LAYOUT

Integrate dagre js with React Flow to create simple tree layouts

LAYOUT

Create tree layouts that have sibling nodes and support nodes with different dimensions for family tree type layouts

LAYOUT

For a more powerful alternative to dagre, you can also use elkjs to layout your graphs

LAYOUT

Use multiple handles with the elkjs layouting engine to reduce edge crossings

LAYOUT

Automatically arrange nodes after adding items from a sidebar.

LAYOUT

Newly added nodes never overlap with existing nodes using d3-force

LAYOUT

Click on parent nodes to toggle the visibility of their children

LAYOUT

Add and auto-layout new nodes in a vertical tree flow

INTERACTION

The most popular props used for interactivity of a diagram

INTERACTION

Drag and drop outside of the React Flow pane with native HTML Drag and Drop API or react-draggable.

INTERACTION

This examples demonstrates how to use the helpers to handle data flow

INTERACTION

Check if a new connection is valid and should be added

INTERACTION

React Flow emits different events during the connection process. Use this example to get an overview of those events and what order they are called in.

INTERACTION

Check if a new connection would cause a cycle in the graph

INTERACTION

Implement an undo and redo functionality for moving, adding, and deleting nodes and edges

INTERACTION

Select nodes and edges to cut, copy, and paste

INTERACTION

Display lines that help to visually align nodes, and enable nodes to be snapped into place when dropped

INTERACTION

Tap two handles to connect them, and make handles bigger for smaller devices

INTERACTION

Save the state of the diagram, and reload it after refreshing the page

INTERACTION

Change the animation speed when the viewport is zoomed or moved

INTERACTION

Build a collaborative graph for multiple users with React Flow and yjs

INTERACTION

Only display the content of a node when you are zoomed in close enough

INTERACTION

Right-click a node to display custom actions

樣式

使用 Styled Components 函式庫更改背景和節點的顏色

樣式

使用 Tailwind CDN 輕鬆建立美觀的流程

樣式

具有發光動畫漸層邊框的節點，靈感來自 turbo.build 網站

樣式

展示 React Flow 內建的基本樣式，但預設不使用

樣式

React Flow 帶有一個顏色模式屬性，可讓您在深色、淺色和系統模式之間切換。

其他

一個完整的堆疊應用程式，示範如何在伺服器上使用 React Flow 靜態產生流程。

其他

使用 html-to-image 函式庫將流程儲存為 png 檔

其他

適用於在頁面上使用多個流程，讓每個流程都有一個獨立的儲存實例

其他

一個 hook，為您的節點、邊緣和視窗提供實用的輔助工具