remcohaszing / remark-mermaidjs

A remark plugin to render mermaid diagrams using playwright
MIT License
70 stars 7 forks source link
javascript mermaid remark typescript unified

remark-mermaidjs

github actions codecov npm version npm downloads

A remark plugin to render mermaid diagrams using playwright.

[!IMPORTANT]

Use cases for this package are rare. You should probably use rehype-mermaid instead.

Table of Contents

Installation

npm install remark-mermaidjs

Outside of browsers remark-mermaidjs uses Playwright. If you use this outside of a browser, you need to install Playwright and a Playwright browser.

npm install playwright
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:

launchOptions

The options used to launch the browser. (object)

mermaidConfig

The mermaid config to use.

Note: This config 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

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.

License

MIT © Remco Haszing