remark-mermaidjs v6.0.0
remark-mermaidjs
A remark plugin to render mermaid diagrams using playwright.
[!IMPORTANT]
Use cases for this package are rare. You should probably use
rehype-mermaidjs
instead.
Table of Contents
Installation
npm install remark-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.
Usage
This plugin takes all code blocks marked as mermaid
and renders them as an inline SVG.
import { readFile } from 'node:fs/promises'
import { remark } from 'remark'
import remarkMermaid from 'remark-mermaidjs'
const { value } = await remark()
.use(remarkMermaid, {
/* Options */
})
.process(await readFile('readme.md'))
console.log(value)
API
This package has a default export remarkMermaid
.
unified().use(remarkMermaid, options?)
browser
The Playwright browser to use. (object
, default: chromium)
css
A 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
)
errorFallback
Create 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:
node
: The mdastcode
node that couldn’t be rendered.error
: The error message that was thrown.file
: The file on which the error occurred.
launchOptions
The options used to launch the browser. (object
)
- Note: This options is required in Node.js. In the browser this option is unused.
mermaidOptions
The mermaid options to use.
Note: This options is only supported in Node.js. In the browser this option is unused. If you
use this in a browser, call mermaid.initialize()
manually.
prefix
A custom prefix to use for Mermaid IDs. (string
, default: mermaid
)
Compatibility
This project is compatible with Node.js 18 or greater.
Related Projects
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-mermaidjs
is a more powerful plugin that does the same, but as a rehype plugin.
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.