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 🙏