Pro Examples

NODES

Animate smooth transitions between different graph layouts with interactive controls

NODES

Render Custom Nodes with different shapes that are commonly used in flow charts

EDGES

Implement a routable edge with libavoid

EDGES

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

INTERACTION

Display lines that help to visually align nodes, with automatic snapping for precise positioning and layout control.

INTERACTION

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

INTERACTION

Select nodes and edges to cut, copy, and paste

INTERACTION

Undo and redo functionality for moving, adding, and deleting nodes and edges

SUBFLOWS & GROUPING

This example demonstrates how to create dynamic node grouping in React Flow.

SUBFLOWS & GROUPING

Dynamically attach and detach nodes from parent containers with drag and drop functionality

LAYOUT

Create hierarchical trees with expandable and collapsible nodes using dagre for automatic layouts

LAYOUT

Automatically arrange nodes using various layout engines like dagre, d3-hierarchy, or elkjs

LAYOUT

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

LAYOUT

A self-organizing graph where users add nodes by clicking placeholder elements, and nodes position automatically.

WHITEBOARD

Freehand drawing on the canvas.

MISC

Generate static images of React Flow graphs on the server with Puppeteer