search

mingrammer / diagrams

:art: Diagram as Code for prototyping cloud system architectures
https://diagrams.mingrammer.com
MIT License
35.75k stars 2.32k forks source link

href/link support #97

Open coryodaniel opened 4 years ago

coryodaniel commented 4 years ago

Hi!

I took a swing at adding clickable link support to diagrams so that nodes and edges can have links.

It is trivial to add to svgs as svgs natively support links. It just requires graphviz adding URL, labelURL, or edgeURL attributes to the graph's node, edge, or label.

The SVG approach comes out great, its a single file, links embedded.

To png, jpg, etc it is necessary to use cmapx and image maps in HTML. I had an issue though, as it generates all of the links in odd places. I think it may be due to some of the padding, but I spent a few hours trying to debug why and could not figure it out - despite everything being aligned properly when using SVG. The other caveat with non-svg images is that three files have to be created: the graph image, a cmapx file (temporary), and an HTML file.

So, I have a few questions:

  1. Would you be interested in having link support in this library?
  2. Would it be fine to make the initial PR only supporting SVG?
  3. Despite the alignment bug, would supporting links in non-svg images be welcome being that it generates a number of files to make it work?
coryodaniel commented 4 years ago

I figured out what the bad alignment was from. The default padding on the diagram. I'm not really sure how to translate graphviz's inches to pixels for the image map to be placed in the right spot.

Using a link could disable padding? Unless someone knows some pixel/inch magic.