Dagre React Flow

Auto-arranges React Flow nodes using dagre's hierarchical layout algorithm so you don't have to position everything by hand. The main gotcha is coordinate conversion: dagre returns center points but React Flow expects top-left corners, so you need to subtract half the node dimensions. Works well for org charts, dependency graphs, and any directed graph where manual positioning would be tedious. The skill includes a complete getLayoutedElements function with proper spacing controls (nodesep, ranksep) and a reusable hook pattern. Most useful when you're loading dynamic graph data and need instant visual clarity without writing layout math yourself.

skills.sh installs: 247
GitHub stars: 87
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add existential-birds/beagle --skill dagre-react-flow --agent claude-code

Installs into .claude/skills of the current project.

Files

Dagre with React Flow

Dagre is a JavaScript library for laying out directed graphs. It computes optimal node positions for hierarchical/tree layouts. React Flow handles rendering; dagre handles positioning.

Quick Start

pnpm add @dagrejs/dagre

import dagre from '@dagrejs/dagre';
import { Node, Edge } from '@xyflow/react';

const getLayoutedElements = (
  nodes: Node[],
  edges: Edge[],
  direction: 'TB' | 'LR' = 'TB'
) => {
  const g = new dagre.graphlib.Graph();
  g.setGraph({ rankdir: direction });
  g.setDefaultEdgeLabel(() => ({}));

  nodes.forEach((node) => {
    g.setNode(node.id, { width: 172, height: 36 });
  });

  edges.forEach((edge) => {
    g.setEdge(edge.source, edge.target);
  });

  dagre.layout(g);

  const layoutedNodes = nodes.map((node) => {
    const pos = g.node(node.id);
    return {
      ...node,
      position: { x: pos.x - 86, y: pos.y - 18 }, // Center to top-left
    };
  });

  return { nodes: layoutedNodes, edges };
};