Md2DocxVersion 0.1.0
Overview
Updated 5 min ago
@m2d/mermaid-node: Server-side Node.js Mermaid diagram plugin for @m2d/core using beautiful-mermaid with zero DOM dependencies.
✨ Features
- ⚡ Zero DOM / Headless Browser Dependencies: Powered by
beautiful-mermaidand ELK.js—renders vector SVGs in milliseconds without Chromium, Puppeteer, or JSDOM. - 🎨 Sharp & librsvg Color Inlining: Automatically resolves CSS variables and
color-mix()in sRGB to explicit hex colors, ensuring diagrams render in full theme colors rather than solid black insharp. - 🪟 Transparent Canvas Background: Defaults to
transparent: truematching client-side output for seamless blending onto document pages. - 📝 Sequence Diagram Auto-Normalization: Automatically fixes multi-word actor names in sequence diagrams to ensure they render reliably.
- 🌈 15+ Built-In Themes: Includes
zinc-light,github-light,tokyo-night,dracula,nord, and custom two-color/enriched palettes. - 💾 Persistent Caching: Caches diagram SVGs using
@m2d/core/cacheto eliminate repeated computation across requests.
💡 Looking for browser / client-side Mermaid rendering? Use @m2d/mermaid powered by official mermaid.js.
📦 Installation
$ pnpm add @m2d/mermaid-node @m2d/image-node @m2d/core docxor
$ npm install @m2d/mermaid-node @m2d/image-node @m2d/core docx🚀 Quick Start
import { toDocx } from "@m2d/core";
import { mermaidNodePlugin } from "@m2d/mermaid-node";
import { nodeImagePlugin } from "@m2d/image-node";
import remarkParse from "remark-parse";
import { unified } from "unified";
const markdown = `
# Backend Architecture
\`\`\`mermaid
graph TD
Client[Client Request] --> API[Node.js API]
API --> Database[(PostgreSQL)]
\`\`\`
`;
const mdast = unified().use(remarkParse).parse(markdown);
const docxBuffer = await toDocx(
mdast,
{ title: "Architecture Report" },
{
plugins: [
mermaidNodePlugin({ theme: "github-light" }), // 1. Generates SVG AST nodes
nodeImagePlugin(), // 2. Rasterizes SVGs into DOCX images
],
},
"buffer",
);⚠️ Plugin Ordering: Place mermaidNodePlugin() before nodeImagePlugin() in the plugins array.
⚙️ Plugin Options
export interface IMermaidNodePluginOptions {
/**
* Built-in theme name (e.g. 'zinc-light', 'github-light', 'dracula') or custom theme object.
* @default 'zinc-light'
*/
theme?: MermaidTheme;
/** Additional render options forwarded to beautiful-mermaid */
renderOptions?: Record<string, unknown>;
/** Optional custom fixer function to repair invalid Mermaid code */
fixMermaid?: (code: string, error: Error) => string;
/** In-memory cache object for sharing across instances */
cache?: Record<string, Promise<unknown>>;
/** Persistent cache configuration */
cacheConfig?: CacheConfigType;
}📚 Deep Dive Guides
- ⚡ Headless Node.js Rendering Guide: Zero-DOM architecture, sharp color inlining, transparent backgrounds, and sequence diagram normalizer.
- 🎨 Themes & Custom Palettes Guide: Using the 15 built-in themes and creating custom two-color or enriched palettes.
License
This library is licensed under the MIT open-source license.
with 💖 by Mayank Kumar Chaudhari