Project: aloisklink/remark-mermaid-dataurl

Package: remark-mermaid-dataurl@2.0.6

  1. Dependents: 0
  2. A remark plugin for Markdown that replaces mermaid graphs with dataurls
  1. remark-plugin 82


npm version badge license badge node version support badge npm type definitions badge

A remark markdown plugin that renders mermaid markdown code into SVG data URLs using mermaid-cli.


This plugin is designed for Markdown to Markdown conversions, where keeping everything in a single file is required. The following plugins are more efficient in the majority of cases:


Write your mermaid code in markdown using within code-blocks that start with ```mermaid, as in below:

Here is my **example** mermaid diagram in markdown:

    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

After running remark-mermaid-dataurl, the mermaid diagram within the ```mermaid code block will be rendered into an SVG file, then inserted into the markdown code as a dataurl (dataurl is truncated in the example, as they are quite large):

Here is my **example** mermaid diagram in markdown:

![Diagram generated via mermaid](data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22mermaid-1654...]


const options = {
  mermaidCli: {
    // args to pass as `--arg value` to mermaidCli (run `npx mmdc --help` to view)
    // passing configFile or puppeteerConfigFile as an object will automatically be converted into a JSON
    configFile: {
      // see mermaid options at https://mermaid-js.github.io/mermaid/#/Setup
      theme: "forest",
    puppeteerConfigFile: {
      // see options at https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#puppeteerlaunchoptions
      product: "firefox" // use firefox instead of chrome
      timeout: 60000, // change default puppeteer launch timeout

Usage with Docusaurus

see https://v2.docusaurus.io/docs/markdown-features#configuring-plugins for more info

First, install this plugin:

npm install --save remark-mermaid-dataurl

Then, add them to your @docusaurus/preset-classic options in docusaurus.config.js:

module.exports = {
  // ...
  presets: [
        docs: {
          // ...
          remarkPlugins: [
            // options, // optional options here

Afterwards, any ```markdown code blocks in your docusaurus docs folder should automatically be converted into SVGs data URLs when running npx docusaurus start or npx docusuarus serve.