Library: DOT (Graphviz)

Observable Framework documentation: Library: DOT (Graphviz) Source: https://observablehq.com/framework/lib-dot

DOT is a language for expressing node-link diagrams using Graphviz. Observable provides a dot tagged template literal powered by Viz.js. This is available by default in Markdown, or you can import it like so:

import dot from "npm:@observablehq/dot";

To use in a JavaScript code block:

dot`digraph G {
  rankdir = LR
  a -> b -> c
}`

You can also write DOT in a dot fenced code block:

```dot
digraph G {
  rankdir = LR
  a -> b -> c
}
```

This produces:

digraph G {
  rankdir = LR
  a -> b -> c
}

Here are some more examples.

graph { n0 -- n1 -- n2 -- n3 -- n0 }

digraph { x -> y -> z }

digraph G {
  subgraph cluster_0 {
    a0 -> a1 -> a2 -> a3
    label = "process #1"
    color = lightblue
  }
  subgraph cluster_1 {
    b0 -> b1 -> b2 -> b3
    label = "process #2"
    color = orange
  }
  start -> a0
  start -> b0
  a1 -> b3
  b2 -> a3
  a3 -> a0
  a3 -> end
  b3 -> end
  start [shape = diamond]
  end [shape = square]
}

If you don’t mind losing the conveniences of the built-in wrapper such as responsive light and dark mode, you can also use Viz.js directly. For example:

import {instance} from "npm:@viz-js/viz";

const viz = await instance();

display(
  viz.renderSVGElement({
    directed: false,
    edges: [
      {tail: "a", head: "b"},
      {tail: "b", head: "c"},
      {tail: "c", head: "a"}
    ]
  })
);