Compute Dagre layout positions for directed graph nodes and edges.
npx skills add https://github.com/anderskev/beagle --skill dagre-react-flow
Please help me install this Agent Skill. Skill: dagre-react-flow Source: https://github.com/anderskev/beagle/tree/main/skills/dagre-react-flow Command: npx skills add https://github.com/anderskev/beagle --skill dagre-react-flow
This Skill automates graph layout by combining Dagre with React Flow to position nodes automatically for hierarchical or tree-like graphs, reducing manual futzing and improving readability.
Install and start by applying the layout function to your nodes and edges, then render via React Flow.
High-intent search queries and answers about installing and using this skill.
Automatic layout in React Flow positions nodes using Dagre, a graph layout library. Apply the layout function to your nodes and edges to compute positions based on rank direction (TB, LR, BT, RL), then render the positioned nodes in React Flow for hierarchical or tree-structured graphs.
Yes. Dagre computes layout positions for directed graphs, and this Skill translates Dagre's center coordinates to React Flow's top-left coordinate system, enabling precise node rendering with configurable spacing and direction support.
Dagre outputs center coordinates for nodes, but React Flow requires top-left coordinates. This Skill handles the conversion automatically, translating Dagre's layout output into React Flow's expected format with position data for each node.
Graph layout direction is set via rank direction parameters—TB (top-to-bottom), LR (left-to-right), BT (bottom-to-top), or RL (right-to-left). The Skill applies your chosen direction during layout computation to arrange nodes hierarchically.
Yes. Explicit node dimensions are required for accurate layout computation. Dagre uses these dimensions along with spacing configuration to position nodes correctly, ensuring edges and hierarchies render without overlap.
Hierarchical layouts, tree structures, and programmatic node arrangements work with automatic layout. This Skill excels for dashboards, dependency graphs, and any directed graph needing readability without manual positioning.
npowRender complex relationships and workflows as interactive Cytoscape.js browser diagrams.
javierhbrApply Dagre algorithm layouts to React Flow graph nodes and edges.
Aniket-a14Arrange React Flow nodes and edges hierarchically using the Dagre algorithm.
ArieGoldkinImplement edge computing patterns for Cloudflare Workers, Vercel Edge, and Deno Deploy.
