diagrams icon indicating copy to clipboard operation
diagrams copied to clipboard

Output to html, to make clickable images?

Open seanw2020 opened this issue 3 years ago • 4 comments

Is it possible to output to html? That way, you could click on a node, for example, which is a link to a GitHub documentation page.

The diagrams documentation says:

You can specify the output file format with outformat parameter. Default is png. ﴾png, jpg, svg, and pdf﴿ are allowed.

And I see that graphviz allows URL in SVG where they provide an example. Separately, this example shows a graphviz-centered approach.

Thoughts?

seanw2020 avatar Oct 05 '21 20:10 seanw2020

Have a look at

https://github.com/mingrammer/diagrams/issues/389#issuecomment-737501794 https://github.com/mingrammer/diagrams/issues/389#issuecomment-737523177 https://github.com/mingrammer/diagrams/issues/389#issuecomment-737537465

Also, just try and set the href attribute of your Diagram, or one Cluster, Node, or Edge in your Diagram. see: https://graphviz.org/docs/attrs/href/

clayms avatar Oct 06 '21 09:10 clayms

We can do this with graphiviz for sure. Here is an example page: https://anilkulkarni87.github.io/treasure-data-digdag-graph/graphs/project1/workflow1.html The node +call_workflow2.dig can be clicked to navigate it to another graph. I will try the href attribute with diagrams and see what happens.

anilkulkarni87 avatar Mar 31 '22 17:03 anilkulkarni87

It may be easy to add an href attr to Node and use it when transforming to .dot to generate the diagram.

xihh87 avatar Nov 11 '22 03:11 xihh87

@seanw2020 Although html is not an accepted format, this example makes clickable images you can embed on an HTML document:

from diagrams import Diagram
from diagrams.aws.storage import S3

with Diagram("test", outformat=["svg"]):
    S3("example", href="https://aws.amazon.com/s3/")

Maybe this issue should be closed.

xihh87 avatar Nov 13 '22 04:11 xihh87