# @md2docx/mermaid

> Enhance Markdown-to-DOCX conversion with Mermaid and mindmap diagram support using this plugin for @m2d/core. Converts code blocks into SVG images with customizable Mermaid config.

Latest version **1.3.1** (published 2026-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @md2docx/mermaid
pnpm add @md2docx/mermaid
yarn add @md2docx/mermaid
bun add @md2docx/mermaid
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2026-10-22 |
| First published | 2025-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Mayank Kumar Chaudhari |
| Maintainers | mayank1513 |
| Keywords | mermaid, mindmap, markdown, mdast, mdast-to-docx, markdown-to-docx, md2docx, mdast2docx, docx, docx-generator, document-generation, document-conversion, svg-diagram, code-block, diagram-plugin, remark-plugin, unified-plugin, typescript, plugin, open-source, m2d, mayank1513 |

## Links

- npm: https://www.npmjs.com/package/@md2docx/mermaid
- Repository: https://github.com/md2docx/md2docx
- Homepage: https://github.com/md2docx/md2docx/blob/main/packages/mermaid/README.md
- Issues: https://github.com/md2docx/md2docx/issues
- Funding: https://github.com/sponsors/md2docx
- npm.io page: https://npm.io/package/@md2docx/mermaid

## Dependencies (1)

- [@m2d/mermaid](https://npm.io/package/@m2d/mermaid.md) 1.3.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.3.1 (latest) — 2026-10-22
- 1.2.2 — 2025-06-12
- 1.2.1 — 2025-06-12
- 1.2.0 — 2025-06-12
- 1.1.5 — 2025-06-06
- 1.1.4 — 2025-06-01
- 1.1.3 — 2025-05-31
- 1.1.2 — 2025-05-30
- 1.1.1 — 2025-05-30
- 1.1.0 — 2025-05-30
- 1.0.1 — 2025-05-19
- 1.0.0 — 2025-05-19
- 0.0.3 — 2025-04-12
- 0.0.2 — 2025-04-07
- 0.0.1 — 2025-04-07

## README

# @m2d/mermaid <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>

<p className="flex gap-2">
  <a href="https://github.com/md2docx/md2docx/actions/workflows/ci.yml" rel="noopener noreferrer">
    <img alt="CI" src="https://github.com/md2docx/md2docx/actions/workflows/ci.yml/badge.svg" />
  </a>
  <a href="https://codecov.io/gh/md2docx/md2docx/tree/main/packages/@m2d/mermaid" rel="noopener noreferrer">
    <img alt="codecov" src="https://codecov.io/gh/md2docx/md2docx/graph/badge.svg?flag=@m2d/mermaid" />
  </a> 
  <a href="https://npmjs.com/package/@m2d/mermaid" rel="noopener noreferrer">
    <img alt="npm version" src="https://img.shields.io/npm/v/@m2d/mermaid" />
  </a>
  <a href="https://npmjs.com/package/@m2d/mermaid" rel="noopener noreferrer">
    <img alt="npm downloads" src="https://img.shields.io/npm/d18m/@m2d/mermaid" />
  </a>
  <a href="https://npmjs.com/package/@m2d/mermaid" rel="noopener noreferrer">
    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@m2d/mermaid" />
  </a>
  <img alt="license" src="https://img.shields.io/npm/l/@m2d/mermaid" />
</p>

> @m2d/mermaid: Client-side Mermaid diagram plugin for `@m2d/core`. Transforms `mermaid`, `mmd`, and `mindmap` code blocks into responsive inline SVGs with auto-repair and caching.

---

## ✨ Features

- 📊 **Comprehensive Diagram Support**: Supports all standard Mermaid diagram types (flowcharts, sequence, class, state, ER, Gantt, pie, gitGraph, mindmaps, quadrant charts).
- 🛠️ **Built-In Self-Healing (`defaultMermaidFixer`)**: Automatically repairs common syntax errors such as unquoted colons, slashes, or special characters in node labels.
- 🎨 **Full Theme Customization**: Compatible with all official Mermaid themes (`default`, `neutral`, `forest`, `dark`, `base`) and custom theme variables.
- 💾 **IndexedDB & Memory Caching**: Eliminates expensive repeated diagram compilation across page reloads.
- 🛡️ **Graceful Fallbacks**: Preserves diagram source so downstream rasterizers (`@m2d/image`) can cleanly render collapsible code blocks if rendering fails.

> 💡 **Looking for server-side (Node.js) Mermaid rendering?** Use [`@m2d/mermaid-node`](https://npmjs.com/package/@m2d/mermaid-node) powered by `beautiful-mermaid` (zero DOM / browser dependencies).

---

## 📦 Installation


> [!TIP]
> **This package (@md2docx/mermaid) is an official alias of [@m2d/mermaid](https://npmjs.com/package/@m2d/mermaid).**

<details>
<summary>Why does this exist?</summary>

We provide this package to offer shorter import paths and improved discoverability. While both packages provide identical functionality, **@m2d/mermaid** is the primary source of truth.
</details>

<details>
<summary>Which one should I use?</summary>

* **Use @md2docx/mermaid** if you prefer the shorter name or specific branding or ESM Only.
* **Use @m2d/mermaid** for the most stable long-term reference and standard alignment.

| Feature | @m2d/mermaid | @md2docx/mermaid |
| --- | --- | --- |
| **Source Code** | ✅ Primary | 🔗 Proxy |
| **Updates** | Immediate | Synchronized (Immediately) |
| **Bundle Size** | 100% | 100% (Zero overhead) |
| **Format** | ESM + CJS | ESM Only |
| **Maintenance** | ✅ Primary | 🔗 Proxy (inherits) |
| **Security** | ✅ Primary | 🔗 Proxy (inherits) |

</details>

<details>
<summary>Maintenance & Support</summary>

> **Security:** Security audits are performed on the canonical package; this alias inherits all security patches automatically.
</details>

---



```bash
$ pnpm add @m2d/mermaid @m2d/image @m2d/core docx
```

**_or_**

```bash
$ npm install @m2d/mermaid @m2d/image @m2d/core docx
```

---

## 🚀 Quick Start

```typescript
import { toDocx } from "@m2d/core";
import { mermaidPlugin } from "@m2d/mermaid";
import { imagePlugin } from "@m2d/image";
import remarkParse from "remark-parse";
import { unified } from "unified";

const markdown = `
# Architecture Overview

\`\`\`mermaid
graph TD
  Client[Web Client] --> Gateway[API Gateway]
  Gateway --> Service[Core Service]
\`\`\`
`;

const mdast = unified().use(remarkParse).parse(markdown);

const docxBlob = await toDocx(mdast, {}, {
  plugins: [
    mermaidPlugin(), // 1. Converts mermaid code blocks into SVG nodes
    imagePlugin(),   // 2. Rasterizes SVGs into OpenXML DrawingML runs
  ],
});
```

> ⚠️ **Plugin Ordering**: Place `mermaidPlugin()` **before** `imagePlugin()` in the `plugins` array. `mermaidPlugin` generates the SVG nodes that `imagePlugin` subsequently compiles into Word images.

---

## ⚙️ Plugin Options

```typescript
export interface IMermaidPluginOptions {
  /** Mermaid configuration object passed to mermaid.initialize() */
  mermaidConfig?: MermaidConfig;

  /**
   * Optional custom fixer function called when initial rendering fails.
   * If omitted, uses the built-in defaultMermaidFixer.
   */
  fixMermaid?: (code: string, error: Error) => string;

  /** In-memory cache object for sharing across instances */
  cache?: Record<string, Promise<unknown>>;

  /** Duration in minutes before cached records expire (default: 30 days) */
  maxAgeMinutes?: number;
}
```

---

## 📚 Deep Dive Guides

- 📊 **[Diagram Syntax & Theming Guide](./docs/diagram-syntax-and-theming.mdx)**: Comprehensive list of supported diagram types and custom theme configurations.
- 🛠️ **[Auto-Fixing & Diagram Fallbacks Guide](./docs/auto-fixing-and-fallbacks.mdx)**: Built-in syntax healing and graceful Word code block fallbacks.

---

## License

This library is licensed under the MIT open-source license.

<hr />

<p align="center">with 💖 by <a href="https://mayankchaudhari.com" target="_blank">Mayank Kumar Chaudhari</a></p>

---
_Source: https://npm.io/package/@md2docx/mermaid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._