@beoe/rehype-graphviz

Rehype plugin to generate Graphviz diagrams in place of code fences. Example:

Diagram

Markdown

```dot
digraph finite_state_machine {
    bgcolor="transparent";
    fontname="Helvetica,Arial,sans-serif";
    node [fontname="Helvetica,Arial,sans-serif"]
    edge [fontname="Helvetica,Arial,sans-serif"]
    rankdir=LR;
    node [shape = doublecircle]; 0 3 4 8;
    node [shape = circle];
    0 -> 2 [label = "SS(B)"];
    0 -> 1 [label = "SS(S)"];
    1 -> 3 [label = "S($end)"];
    2 -> 6 [label = "SS(b)"];
    2 -> 5 [label = "SS(a)"];
    2 -> 4 [label = "S(A)"];
    5 -> 7 [label = "S(b)"];
    5 -> 5 [label = "S(a)"];
    6 -> 6 [label = "S(b)"];
    6 -> 5 [label = "S(a)"];
    7 -> 8 [label = "S(b)"];
    7 -> 5 [label = "S(a)"];
    8 -> 6 [label = "S(b)"];
    8 -> 5 [label = "S(a)"];
}
```

Installation

npm

npm i @beoe/rehype-graphviz

yarn

yarn add @beoe/rehype-graphviz

pnpm

pnpm add @beoe/rehype-graphviz

Usage

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

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeGraphviz, {
    /* options */
  })
  .use(rehypeStringify)
  .process(`markdown`);

Check out other options.

Configuration

You probaly want to use inline strategy and implement dark scheme via CSS:

.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);
  }
}

Tips

inline strategy allows to use interactivity.

Transparent background

To remove background use:

```dot
digraph G {
 bgcolor="transparent"
}
```

TODO

• support images

  graphviz.neato('digraph { a[image="./resources/hpcc-logo.png"]; }', "svg", {
    images: [
      { path: "./resources/hpcc-logo.png", width: "272px", height: "92px" },
    ],
  });