Rehype Graphviz Diagram

This is the unified/rehype plugin that allows you transform graphviz codes into svg diagrams for html content.

Usage

$3

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


  
    
  

`
$3
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 {
  ....
}
`
``
$3
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
API
This package is ESM only with default export name rehypeGraphvizDiagram.
$3
#### 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
  class="graphviz"
  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

  
    
  

``
Reference
- 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.
License
MIT © 但为君故