rehype-mermaidjs
Advanced tools
A rehype plugin to render mermaid diagrams.
npm install rehype-mermaidjs
In Node.js this package uses playwright under the hood. To use it, you may need to install additional dependencies. These can be installed with:
npx playwright install --with-deps chromium
See the Playwright Browsers documentation for more information.
This plugin takes all <pre class="mermaid"> and <code class="language-mermaid"> elements, and
replaces them with a rendered version of the diagram. If the <code> element is wrapped in a
<pre> element, the <pre> element is replaced as well. This is compatible with what Mermaid would
render client side, as well as the output of mermaid code blocks processed by
remark-rehype.
The plugin has several rendering strategies described below.
Given a file named index.html:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<pre><code class="language-mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</code></pre>
<pre class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</pre>
</body>
</html>
The following script:
import { readFile } from 'node:fs/promises'
import { rehype } from 'rehype'
import rehypeMermaid from 'rehype-mermaidjs'
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.
'img-png'This strategy renders a diagram as an <img> element with an inline base64 PNG image. Given the
example, this yields:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img alt="" height="215" id="mermaid-0" src="data:image/png;base64,iVBORw0KGgoA…" width="118" />
<img alt="" height="215" id="mermaid-1" src="data:image/png;base64,iVBORw0KGgoA…" width="118" />
</body>
</html>
This strategy is asynchronous.
'img-svg'This strategy renders a diagram as an <img> element with an inline SVG image. Given the example,
this yields:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img alt="" height="215" id="mermaid-0" src="data:image/xml+svg,%3csvg…" width="118" />
<img alt="" height="215" id="mermaid-1" src="data:image/xml+svg,%3csvg…" width="118" />
</body>
</html>
This strategy is asynchronous.
'inline-svg'This strategy renders a diagram as an inline <svg> element. Given the example, this yields:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<svg id="mermaid-0" …>…</svg>
<svg id="mermaid-1" …>…</svg>
</body>
</html>
This strategy is asynchronous.
'pre-mermaid'This strategy replaces the element with a <pre class="mermaid"> element with only the diagram as
its child. Given the example, this yields:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<pre class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</pre>
<pre class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</pre>
</body>
</html>
This allows Mermaid to render the diagram on the client side, for example using:
import mermaid from 'mermaid'
mermaid.initialize({ startOnLoad: true })
This strategy is synchronous.
This package has a default export rehypeMermaid.
unified().use(rehypeMermaid, options?)optionsbrowserThe Playwright browser to use. (object, default: chromium)
cssA URL that points to a custom CSS file to load. Use this to load custom fonts. This option is
ignored in the browser. You need to include the CSS in your build manually. (string | URL)
errorFallbackCreate a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code block is removed. The function receives the following arguments:
element The hast element that could not be rendered.diagram The Mermaid diagram that could not be rendered as a string.error: The error that was thrown.file: The file on which the error occurred.launchOptionsThe options used to launch the browser. (object)
mermaidConfigA custom Mermaid configuration. By default fontFamily is set to arial,sans-serif. This option is
ignored in the browser. You need to call mermaid.initialize() manually. (object)
prefixA custom prefix to use for Mermaid IDs. (string, default: mermaid)
strategyThe render strategy to use. One of 'img-png', 'img-svg',
'inline-svg', or 'pre-mermaid'. (default:
'inline-svg')
This project is compatible with Node.js 16 or greater. It’s compatible with mermaid code blocks
processed by remark-rehype. This means it’s also
compatible with MDX.
mermaid is the library that’s used to render the diagrams.mermaid-isomorphic allows this package to
render Mermaid diagrams in both Node.js and the browser.rehype provides HTML processing using a
unified pipeline.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.
FAQs
A rehype plugin to render mermaid diagrams
The npm package rehype-mermaidjs receives a total of 246 weekly downloads. As such, rehype-mermaidjs popularity was classified as not popular.
We found that rehype-mermaidjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.