react-flow

Features and purpose

Build interactive node-based diagrams, flowcharts, and graph editors with React Flow (@xyflow/react v12). Use when: (1) Creating node-based UIs like workflow editors, state machines, or mind maps, (2) Building diagram editors with drag-and-drop, (3) Implementing custom nodes and edges, (4) Working with connections between nodes, (5) Managing viewport/zoom controls, (6) Handling node/edge events, or (7) Any graph visualization in React. Triggers: "react flow", "xyflow", "node diagram", "flowchart editor", "workflow builder", "graph editor", "node-based UI", "canvas diagram", "draggable nodes", "edge connections".

Quick start

Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.