dagre-react-flow

Compute Dagre layout positions for directed graph nodes and edges.

75|9|Updated Dec 21, 2025

Search Tags:#automation #layout #react-flow #graph-layout #dagre

Ready to run

npx skills add https://github.com/anderskev/beagle --skill dagre-react-flow

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

Automatic Layout: Compute node positions using Dagre with configurable rank direction and spacing.
React Flow Integration: Translate Dagre's center coordinates to React Flow's top-left coordinates for precise rendering.
Use Cases: Great for auto-layout of dashboards, dependency graphs, and programmatic node arrangements.

Quick Start

Install and start by applying the layout function to your nodes and edges, then render via React Flow.

Frequently Asked Questions about dagre-react-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automatically layout nodes and edges in React Flow?▼

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.

Can I use Dagre with React Flow for directed 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.

What coordinate conversion does React Flow need from Dagre?▼

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.

How do I configure graph layout direction in React Flow?▼

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.

Do I need to specify node dimensions for graph layout?▼

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.

What graph types work with automatic layout in React Flow?▼

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.