Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Output to html, to make clickable images? #604

Open
seanw2020 opened this issue Oct 5, 2021 · 4 comments
Open

Output to html, to make clickable images? #604

seanw2020 opened this issue Oct 5, 2021 · 4 comments

Comments

@seanw2020
Copy link

seanw2020 commented Oct 5, 2021

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?

@clayms
Copy link

clayms commented Oct 6, 2021

Have a look at

#389 (comment)
#389 (comment)
#389 (comment)

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/

@anilkulkarni87
Copy link

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.

@xihh87
Copy link
Contributor

xihh87 commented Nov 11, 2022

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

xihh87 added a commit to xihh87/diagrams that referenced this issue Nov 13, 2022
This allows in example adding hyperlinks to C4 diagrams,
as requested on mingrammer#604.

This also allows further customization for those elements.
@xihh87
Copy link
Contributor

xihh87 commented Nov 13, 2022

@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 added a commit to xihh87/diagrams that referenced this issue Dec 11, 2022
This allows in example adding hyperlinks to C4 diagrams,
as requested on mingrammer#604.

This also allows further customization for those elements.
xihh87 added a commit to xihh87/diagrams that referenced this issue Dec 11, 2022
This allows in example adding hyperlinks to C4 diagrams,
as requested on mingrammer#604.

This also allows further customization for those elements.
mingrammer pushed a commit that referenced this issue Jan 8, 2023
This allows in example adding hyperlinks to C4 diagrams,
as requested on #604.

This also allows further customization for those elements.
ajmaradiaga pushed a commit to ajmaradiaga/diagrams that referenced this issue Nov 8, 2023
This allows in example adding hyperlinks to C4 diagrams,
as requested on mingrammer#604.

This also allows further customization for those elements.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants