https://github.com/prinorange/rehype-graphviz-diagram
This is the Unified/Rehype plugin that transform Graphviz codes into SVG diagrams for html content.
https://github.com/prinorange/rehype-graphviz-diagram
graphviz hast markdown mdx rehype rehype-plugin text-to-diagram unified
Last synced: 2 months ago
JSON representation
This is the Unified/Rehype plugin that transform Graphviz codes into SVG diagrams for html content.
- Host: GitHub
- URL: https://github.com/prinorange/rehype-graphviz-diagram
- Owner: PrinOrange
- License: mit
- Created: 2025-02-27T14:19:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-01T10:11:50.000Z (about 1 year ago)
- Last Synced: 2025-07-08T04:23:15.094Z (11 months ago)
- Topics: graphviz, hast, markdown, mdx, rehype, rehype-plugin, text-to-diagram, unified
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/rehype-graphviz-diagram
- Size: 109 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# Rehype Graphviz Diagram
This is the unified/rehype plugin that allows you transform graphviz codes into svg diagrams for html content.
## Usage
### Basic usage
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
```
### Process markdown with `remark`
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 {
....
}
```
````
### Related vscode extension
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](https://marketplace.visualstudio.com/items?itemName=PrinOrange.markdown-graphviz-preview)
## API
This package is **ESM only** with default export name `rehypeGraphvizDiagram`.
### `Options?`
#### `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
```
#### `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(/
```
## Reference
- [Visual Studio Code Extension: Markdown Graphviz Preview](https://marketplace.visualstudio.com/items?itemName=PrinOrange.markdown-graphviz-preview) Recommend to use, for better preview of graphviz diagrams when you are editing markdown in vscode.
- [Graphviz Project](https://graphviz.org/) The official project website.
- [Viz.js](https://github.com/mdaines/viz-js) The version of compiled graphviz for wasm package.
## License
MIT © [但为君故](https://github.com/PrinOrange)