Dot

A service for transforming Graphviz data into SVG.

The Graphviz data must be formatted in a specific way:

<details>
  <summary>
    <object type="image/svg+xml" data="https://dot.skia.org/dot"></object>
  </summary>
  <pre>
    graph {
	  Hello -- World
    }
    </pre>
</details>

Why this particular format? The details/summary allows for showing the summary, the generated SVG, while by default hiding the dot code, but in a way that makes it easy to view. We use an 'object' tag instead of an 'img' tag because that allows links in the SVG to be functional. The 'pre' tag makes it easy to grab the dot code and also formats the dot code nicely.

Because <object> tags are treated like iframes, all links in Graphviz should specify a target, for example:

digraph {
	Jim [URL="https://www.google.com/" fillcolor="green4" style="filled" target="_blank"];
	Jim -> John;
	Jim -> Mary;
}

If you have more that one diagram on a singe page then make the 'data' URLs unique by adding to the query parameters. For example:

  <object type="image/svg+xml" data="https://dot.skia.org/dot?first-diagram"></object>

  ...

  <object type="image/svg+xml" data="https://dot.skia.org/dot?second-diagram"></object>

The service understands the following formats:

The format is specified via the path in the URL, for example to use neato:

<details>
<summary>
  <object type="image/svg+xml" data="https://dot.skia.org/neato"></object>
</summary>
<pre>
  graph {
	  Hello -- World
  }
</pre>
</details>