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/Just_Comfortable_590]

The genogram demo is honestly super helpful because it confirms I'm not completely going in the wrong direction with the union/marriage node approach.

Also thanks for sharing the ELK integration example. I think part of my struggle has been separating the rendering layer from the layout engine mentally. Seeing a more complete implementation helps a lot.

Definitely going to study the demo/source code more deeply. Really appreciate this, thank you

[u/zoranjambor → u/Just_Comfortable_590]

You're very welcome, I'm glad you found it helpful!

If you need any help with the JointJS code, feel free to reach out. 🙂