[adevine]

Random question: Did you just hand-cut the svg code for the graph on the left side of the page? I took a quick look through the source code and didn't see any evidence of a specific tool.

The reason I ask is that that kind of behavior, where you click on the node and it highlights the paths to that node but grays out everything else, is super useful for complicated architecture diagrams where you want to put a ton of stuff in one diagram, but still be able to see where edges go when you have a big spider web of connections. I've been looking for diagramming software that would create these clickable kinds of diagrams for my company, but haven't found anything that exactly fits the bill (Most tools I've found generate static diagrams, and some mind mapping software I've seen doesn't totally fit the bill, either).

[GlennS]

For web things, I would recommend the combination of dagre (https://github.com/cpettitt/dagre), which will calculate node and edge positions, and d3.js (https://d3js.org/), which you can use to layout your nodes as an SVG.

I did some work on something a little bit similar for an EU research project, which you are welcome to take a look at. It's probably not directly applicable, but it may give you some thoughts about what does and doesn't work as a UI: https://github.com/cse-bristol/process-model/ https://tools.smartsteep.eu/process-model/?name=actionplanni...

[Drew_]

He used D3.js. It produces standard HTML SVG elements which is why it looks handcrafted, but you can see the d3.min.js link at the bottom of the body. D3 is very powerful and can probably be used to do what you want but has a very steep learning curve imo.