react-flow-architect

# ReactFlow Architect Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management. ## Quick Start Create basic interactive graph: ```tsx import ReactFlow, { Node, Edge } from "reactflow"; const nodes: Node[] = [ { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } }, { id: "2", position: { x: 100, y: 100 }, data: { label: "Node 2" } }, ]; const edges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }]; export default function Graph() { return <ReactFlow nodes={nodes} edges={edges} />; } ``` ## Core Patterns ### Hierarchical Tree Navigation Build expandable/collapsible tree structures with parent-child relationships. #### Node Schema ```typescript interface TreeNode extends Node { data: { label: string; level: number; hasChildren: boolean; isExpanded: boolean; childCount: number; category: "root" | "category" | "process" | "detail"; }; } ``` #### Incremental Node Building ```typescript const buildVisibleNodes = useCallback( (allNodes: TreeNode[], expandedIds: Set<string>, otherDeps: any[]) => { const visibleNodes = new Map<string, TreeNode>(); const visibleEdges = new Map<string, TreeEdge>(); // Start with root nodes const rootNodes = allNodes.filter((n) => n.data.level === 0); // Recursively add visible nodes const addVisibleChildren = (node: TreeNode) => { visibleNodes.set(node.id, node); if (expandedIds.h...