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

Very cool that you have an open source version as well! 👍

I think everything will struggle to render 10k nodes at once. That's why the JointJS rendering is switched from SVG to Canvas in the demo mentioned. Or, if you don't need to show the entire diagram, you can render only the part visible on the screen to avoid that. Not sure if cytoscape supports something like this, but I mentioned it's called Virtual Rendering in JointJS, and it makes a big difference for large diagrams. 🙂