A Unified/Rehype Plugin that allows you transform graphviz codes into SVG diagram.
npm install rehype-graphviz-diagramThis is the unified/rehype plugin that allows you transform graphviz codes into svg diagrams for html content.
This plugin make all (The class could be language-graphviz-neato or language-neato, language-graphviz-circo or language-circo, language-graphviz-dot or language-dot and others suffixed by layout engine name) elements wrapped by replaced by a rendered version of the SVG diagram.
Input:
``html`Hello World
Yields:
`html`Hello World
You can also integrate this rehype plugin with unified.js and remark plugins, to render graphviz diagrams in markdown.
For example, this is the markdown code with graphviz diagram use DOT engine.
``markdown`graphviz-dot
digraph BinaryTree {
node [shape=circle];
A -> B;
A -> C;
B -> D;
B -> E;
C -> F;
C -> G;
A [label="Root"];
B [label="Left"];
C [label="Right"];
D [label="L1"];
E [label="L2"];
F [label="R1"];
G [label="R2"];
}
```
Then use rehype-graphviz-diagram with unified.js and other remark plugins,
`typescript
import { unified } from "unified";
import remarkParse from 'remark-parse';
import rehypeStringify from "rehype-stringify";
import remarkRehype from "remark-rehype";
import rehypeGraphvizDiagram from "rehype-graphviz-diagram";
const output = await unified()
.use(remarkParse, {fragment: true})
.use(remarkRehype).use(rehypeGraphvizDiagram)
.use(rehypeStringify)
.process(/ Your markdown code here. /);
console.log(output.toString())
`
If you want to change another layout engine, like circo, neato, twopi and so on, like
``markdown`graphviz-circo`
digraph {
....
}
Or
`circo`
digraph {
....
}
`graphviz-neato`
digraph {
....
}
Or
`neato`
digraph {
....
}``
We set a distinguish language annotation from codeblock different for most of plugins and extensions on marketplace. \
For better preview of graphviz diagrams when you are editing markdown in vscode, we recommend the vscode extension Visual Studio Code Extension: Markdown Graphviz Preview
This package is ESM only with default export name rehypeGraphvizDiagram.
#### containerTagName?: string
Specify what tag will enclose the svg image as container. Default to figure, namely the tag , it will generate such code:
`html`
#### containerTagProps?: Properties
Optional. Add properties for container tag, it could be class, style and other more. Supports all valid DOM properties. For example,
`typescript`
await unified.use(rehypeGraphvizDiagram, {
containerTagProps: {
class: 'graphviz',
alt: 'This is a graphviz diagram.'
style: 'width:100px; hight:50px',
},
}); // ...
It will generate:
`html`
alt="This is a graphviz diagram."
style="width:100px; hight:50px"
>
#### postProcess: (svg: string) => string
Optional. Pass a function to specify how to process the generated SVG if you need, the input and output of this function is SVG code in string form. For example,
`typescript`
await unified.use(rehypeGraphvizDiagram, {
postProcess: (svg: string) => {
return svg.replace(/ };
});
The svg output will be
`html``
- Visual Studio Code Extension: Markdown Graphviz Preview Recommend to use, for better preview of graphviz diagrams when you are editing markdown in vscode.
- Graphviz Project The official project website.
- Viz.js The version of compiled graphviz for wasm package.
MIT © 但为君故