react-flow-advanced

Implement advanced React Flow diagrams with nested groups and custom connections.

Updated Dec 17, 2025

Search Tags:#drag-and-drop #react-flow #dagre #undo-redo #nested-nodes #graph-editor #custom-connections

Ready to run

npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill react-flow-advanced-lrmdom

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-flow-advanced
Source: https://github.com/Lrmdom/patrimonio-pwa/tree/main/.windsurf/skills/react-flow-advanced
Command: npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill react-flow-advanced-lrmdom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Advanced patterns for React Flow enable building complex diagrams with nested groups, custom connections, and programmable layouts, reducing manual wiring and boilerplate.

Core Features & Use Cases

Sub-flows (Nested Nodes) and Group Node patterns for organizing complex graphs.
Custom Connection Lines, Drag-and-Drop integration, Undo/Redo, and programmatic layout using dagre.
Use Case: Build a visual workflow editor or process mapping tool with scalable node and edge management.

Quick Start

Plug these advanced patterns into your React Flow canvas to start building nested groups, custom connections, and automatic layouts.

Frequently Asked Questions about react-flow-advanced

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build nested groups and sub-flows in a React Flow diagram?▼

Build nested groups in React Flow by applying sub-flow and group node patterns to organize complex graphs, reducing manual wiring and boilerplate for scalable node management. These templates provide reusable structures for parent-child relationships.

What's the best way to implement drag-and-drop and custom connection lines in React Flow?▼

Implement drag-and-drop and custom connection lines in React Flow using provided integration templates and middleware, streamlining visual edge creation and node placement within a workflow editor interface.

How do I automatically layout React Flow diagrams using dagre?▼

Automatically layout React Flow diagrams using dagre by applying the programmatic layout templates, which calculate node positions to reduce manual arrangement when mapping complex processes.

Can I add undo and redo functionality to a React Flow workflow editor?▼

Add undo and redo functionality to a React Flow workflow editor using the included middleware for node changes and keyboard shortcuts, tracking graph state to reverse or replay user actions.

Does this React Flow approach support performance optimizations for large visual programming interfaces?▼

This React Flow approach supports performance optimizations through reusable templates and middleware designed for scalable node and edge management in large visual programming tools and process-mapping interfaces.