@md-plugins/md-plugin-mermaid

@md-plugins/md-plugin-mermaid

A Markdown-It plugin that renders Mermaid fenced code blocks. It is designed for Q-Press and Vue-based Markdown pages, while still allowing plain MarkdownIt users to render Mermaid-compatible <pre> blocks.

Features

• Converts mermaid and mmd fenced code blocks into a configurable component.
• Passes fence class metadata through to the rendered component or <pre> element.
• Adds page import statements for Q-Press generated Vue pages.
• Supports a plain <pre class="mermaid"> render mode for custom MarkdownIt pipelines.

Installation

Install the plugin via your preferred package manager:

# with pnpm:
pnpm add @md-plugins/md-plugin-mermaid
# with bun:
bun add @md-plugins/md-plugin-mermaid
# with Yarn:
yarn add @md-plugins/md-plugin-mermaid
# with npm:
npm install @md-plugins/md-plugin-mermaid

If you render Mermaid in the browser, install Mermaid in the consuming app:

pnpm add mermaid

Usage

Q-Press or Vue Component Mode

import MarkdownIt from 'markdown-it'
import { mermaidPlugin } from '@md-plugins/md-plugin-mermaid'

const md = new MarkdownIt()
md.use(mermaidPlugin, {
  componentName: 'MarkdownMermaid',
})

Raw MarkdownIt Mode

import MarkdownIt from 'markdown-it'
import { mermaidPlugin } from '@md-plugins/md-plugin-mermaid'

const md = new MarkdownIt()
md.use(mermaidPlugin, {
  renderMode: 'pre',
})

Then initialize Mermaid in your application after the HTML is mounted.

Markdown

```mermaid
graph TD
  A[Write Markdown] --> B[Render Diagram]
```

Use Markdown fence classes when a diagram needs responsive presentation or custom styling:

```mermaid {.desktop-diagram}
flowchart LR
  A --> B
```

```mermaid {.mobile-diagram}
flowchart TD
  A --> B
```

Options

Support

If md-plugin-mermaid is useful in your workflow and you want to support ongoing maintenance:

• GitHub Sponsors: https://github.com/sponsors/hawkeye64
• PayPal: https://paypal.me/hawkeye64

License

This project is licensed under the MIT License. See the LICENSE file for details.