A rehype plugin to render mermaid diagrams
npm install rehype-mermaid



A rehype plugin to render mermaid diagrams.
- Installation
- Usage
- 'img-png'
- 'img-svg'
- 'inline-svg'
- 'pre-mermaid'
- API
- unified().use(rehypeMermaid, options?)
- Examples
- remark
- MDX
- Compatibility
- Related Projects
- Contributing
- Acknowledgements
- License
``sh`
npm install rehype-mermaid
Outside of browsers rehype-mermaid uses Playwright. If you use this
outside of a browser, you need to install Playwright and a Playwright browser.
`sh`
npm install playwright
npx playwright install --with-deps chromium
See the Playwright Browsers documentation for more
information.
This plugin takes all
and`elements, and
replaces them with a rendered version of the diagram. If the`element is wrapped in aelement, theelement is replaced as well. This is compatible with what Mermaid wouldmermaid
render client side, as well as the output ofcode blocks processed byremark-rehype.index.htmlThe plugin has several rendering strategies described below.
Given a file named
:`html`
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
`The following script:
js`
import { readFile } from 'node:fs/promises'import { rehype } from 'rehype'
import rehypeMermaid from 'rehype-mermaid'const { value } = await rehype()
.use(rehypeMermaid, {
// The default strategy is 'inline-svg'
// strategy: 'img-png'
// strategy: 'img-svg'
// strategy: 'inline-svg'
// strategy: 'pre-mermaid'
})
.process(await readFile('index.html'))console.log(value)
Yields the following results, depending on the stragey used.
$3
This strategy renders a diagram as an
element with an inline base64 PNG image. Given the`
example, this yields:html`
darkThis strategy is asynchronous.
option.$3
This strategy renders a diagram as an
element with an inline SVG image. Given the example,`
this yields:html`
darkThis strategy is asynchronous.
option.$3
This strategy renders a diagram as an inline
`$3
This package works with Mermaid codeblocks in MDX.
js
import { compile } from '@mdx-js/mdx'
import rehypeMermaid from 'rehype-mermaid'const mdx =
Mermaid Diagram
\
\\mermaid\
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\\const { value } = await compile(mdx, {
rehypePlugins: [rehypeMermaid]
})console.log(value)
mermaidCompatibility
This project is compatible with Node.js 18 or greater. It’s compatible with
code blocksremark-rehype
processed by. This means it’s alsomermaid
compatible with MDX.Related Projects
is the library that’s used to render the diagrams.mermaid-isomorphic
-allows this package torehype` provides HTML processing using a
render Mermaid diagrams in both Node.js and the browser.
-
unified pipeline.Contributing
Test fixtures are generated and verified using Linux. Rendering on other platforms may yield
slightly different results. Don’t worry about adding new fixtures, but don’t update existing ones
that cause CI to fail. Furthermore see my global
contributing guidelines.Acknowledgements
Thanks to @bitekong for giving me the npm package name.
License