react-flow

SKILL.md

Interactive node-based graph visualization and workflow editor for React applications.

Provides built-in node types (default, input, output, group) and edge types (bezier, straight, step, smoothstep) with full customization via custom components

Includes Handle components for connection points, NodeProps and EdgeProps for typed custom nodes and edges, and EdgeLabelRenderer for interactive labels

Offers programmatic control through useReactFlow hook for viewport management (fitView, zoom, pan), node/edge manipulation, and coordinate transformation

Supports comprehensive event handling for node/edge interactions, connections, selection changes, and viewport updates with connection validation

React Flow

React Flow (@xyflow/react) is a library for building node-based graphs, workflow editors, and interactive diagrams. It provides a highly customizable framework for creating visual programming interfaces, process flows, and network visualizations.

Quick Start

Installation

pnpm add @xyflow/react

Basic Setup

import { ReactFlow, Node, Edge, Background, Controls, MiniMap } from '@xyflow/react';
import '@xyflow/react/dist/style.css';