What it is
Dagre is an open source JavaScript library for laying out directed graphs. You give it a list of nodes with their sizes and a list of edges, and it returns a position for every node. It arranges the graph in ranks, or layers, so that edges mostly point the same way and crossings are kept down. The result reads top to bottom or left to right.
It only does the maths. Dagre does not draw anything, which is why it is often used next to a rendering library such as React Flow or D3. It suits trees, flowcharts, dependency graphs and org charts, where there is a natural direction from parent to child. The original project was written by Chris Pettitt.
How I use it
- Automatic layout for the family tree canvas: Dagre places every member, and React Flow draws them.
- Generations line up in ranks, so parents sit above children and the tree reads in one direction.
- An extra untangle layout runs on top for busy branches, where marriages and siblings cross lines.
- Layout runs in the browser in the React and Vite front end, so the API only returns members and relationships from Neo4j.
Dagre is the right tool when a graph has a clear direction and you want a tidy layered layout without a heavy layout engine. Generations in a family tree are exactly that kind of layered structure. I reach for it because it is small, fast in the browser, and easy to feed from the same node list React Flow already uses.
Questions
How do you lay out a family tree automatically?
I pass the members and relationships to Dagre, which places each person in a layer by generation and returns coordinates. React Flow then draws the tree, and an untangle layout tidies busy branches.
Is Dagre a drawing library?
No. Dagre only calculates positions. You need a renderer such as React Flow, D3 or plain SVG to actually draw the nodes and lines.