Graphviz diagram

Example taken here

About

Graphviz is open source graph visualization software. On the one hand it is general diagraming tool, so it doesn’t have DSL to directly express specific diagrams (let’s say Hasse diagram or ER diagram). On the other hand if you don’t have better solution you can always bend Graphviz to 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 background use bgcolor="transparent"

Example

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

Compare it to similar example in Mermaid