Graphviz for Your Website

Graphviz is a text-to-diagram system that is especially good for dependency graphs, concept maps, and other relationships where layout matters.

It uses the DOT language, which makes it a good fit when you want diagrams to live alongside text and remain easy to revise.

Simple example

digraph G {
  Idea -> Draft -> Review -> Publish
  Publish -> Archive
}

Authoritative sources

• Graphviz documentation
• DOT language
• Output formats

What you need to show it on your site

To display a live diagram, the site needs either a build step that turns the DOT source into SVG before publishing, or a browser-side renderer that loads the source and draws it at view time.

For permanent pages, the build-time SVG path is usually the best fit. It keeps the page stable, avoids script dependencies, and makes the diagram part of the published page rather than a runtime request.