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

1# pnpm
2pnpm add -D mdi-mermaid
3# yarn
4yarn add -D mdi-mermaid
5# npm
6npm install --save-dev mdi-mermaid

Usage

1import markdownIt from 'markdown-it'
2import markdownItMermaid from 'markdown-it-mermaid'
3const mdi = markdownIt()
4mdi.use(markdownItMermaid)
5mdi.render(`\`\`\`mermaid
6graph TD
7    A[Christmas] -->|Get money| B(Go shopping)
8    B --> C{Let me think}
9    C -->|One| D[Laptop]
10    C -->|Two| E[iPhone]
11    C -->|Three| F[Car]
12\`\`\``)

Customize mermaid

1mdi.mermaid.loadPreferences({
2  get: key => {
3    if (key === 'mermaid-theme') {
4      return 'forest'
5    } else if (key === 'gantt-axis-format') {
6      return '%Y/%m/%d'
7    } else {
8      return undefined
9    }
10  }
11})

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.

Development

Build

yarn build:watch

Test

yarn test

Distribution

yarn release && npm publish

Todo

gantt-axis-format should support large date ranges