# Making interactive SVG diagrams **URL:** \ **Category:** Show and Tell\ **Created:** [February 12, 2024, 1:48pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017 "2024-02-12T13:48:52Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![BartB](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@BartB](https://forum.graphviz.org/u/BartB)\ **Post date:** [February 12, 2024, 1:48pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/1 "2024-02-12T13:48:52Z")
For exploring larger graphs with a lot of edges one of the options is to produce multiple graphs focusing on parts of the diagram. I have however found that there is also a possibility to make SVG’s interactive, making exploring graphs by clicking on nodes and edges more intuitive. So next time you export a graph, head over to this github i recently created to make your svg’s more interactive: [BartBrood/dynamic-SVG-from-Graphviz: javascript code that can be added to an SVG created by Graphviz to make it dynamic. (github.com)](https://github.com/BartBrood/dynamic-SVG-from-Graphviz) after adding some javascript to your svg it has the following functions: -Highlighting: when nodes or edges are clicked, they are highlighted. -zoom in or our on cluster: using the + or - button added to every cluster the drawing is zooming in or out on the cluster. -visibility switches: CSS classes can be added in grahviz dot to nodes or edges, all classes are listed and by clicking on the class the visibility of all nodes and edges with that class are hidden or shown. Maybe this could be added into the svg using a postprocessor? I have been collaborating to add this feature in [Excel to Graphviz](https://exceltographviz.com/). Base diagram: ![image](https://global.discourse-cdn.com/graphviz/original/2X/f/f7311e659ccaaebed6813f4165668d25e8f803a2.png) after clicking on node ‘order approval’ ![image](https://global.discourse-cdn.com/graphviz/original/2X/8/8314406c01c18c8aab9832b5c4781559e0b4f202.png) after clicking on ‘+’ for the workflow cluster: ![image](https://global.discourse-cdn.com/graphviz/original/2X/9/99f994b5605beddd035a8b8eb719d54505319471.png) after hidding cluster class: ![image](https://global.discourse-cdn.com/graphviz/original/2X/2/27507bb512e9677de7b151e89a7d2230df2f1865.png) ---
**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\ **Post date:** [February 12, 2024, 3:38pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/2 "2024-02-12T15:38:26Z")
cool ---
**Author:** ![azriel](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/azriel/32/1138_2.png) [@azriel](https://forum.graphviz.org/u/azriel)\ **Post date:** [February 17, 2024, 4:13am UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/3 "2024-02-17T04:13:16Z")
Heya, I’ve also had a play with adding interactivity to diagrams. I tried a pure CSS route because some places I wanted to paste the diagrams in block scripts (with good reason). Here’s my play project: - [https://azriel.im/dot\_ix/](https://azriel.im/dot_ix/) - [another demo](https://azriel.im/dot_ix/?src=BYSwpgTghhDGwE8BcAoABGqS0G8C%2B6aARtvobKQRgCaUpjUDmYAzqhlCWgNpQA0xALqEiFHkQGxhGWLR6wB1YQDsA9tTAB9EMoBmqtoSy40yqAFsw2AIJoqxUqYtW0AITvlHZy9gDCHmi9nbAARDwAXKBAAGwB3HWpNWGioFhZWdkxsAD4AWkIMbgAybIAHKHDgQSRdGOjcxggwMGVcgGYABg6CnhLyyuqWcIhVAGswXIBGHuKyiqqkIZHxhqaW3IA2Lpm%2B%2BergVQA3SBq61ebWgCZtjELdgaQD44hF4bGJxovNm9vZ-oX9LAAK5sVRA8LRHQTaa3XpzB6AkFIMEQqG5SGWb7dWF-PY1VTA0HgyHKCbUVLABg7eEAglIkZA5Qaai5AAe0R6wIgLFUEFypVUOnCkBEOXyOPuALORGiQImnWxv0lgzeK0u1P%2B1W4S3euXJLGAMGgyAALNIlTStTqVvqDrpdOlwkhJua7pakFBlCBzBUJixSjoNXjeSBGDpctw2pcAKSaXKXDbR11wzWvZYTGVyrFBh5PE61aL1TMTa6Kt2pvMva0Z2UTLZllN4xFE1GkqY52mE5HEtEYus-ctNuktklkilUiXu5tIBlMhhsjmwrk8vkCoUijhcPIdlXp9uT1PV87resa1TRBCMVTKaoF%2BqfE8DlPny-X3e6mEWgUXq83tO6h9WlPA8hy7FFR33L9QKRcDe29fsG1xBFh27VsxwNCcoOQrtZ2ZBdOSBbleX5QVlGFCAUCAA) I really like the highlighting of edges related to the thing you’ve clicked on; I haven’t found a nice way in CSS to address multiple adjacent sibling selector overlap (it breaks the styling). ---
**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\ **Post date:** [February 17, 2024, 2:12pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/4 "2024-02-17T14:12:58Z")
This is pretty cool. A lot of people would maybe like to use it in their work. Is there a way to make that easy for them? ---
**Author:** ![BartB](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@BartB](https://forum.graphviz.org/u/BartB)\ **Post date:** [February 19, 2024, 12:40pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/5 "2024-02-19T12:40:17Z")
@scnorth . Possibilities to make it easier: -Build a postprocessor that adds css and js code to svg’s produced by graphviz and use it in command line. -As mentioned in my post i am using [https://exceltographviz.com/](https://exceltographviz.com/). When producing svg’s with the tool the js code is added to the svg file automatically without manual intervention. -An online editor postprocessing svg’s so they include these features. ---
**Author:** ![smattr](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/smattr/32/85_2.png) [@smattr](https://forum.graphviz.org/u/smattr)\ **Post date:** [February 20, 2024, 8:03am UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/6 "2024-02-20T08:03:25Z")
A few issues relevant to this discussion: - [[Dot] class attribute for area tags in cmaps (#264) · Issues · graphviz / graphviz · GitLab](https://gitlab.com/graphviz/graphviz/-/issues/264) - [Add SVG output suitable for inlining in HTML (#2285) · Issues · graphviz / graphviz · GitLab](https://gitlab.com/graphviz/graphviz/-/issues/2285) - [Cairo-rendered SVG file doesn't include "id" attribute values from Dot file (#1340) · Issues · graphviz / graphviz · GitLab](https://gitlab.com/graphviz/graphviz/-/issues/1340) - [[Dot] ID="value" fails to produce id string in svg:svg output for html nodes (#207) · Issues · graphviz / graphviz · GitLab](https://gitlab.com/graphviz/graphviz/-/issues/207) - [[Other] [New Feature Request] Add a CSS-like "class" attribute (#694) · Issues · graphviz / graphviz · GitLab](https://gitlab.com/graphviz/graphviz/-/issues/694) I mention the above because it seems like some of these might contribute to it being harder than desired to programmatically locate nodes. ---
**Author:** ![musicarroll](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@musicarroll](https://forum.graphviz.org/u/musicarroll)\ **Post date:** [February 22, 2024, 5:23pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/7 "2024-02-22T17:23:40Z")
Very nice! I’ll consider incorporating some of your functionality into my Wordwalk puzzles, which are JS-enabled, interactive SVG graphs. The beta site for this is [https://www.spaghettispeller.com](https://www.spaghettispeller.com). My graphs are generated in SVG on the backend, enhanced via python and served up to the web via Django. I was wondering if you have any experience with the d3-graphviz approach. I’m thinking of maybe using that on the frontend to build the graphs in JS, and thus offload some more CPU usage to the user’s device. But I haven’t done any experiments with d3-graphviz yet (the docs for that look great). ---
**Author:** ![BartB](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@BartB](https://forum.graphviz.org/u/BartB)\ **Post date:** [February 23, 2024, 12:54pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/8 "2024-02-23T12:54:49Z")
Glad you like this, i have been looking at d3 and d3-graphviz as further extensions to these functionalities like expanding and collapsing clusters require redrawing of the whole diagram which could be achieved through d3-graphviz. However i am a bit reluctant to start using importing of libraries, for now all code required is fully embedded inside the svg, i have not tried embedding a full d3 library inside the svg, should give it a try at some point… ---
**Author:** ![musicarroll](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@musicarroll](https://forum.graphviz.org/u/musicarroll)\ **Post date:** [March 14, 2024, 3:37pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/9 "2024-03-14T15:37:26Z")
I share your reluctance. I don’t like creating too many external dependencies. In my wordwalk puzzles ([spaghettispeller.com](http://spaghettispeller.com)), I have the SVG as the core of the puzzle (compiled using python and dot on the backend), and that puzzle core is surrounded by Javascript that accesses the SVG elements to make changes as the game progresses. It’s pretty primitive, but works pretty well. My long term roadmap has it evolving to Rust and WASM, retaining some JS for DOM interactivity, and building a Rust Substrate node linked in some TBD way to the Polkadot ecosystem. The upshot is that the puzzles can be traded like NFTs, bought/sold, and stored in the blockchain. And the whole thing will then become decentralized. But that is still a ways off. Do you have any experience with SVG-to-WASM integration? ---
**Author:** ![BartB](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@BartB](https://forum.graphviz.org/u/BartB)\ **Post date:** [August 26, 2024, 7:01am UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/10 "2024-08-26T07:01:52Z")
My github library now has an extension , [BartBrood/dynamic-SVG-from-Graphviz: javascript code that can be added to an SVG created by Graphviz to make it dynamic. (github.com)](https://github.com/BartBrood/dynamic-SVG-from-Graphviz) It now has an HTML version that uses 2 libraries, graphlib-dot for parsing dot src code into a javascript object and a WASM version of graphviz for local re-rendering. It has features like edge highlighting, cluster collapsing/expanding and class visisbility toggles. ---
**Author:** ![Olumide](https://avatars.discourse-cdn.com/v4/letter/o/5fc32e/32.png) [@Olumide](https://forum.graphviz.org/u/Olumide)\ **Post date:** [February 14, 2025, 6:20pm UTC](https://forum.graphviz.org/t/making-interactive-svg-diagrams/2017/11 "2025-02-14T18:20:37Z")
Where can I find the source to your diagrams? I am trying to stack subgraphs and failing badly at it. Thanks