dagre-react-flow
Automatic graph layout using dagre with React Flow (@xyflow/react). Use when implementing auto-layout, hierarchical layouts, tree structures, or arranging nodes programmatically. Triggers on dagre, auto-layout, automatic layout, getLayoutedElements, rankdir, hierarchical graph.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/anderskev/dagre-react-flowWhat 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
- "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?"
- "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."
- "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.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-anderskev-dagre-react-flow": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: code-execution
Related Skills
explanation-docs
Explanation documentation patterns for understanding-oriented content - conceptual guides that explain why things work the way they do
tutorial-docs
Tutorial patterns for documentation - learning-oriented guides that teach through guided doing
pytest-code-review
Reviews pytest test code for async patterns, fixtures, parametrize, and mocking. Use when reviewing test_*.py files, checking async test functions, fixture usage, or mock patterns.
reference-docs
Reference documentation patterns for API and symbol documentation. Use when writing reference docs, API docs, parameter tables, or technical specifications. Triggers on reference docs, API reference, function reference, parameters table, symbol documentation.
serde-code-review
Reviews serde serialization code for derive patterns, enum representations, custom implementations, and common serialization bugs. Use when reviewing Rust code that uses serde, serde_json, toml, or any serde-based serialization format. Covers attribute macros, field renaming, and format-specific pitfalls.