Graphviz diagram

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

Install dependencies
Terminal window
```
pnpm add @beoe/rehype-graphviz
```

Configure Astro. See note about Rehype Plugins for Code.

import { rehypeGraphviz } from "@beoe/rehype-graphviz";

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

Optional install dependency for cache
Terminal window
```
pnpm add @beoe/cache
```

Optional configure cache

import { getCache } from "@beoe/cache";

const cache = await getCache();

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

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 alt="example of the Graphviz diagram"
digraph x {bgcolor="transparent";rankdir=LR;node [shape=box]
  Start -> Stop}
```

Compare it to similar example in Mermaid.