rehype-graphviz

 

A rehype plugin to render Graphviz diagrams.

This plugin does:

1. Generate SVGs from code blocks with graphviz dot language
2. Replace code blocks with generated SVGs

This plugin uses @hpcc-js/wasm to render SVGs from dot language. It is a port of Graphviz to WebAssembly.

Installation

``bash


npm

`ts
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeGraphviz from "rehype-graphviz";
import rehypeStringify from "rehype-stringify";
import { Graphviz } from "@hpcc-js/wasm";

const md =

Hello World

\\\dot
digraph {
a -> b
}
\\\
;

const html = unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeGraphviz, {
graphviz: await Graphviz.load(),
})
.use(rehypeStringify)
.processSync(md)
.toString();

console.log(html);
`

Yields:


`html


Hello World

@phcc-js/wasm/graphviz's Graphviz instance.

- See: https://hpcc-systems.github.io/hpcc-js-wasm/getting-started.html

- Example:

`js
import { Graphviz } from "@hpcc-js/wasm/graphviz";
const options = {
graphviz: await Graphviz.load(),
};
`

- Type:Graphviz

$3

Language associations.

- Default value:

`js
{
dot: ["graphviz"];
}
`

- Example:

Generage graphviz diagram from graphviz, graphviz-diagram, and graphviz-dot language code blocks:

`js
const options = {
langAssociations: {
dot: ["graphviz", "graphviz-diagram", "graphviz-dot"],
},
};
`

- Type:

`ts
Readonly<{
dot?: readonly string[];
}>;
`

$3

Tag name for the container element of the graphviz diagram.

- Default value: "div"
- Example:

`js
const options = {
tagName: "figure",
};
`

Yields:

`html


- Type: string

$3

Properties to be added to the container element of the graphviz diagram.

- Default value:

`js
{
className: "graphviz-diagram",
style: "overflow: auto;",
}
`

- Example:

`js
const options = {
properties: {
className: "graphviz",
style: "overflow: clip;",
},
};
`

Yields:

`html


- Type: Properties

$3

> [!WARNING]
> Use properties.className instead. When both are set, properties.className will be used.

Class name to be added to the container element of the graphviz diagram.

- Default value: "graphviz-diagram"

- Example:

`js
const options = {
className: "graphviz",
};
`

Yields:

`html


- Type: string

$3

> [!WARNING]
> Use properties.style instead. When both are set, properties.style will be used.

Style to be added to the container element of the graphviz diagram.

- Default value: "overflow: auto;"

- Example:

`js
const options = {
style: "overflow: clip;",
};
`

Yields:

`html


- Type: string

$3

Post processing function for rendered SVG element.

- Default value: (svg) => svg

- Example:

`js
// Replace black and white colors with currentColor and background-primary
// for dark mode support.
const options = {
postProcess: (svg) =>
svg
.replaceAll(/("#000"|"black")/g, "currentColor")
.replaceAll(/("#fff"|"white")/g, "var(--background-primary)"),
};
`

- Type: (svg: string) => string

- Parameters:
- svg: SVG element as string
- Returns: post processed SVG element as string

Development

$3

| Command | Description |
| ----------------------------- | ------------------------- |
| bun install | Install dependencies |
| bun run build | Build the project |
| bun run test | Run tests with watch mode |
| bun run check | Lint and format |
| npm publish --access public | Publish to npm |

This project was created using bun init in bun v1.0.7. Bun is a fast all-in-one JavaScript runtime.

$3

1. Update version in package.json
2. commit with tag vX.X.X`
3. push to GitHub

License

MIT License © 2023-2024 rai