Skip to content
Astro Digital Garden

Graphviz diagram

02SS(B)1SS(S)3486S(b)5S(a)S(A)SS(b)SS(a)S($end)S(b)S(a)S(a)7S(b)S(b)S(a)

Example taken here ↗

About

Graphviz ↗ is open-source graph visualization software. On one hand, it is a general diagramming tool, so it doesn’t have a DSL to directly express specific diagrams (let’s say a Hasse diagram or an ER diagram). On the other hand, if you don’t have a better solution, you can always bend Graphviz to create the desired diagram (though it can be tedious sometimes).

Installation

  1. Install dependencies

    Terminal window
    pnpm add @beoe/rehype-graphviz

  2. Configure Astro. See note about Rehype Plugins for Code.

    astro.config.mjs
    import { rehypeGraphviz } from "@beoe/rehype-graphviz";
    

    export default defineConfig({
      markdown: {
        rehypePlugins: [[rehypeGraphviz, { class: "not-content" }]],
      },
    });

  3. Optional install dependency for cache

    Terminal window
    pnpm add @beoe/cache

  4. Optional configure cache

    astro.config.mjs
    import { getCache } from "@beoe/cache";
    

    const cache = await getCache();
    

    export default defineConfig({
      markdown: {
        rehypePlugins: [[rehypeGraphviz, { class: "not-content", cache }]],
      },
    });

  5. Optional add pan and zoom for diagrams

Tips

Dark mode

Basic dark mode can be implemented with:

.graphviz {
  text {
    fill: var(--sl-color-white);
  }
  [fill="black"],
  [fill="#000"] {
    fill: var(--sl-color-white);
  }
  [stroke="black"],
  [stroke="#000"] {
    stroke: var(--sl-color-white);
  }
}

Plus, you can pass class ↗ to edges and nodes to implement advanced dark mode.

To remove background

To remove the background, use bgcolor="transparent".

Example

```dot
digraph x {bgcolor="transparent";rankdir=LR;node [shape=box]
  Start -> Stop}
```
StartStop

Compare it to similar example in Mermaid.

TODO

  • Highlighting of nodes or edges
  • Search/filter by labels

See for inspiration:

Alternatively, I can parse DOT language and use different renderers, for example: