Mdi-mermaid NPM

mdi-mermaid

Mermaid plugin for markdown-it parser.

full Typescript support
latest versions of Mermaid
supports global and local configuration of graphs/visualizations
originally forked from markdown-it-mermaid which had grown stale but is now a fairly different code base

Installation

# pnpm
pnpm add -D mdi-mermaid
# yarn
yarn add -D mdi-mermaid
# npm
npm install --save-dev mdi-mermaid

Usage

import markdownIt from 'markdown-it'
import markdownItMermaid from 'markdown-it-mermaid'
const mdi = markdownIt()
mdi.use(markdownItMermaid)
mdi.render(`\`\`\`mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
\`\`\``)

Customize mermaid

mdi.mermaid.loadPreferences({
  get: key => {
    if (key === 'mermaid-theme') {
      return 'forest'
    } else if (key === 'gantt-axis-format') {
      return '%Y/%m/%d'
    } else {
      return undefined
    }
  }
})

You can loadPreferences from any preferences store as long as it supports the get method. For example, you can use js-cookie library as a preferences store. Or you can write your own preferences store to achieve more flexibility.

mdi.mermaid.loadPreferences not only applies the preferences, it also return the preferences loaded. Just in case you need to access the loaded preferences.

mdi.mermaid.loadPreferences could be invoked multiple times. And the preferences applied later will override ones applied earlier.