Md2DocxVersion 1.3.0
Overview
Updated 5 min ago
@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 powered by beautiful-mermaid (zero DOM / browser dependencies).
📦 Installation
$ pnpm add @m2d/mermaid @m2d/image @m2d/core docxor
$ npm install @m2d/mermaid @m2d/image @m2d/core docx🚀 Quick Start
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
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: Comprehensive list of supported diagram types and custom theme configurations.
- 🛠️ Auto-Fixing & Diagram Fallbacks Guide: Built-in syntax healing and graceful Word code block fallbacks.
License
This library is licensed under the MIT open-source license.
with 💖 by Mayank Kumar Chaudhari