# Interactive versionable architecture diagrams

DevFeed: [Interactive versionable architecture diagrams](<https://devfeed.tech/articles/interactive-versionable-architecture-diagrams-28707.md>)

Original publisher: [Read original article](<https://jeroenmols.com/blog/2023/06/09/interactive-architecture-diagram/>)

Author: info@jeroenmols.com (Jeroen Mols)

Published: 2023-06-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Jeroen Mols](<https://devfeed.tech/sources/jeroen-mols.md>)

Topics: [Graphs](<https://devfeed.tech/topics/graphs.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [blogs](<https://devfeed.tech/tags/blogs.md>), [diagram](<https://devfeed.tech/tags/diagram.md>), [git](<https://devfeed.tech/tags/git.md>), [graphviz](<https://devfeed.tech/tags/graphviz.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [svg](<https://devfeed.tech/tags/svg.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

## AI overview

A tutorial on generating interactive, versionable system architecture diagrams with Graphviz, exporting them as SVG, and embedding the SVG directly in HTML so diagram elements can link to the hosting page.

## Source excerpt

Tired of building un-versionable, lifeless architecture diagrams? Wouldn't it be great if you could add your diagram to Git, embed it in your documentation, and have clickable elements?