DAG Layout Using HTML and CSS

Question

For some years now I've been using a visualisation tool to help me keep track of long running, widely branching discussions on Twitter and elsewhere. A small example is here:https://www.solipsys.co.uk/Chitter/1199951849769574400.pngI've been trying to work out how to use HTML and CSS to create a similar effect, but I've drawn a blank. It would seem to me to be a commonly needed thing, but I've not found anything on the web that meets my need, despite several hours of searching.So I must be missing something. My gut tells me this should be a common thing, but all my search terms have failed. I'd really appreciate a pointer.The layout doesn't need to be dynamic, but it would be a useful thing if it was. The nodes don't need to be clickable, but it would be a useful thing if they were.Just ... anything to semi-automatically layout a tree or DAG of nodes with text and the arrows between them.TIA.

skibz · Accepted Answer

Here are a few that I found:- http://sigmajs.org/ - https://js.cytoscape.org/ - https://visjs.org/Sorry for the poor formatting. I don't know how to make the links appear as a newline delimited list.

ColinWright · Answer

Clickable:https://www.solipsys.co.uk/Chitter/1199951849769574400.png

thomas536 · Answer

Graphviz is a solid tool for this sort of thing

DAG Layout Using HTML and CSS

Here are a few that I found:
- http://sigmajs.org/ - https://js.cytoscape.org/ - https://visjs.org/
Sorry for the poor formatting. I don't know how to make the links appear as a newline delimited list.

Clickable:
https://www.solipsys.co.uk/Chitter/1199951849769574400.png

Graphviz is a solid tool for this sort of thing