Agent skill · software engineering · erichowens
reactflow-expert
Builds DAG visualizations using ReactFlow v12 with custom nodes, ELKjs auto-layout, Zustand state management, and live state updates via WebSocket. Use when implementing workflow visualization
Why this skill is useful
Adds executable patterns for Zustand state management and custom ReactFlow node components that enhance workflow visualizations.
What it needs
Requires elkjs, reactflow, zustand installed locally. About 4k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
ReactFlow Expert Builds DAG visualizations using ReactFlow v12 with custom agent nodes, ELKjs auto-layout, Zustand state management, and live execution state updates. --- When to Use ✅ Use for: Building workflow/DAG visualization dashboards Creating custom ReactFlow node components for agent state Integrating ELKjs auto-layout for automatic graph positioning Wiring WebSocket execution events into ReactFlow state Implementing zoom, pan, selection, and node interaction ❌ NOT for: Static Mermaid diagrams (use mermaid-graph-writer) General React component development Non-graph visualizations (charts, tables) --- Architecture --- Core Patterns (ReactFlow v12) Zustand Store (Recommended over useNodesState for complex editors) Custom Agent Node ELKjs Auto-Layout Hook Dashboard Assembly --- v12 Gotchas Pitfall Fix --------- ----- nodeTypes defined inside component → infinite re-render Define OUTSIDE component or wrap in useMemo State update doesn't trigger re-render Must create NEW node object: { ...node, data: { ...node.data, ...update } } xPos/yPos in custom node → undefined Use positionAbsoluteX/positionAbsoluteY (v12 rename) nodeInternals → undefined Use nodeLookup (v12 rename) ELK layout ignores node size Pass node.measured?.width and height explicitly fitView fires before DOM paint Wrap in requestAnimationFrame(() => fitView()) Interactive elements drag the node Add className="nodrag" to inputs, buttons, selects --- Anti-Patterns Canvas Rendering for Debugging Wrong: Using canvas-based libraries (GoJS) where you can't inspect nodes in dev tools. Right: ReactFlow renders SVG + HTML. Every node is inspectable in React DevTools and the DOM. Re-running Layout on Every State Update Wrong: Calling ELK layout every time a node's status changes (expensive, causes visual jitter). Right: Only re-layout when topology changes (add/remove node/edge). Status color changes are just data updates — no layout needed. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/reactflow-expert