remark-graphviz-svg

A remark plugin to convert GraphViz code into SVG diagram

Features

• Custom language name for code blocks
• Support different GraphViz engines
• SVG Optimization using svgo

Installation

npm install remark-graphviz-svg

Note: This package uses ESM. Use Node 12+ and ESM import syntax to use this package.

Usage

import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import { remarkGraphvizSvg } from "remark-graphviz-svg";
import fs from "fs";

const processor = unified()
  .use(remarkParse)
  .use(remarkGraphvizSvg)
  .use(remarkRehype)
  .use(rehypeStringify);

const content = await processor.process(
  fs.readFileSync("example.md")
);

console.log(content.value);

Suppose the example.md has the following content:

# Hello, world

```graphviz
digraph {
  A -> B
}
```

Then the output of the above code is similar to the following:

<h1>Hello, world</h1>
<p>
  <svg><!-- generated svg --></svg>
</p>

Options

• language: Render GraphViz diagrams on specific language blocks. (Default: graphviz)
• graphvizEngine: GraphViz engine to use. See available engines here. (Default: dot)
• svgoOptions: Override default svgo options. Set it to null to disable svgo. (Default: defaultSvgoOptions)

License

GPL-3.0