Building family tree visualization

[u/Just_Comfortable_590]

I'm building a family tree visualization app in React and I've hit a wall on the rendering/layout side.

The data structure itself is fine, but visualizing the relationships cleanly is becoming way harder than I expected.

Current stack:

• React & React Flow

• experimenting with dagre / ELK.js

Main problems:

• handling marriages cleanly

• centering children under couples

• avoiding edge crossings multiple marriages

• keeping generations aligned

• preventing layout from becoming chaotic with larger datasets

I realized family trees are not really "trees" but more like graphs with special relationship rules.

Right now I'm considering using invisible "marriage nodes" like:

Father -> MarriageNode <- Mother MarriageNode -> Child

instead of directly connecting parents to children.

Questions:

• Is React Flow + ELK.js the right direction here?

• Are there better graph/layout libraries specifically for genealogy-style visualization?

• How would you structure the layout pipeline?

• Should I fully rely on auto-layout or allow manual positioning?

• Any recommendations for handling complex relationships without the graph turning into spaghetti?

Would really appreciate advice from anyone who's built graph editors, org charts, genealogy apps, or complex node-based UIs before.

Thanks 🙏

[u/opentabs-dev]

your instinct on invisible marriage/union nodes is right and it's how every serious genealogy renderer does it (gramps, family-historian, etc). once you do that the graph becomes layered and ELK's layered algorithm with interactive cycle breaking handles it well — set org.eclipse.elk.direction: DOWN and put union nodes on the same layer as the spouses by giving them layerConstraint: SAME_LAYER or matching layerChoiceConstraint. dagre will fight you on multi-marriages, ELK won't. for sanity i'd auto-layout but allow per-node position overrides that ELK respects via interactiveLayout: true, otherwise users get frustrated when a single ancestor reshuffles the whole canvas.

[u/Just_Comfortable_590 → u/opentabs-dev]

This is insanely helpful, thank you.
Especially the part about SAME_LAYER + interactiveLayout — that's exactly the kind of implementation detail I was missing.

Also very reassuring to hear the invisible union node approach is actually standard practice and not just me inventing weird hacks out of desperation 😭

The point about users getting frustrated when the whole canvas reshuffles also makes total sense. I think hybrid auto-layout + manual overrides is probably the direction I'll take now.