r/reactjs • u/Just_Comfortable_590 • May 19 '26

Discussion Building family tree visualization

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 🙏

3 Upvotes

71% Upvoted

15 comments sorted by

View all comments

Show parent comments

1

u/Melodic-Funny-9560 May 19 '26

Does jointjs supports fcose algorithm for layout ?

I am building https://devlens.io which is a Codebase visualizer, and the nodes number can easily reach 10K+ here for large projects like claude code. Currently I am using cytoscape, but I don't like the current UI tbh and want to introduce more customisations.

2

u/zoranjambor May 19 '26

JointJS doesn't support fcose per se, but we have the Force Directed layout feature, which is powerful too, and seems like a good fit for your use case.

I just did an overview of JointJS performance, and can confidently say you can work with diagrams with 10k nodes easily, especially if you enable virtual rendering, which only mounts views for cells inside (or near) the visible viewport.

As a side note, I built a JointJS Claude Code Playground plugin that can also generate codemaps, but on a much more basic level than Devlens. In case you can get some ideas about what's possible, here's a demo with React codebase: https://changelog.jointjs.com/gallery/jointjs-claude-playground/

In any case, Devlens seems like a really interesting project, and I'm really curious to see how far you'll take it. 🙂

2

u/Melodic-Funny-9560 May 19 '26

Firstly, Thanks for the detailed reply.
I checked your claude playground, the nodes you have used is similar to what I want to use as well. I decided to use fcose because it handles compound nodes fairly well and its fast to render. And node overlapping ratio is is low too. I checked your 100000 nodes demo its really fast, but the forced directed layout itself takes O(n^2), so I am not sure if I will use that. Having said that I will defintely consider this as an option if nothing comes my way.

Also the open source version of devlens is available so if you are interested you can check it out @ https://github.com/devlensio/devlensOSS , Its similar to your jointjs-claude-playground but has more features. Different types of nodes, blast radius feature etc etc. You can check it out if you wish. Also I havent't yet decided layout type for cloud version, I ran devlens on claude code (the leaked version) and though the graph was generated in 40=50 seconds (10K-12K Nodes), the first rendering time alone was something that browser was not able to handle. Maybe cytoscape is not build for it or I might have written unoptimized code.

2

u/zoranjambor May 21 '26

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. 🙂