Hacker News Reader

Comment by thomas536 | Hacker News Reader

Graphviz is a solid tool for this sort of thing

Yes it is, and the image I link to was created with GraphViz. I don't seem to be able to make it create an HTML5/CSS layout, though.

Which is what I'm asking for.

Searching for GraphViz and HTML, or searching for HTML in the GraphViz documentation, gives results for the content of nodes, and not rendering the layout via HTML. So I can't how it can be made to work.

If you can provide suggestions on how to make GraphViz do this I would be ecstatic, because I use GV all the time - it is usually my tool of choice.

Thanks.

(... edit ...)

Here's the "raw" output from using GraphViz:

  X_1220658902322307072 \
    [ fillcolor="#f2cffff92",
      height=2.4028,
      label="label 1",
      pos="768,477",
      shape=rectangle,
      style=filled,
      width=3.0278 ];

  X_1220659282338811906 \
    [ fillcolor="#f2cffff92",
      height=2.4028,
      label="label 2",
      pos="768,267",
      shape=rectangle,
      style=filled,
      width=3.0278 ];

  X_1220658902322307072 -> \
    X_1220659282338811906 \
    [ pos="e,768,353.51 768,390.5 768,381.62 768,372.56 768,363.59" ];

If you can help me lay that out in HTML/CSS then I'd be done.

Cheers!

Export as SVG and use that in HTML

Thanks for the reply ... it serves to reinforce that I've not been entirely stupid so far, because I've tried that, and it achieves half of what I want. The problem is that I want links in the nodes - that's why I'm asking for HTML specifically.

I know I'm at risk here of asking for Y when actually I want to achieve Z and the best way is to use X, but seriously, if the nodes are HTML then I can do things in them already, but if they are SVG then I need to re-learn all the capabilities in a new language, and not leverage what I already know.

I want to have boxes with arrows between them. I want them laid out semi-automatically in a hierarchical fashion. The boxes should contain HTML, so I can put text and links in them.

However ...

It's looking like I need to generate SVG. I can generate plain SVG using DOT/GraphViz, but then I can't put links in the nodes. So I need to parse and post-process the SVG to insert the links, and it all just seems too hard.

I'm not saying it should be easy, but it should be easier than this. Someone must have done something similar, there must be a library. The art must have progressed beyond he graphical equivalent of machine code, but it seems not even to have got as far as assembly language.

I can't believe people assemble these sorts of displays by hand ...

Am I asking the wrong question?

Ah interesting.

There are URL attributes that you can set to make the whole node clickable [1].

Do you need only one link per node or do you want the node's text to be fully blown/rendered html (i.e. multiple links per node)?

[1] https://www.graphviz.org/doc/info/attrs.html#d:URL

You don't need to learn much about SVG. I found some SVG output from GraphViz and simply put some <a> links around groups in the SVG.

https://codepen.io/phillipseamore/pen/OJPqorm

That's fine for small graphs constructed by hand, but I need to construct graphs with a few hundred nodes, and editing by hand to put the URLs into them isn't feasible.

However, progress has been made, I may have a solution that's "Good Enough(tm)" for my needs. I hope to post about it later.

Reply on news.ycombinator.com