dagre-react-flow

What This Skill Does

The dagre-react-flow skill provides an intelligent bridge between the hierarchical layout capabilities of Dagre and the rendering engine of React Flow. When building complex node-based UIs, manually positioning nodes is tedious and error-prone. This skill automates the process by calculating optimal node coordinates based on graph relationships (nodes and edges), handling constraints like ranking, spacing, and directional flow (TB, BT, LR, RL). It performs the necessary mathematical translation between Dagre's center-point coordinate system and React Flow's top-left origin system, ensuring your nodes are perfectly aligned without overlapping or off-screen rendering.

Installation

To install this skill, run the following command in your terminal within your OpenClaw-enabled project: clawhub install openclaw/skills/skills/anderskev/dagre-react-flow

Use Cases

This skill is essential for developers building interactive visualization tools. Common use cases include:

• Decision Trees: Automatically organizing logic flows for customer support bots or game dialogue trees.
• Dependency Graphs: Visualizing how microservices, packages, or database tables relate to one another.
• Org Charts: Rendering hierarchical team structures that remain legible as new nodes are added.
• Data Pipelines: Arranging ETL workflows where clear left-to-right flow is required for user comprehension.

Example Prompts

1. "I need to rearrange my node-based editor into a left-to-right tree layout; can you implement a layout function using dagre and integrate it into my existing React Flow setup?"
2. "My graph nodes are overlapping when I add new items. Help me add a getLayoutedElements function to my project that accounts for specific node dimensions and adds 50px of rank separation."
3. "Show me how to convert my React Flow state to a hierarchical layout using dagre so my nodes look clean and organized automatically."

Tips & Limitations

• Dimension Accuracy: Always prioritize 'measured' dimensions from React Flow if your nodes have dynamic text content, otherwise the layout engine may truncate or overlap elements.
• Coordinate Offsets: Remember that Dagre calculates node centers while React Flow uses the top-left corner. Always apply an offset of (width/2, height/2) to the X and Y coordinates before setting state.
• Performance: For extremely large graphs (1000+ nodes), consider running the layout calculation inside a Web Worker to avoid blocking the main UI thread, as dagre processing is synchronous.
• Fixed vs. Fluid: If your nodes have varying sizes, you must map the individual dimensions into the Dagre graph instance before calling the layout function, or the spacing logic will default to uniform rectangles.