4 ms·

Graphviz is a solid tool for this sort of thing

ColinWright 7y ago
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!
- phillipseamore 7y ago
  Export as SVG and use that in HTML
  - ColinWright 7y ago
    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?
    - thomas536 7y ago
      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 https://www.graphviz.org/doc/info/attrs.html#d:URL
    - phillipseamore 7y ago
      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 https://codepen.io/phillipseamore/pen/OJPqorm
      - ColinWright 7y ago
        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.

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!

phillipseamore 7y ago
Export as SVG and use that in HTML
- ColinWright 7y ago
  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?
  - thomas536 7y ago
    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 https://www.graphviz.org/doc/info/attrs.html#d:URL
  - phillipseamore 7y ago
    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 https://codepen.io/phillipseamore/pen/OJPqorm
    - ColinWright 7y ago
      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.