react-flow

Interactive node-based graph visualization and workflow editor for React applications. 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. Nodes are the building blocks of the graph. Each node has: Built-in node types: Edges connect nodes. Each edge requires: Built-in edge types: Handles are connection points on nodes. Use Position enum for placement: Available positions: Position.Top , Position.Right , Position.Bottom , Position.Left Use state hooks for full control: Access the React Flow instance for programmatic control: Define custom nodes using NodeProps with typed data: Register with nodeTypes : See Custom Nodes Reference for detailed patterns including styling, aviation map pins, and dynamic handles. Define custom edges using EdgeProps and path utilities: All return [path, labelX, labelY, offsetX, offsetY] .