@beoe/rehype-graphviz

@beoe/rehype-graphviz

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

```dot
digraph G { Hello -> World }
```

will be converted to

<figure class="beoe graphviz">
  <svg>...</svg>
</figure>

which can look like this:

TODO: add screenshot

Usage

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

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeGraphviz)
  .use(rehypeStringify)
  .process(`markdown`);

Online documentation provides more details.

TODO

• expose options to load font metrics and images
  • Warning: no hard-coded metrics for 'Helvetica,Arial,sans-serif'. Falling back to 'Times' metrics
• check tred and unflatten functions
  • https://hpcc-systems.github.io/hpcc-js-wasm/graphviz/src/graphviz/classes/Graphviz.html