@speajus/markdown-to-pdf 1.0.17 → 1.0.19

package/README.md

@@ -14,6 +14,7 @@ A lightweight TypeScript library that converts Markdown files into styled PDF do
 - **Tables** with header row highlighting and cell borders
 - **Links** rendered as clickable PDF hyperlinks
 - **Images** — local (PNG, JPEG) and remote (HTTP/HTTPS) with automatic SVG-to-PNG conversion via [@resvg/resvg-js](https://github.com/nicolo-ribaudo/resvg-js)
+- **Mermaid diagrams** — render `mermaid` fenced code blocks as diagrams (flowchart, sequence, class, state, ER, gantt, pie, mindmap) via [@speajus/mermaid-to-svg](https://github.com/speajus/mermaid-to-svg)
 - **Horizontal rules**
 - **Automatic page breaks** when content exceeds the current page
 - **Fully themeable** — customize fonts, colors, spacing, page size, and margins
@@ -92,6 +93,50 @@ interface PdfOptions {
 }
 ```
 
+### Mermaid Diagrams
+
+Fenced code blocks with the language `mermaid` are automatically rendered as diagrams:
+
+````markdown
+```mermaid
+flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Process A]
+    B -->|No| D[Process B]
+    C --> E[End]
+    D --> E
+```
+````
+
+Mermaid theme colors are integrated with the PDF theme. Each built-in theme includes matching mermaid colors. You can also customize them:
+
+```typescript
+await generatePdf(markdown, {
+  theme: {
+    ...defaultTheme,
+    // Use a built-in mermaid theme
+    mermaid: 'forest', // 'default' | 'dark' | 'forest' | 'neutral'
+  },
+});
+
+// Or provide custom mermaid colors
+await generatePdf(markdown, {
+  theme: {
+    ...defaultTheme,
+    mermaid: {
+      background: '#ffffff',
+      primaryColor: '#4a90d9',
+      secondaryColor: '#b8d4f0',
+      lineColor: '#333333',
+      primaryTextColor: '#1a1a1a',
+      borderColor: '#4a90d9',
+    },
+  },
+});
+```
+
+Supported diagram types: flowchart, sequence, class, state, ER, gantt, pie, and mindmap.
+
 ### Page Layout
 
 ```typescript
@@ -138,19 +183,23 @@ The full `ThemeConfig` interface exposes styles for:
 | table | Header background, border color, cell padding, and zebra color |
 | linkColor | Color for hyperlink text |
 | horizontalRuleColor | Color for --- dividers |
+| mermaid | Diagram colors: primary, secondary, text, line, border, background |
 
 ## Project Structure
 
 ```
 ├── src/
-│   ├── index.ts      # Public API — generatePdf, renderMarkdownToPdf, exports
-│   ├── cli.ts        # Command-line entry point
-│   ├── renderer.ts   # Markdown-to-PDF rendering engine
-│   ├── styles.ts     # Default theme and page layout
-│   └── types.ts      # TypeScript interfaces for options and theming
+│   ├── index.ts              # Public API — generatePdf, renderMarkdownToPdf, exports
+│   ├── cli.ts                # Command-line entry point
+│   ├── renderer.ts           # Markdown-to-PDF rendering engine
+│   ├── mermaid-renderer.ts   # Mermaid diagram → PNG rendering
+│   ├── styles.ts             # Default theme and page layout
+│   ├── themes/index.ts       # Built-in theme variants
+│   └── types.ts              # TypeScript interfaces for options and theming
 ├── samples/
 │   ├── generate.ts   # Script to batch-generate sample PDFs
 │   ├── sample.md     # Full-featured sample document
+│   ├── mermaid.md    # Mermaid diagram examples (all diagram types)
 │   ├── image.md      # Image rendering tests (local, remote, SVG, broken)
 │   ├── logo.svg      # Sample SVG image
 │   ├── logo.png      # Sample PNG image
@@ -167,6 +216,7 @@ The full `ThemeConfig` interface exposes styles for:
 | marked | Markdown parsing and tokenization |
 | pdfkit | PDF document generation |
 | @resvg/resvg-js | SVG-to-PNG rasterization for image embedding |
+| @speajus/mermaid-to-svg | Mermaid diagram rendering (parse → layout → SVG) |
 
 ## Scripts
 

package/dist/browser-image-renderer.js

@@ -96,6 +96,7 @@ function renderSvgToPng(svgBuffer) {
         img.src = url;
     });
 }
+defaults_js_1.DEFAULTS.renderSvg = (svg) => renderSvgToPng(Buffer.from(svg));
 function isSvg(buf) {
     const head = buf.subarray(0, 256).toString('utf-8').trimStart();
     return head.startsWith('<svg') || head.startsWith('<?xml');

package/dist/browser.d.ts

@@ -2,7 +2,7 @@
  * Browser-specific entry point that excludes Node.js dependencies
  */
 export { createBrowserImageRenderer } from "./browser-image-renderer.js";
-export type { TextStyle, PageLayout, CodeStyle, CodeBlockStyle, BlockquoteStyle, TableStyles, TokenColors, SyntaxHighlightTheme, SpacingConfig, ThemeConfig, PdfOptions, CustomFontDefinition, } from './types.js';
+export type { TextStyle, PageLayout, CodeStyle, CodeBlockStyle, BlockquoteStyle, TableStyles, TokenColors, SyntaxHighlightTheme, SpacingConfig, ThemeConfig, PdfOptions, CustomFontDefinition, MermaidThemeConfig, } from './types.js';
 export { defaultTheme, defaultPageLayout, defaultSyntaxHighlightTheme, defaultSpacing } from './styles.js';
 export { themes, modernTheme, academicTheme, minimalTheme, oceanTheme } from './themes/index.js';
 export { renderMarkdownToPdf } from "./renderer.js";

package/dist/defaults.d.ts

@@ -1,3 +1,8 @@
+export type SvgOptions = {
+    width?: number;
+    height?: number;
+};
 export declare const DEFAULTS: {
     renderImage: (basePath: string) => (imageUrl: string) => Promise<Buffer>;
+    renderSvg: (svg: string, options?: SvgOptions) => Promise<Buffer>;
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { TextStyle, PageLayout, CodeStyle, CodeBlockStyle, BlockquoteStyle, TableStyles, TokenColors, SyntaxHighlightTheme, SpacingConfig, ThemeConfig, PdfOptions, CustomFontDefinition, } from './types.js';
+export type { TextStyle, PageLayout, CodeStyle, CodeBlockStyle, BlockquoteStyle, TableStyles, TokenColors, SyntaxHighlightTheme, SpacingConfig, ThemeConfig, PdfOptions, CustomFontDefinition, MermaidThemeConfig, } from './types.js';
 export { defaultTheme, defaultPageLayout, defaultSyntaxHighlightTheme, defaultSpacing } from './styles.js';
 export { renderMarkdownToPdf as generatePdf, renderMarkdownToPdf, } from "./renderer.js";
 export { createBrowserImageRenderer } from './browser-image-renderer.js';

package/dist/mermaid-renderer.d.ts

@@ -0,0 +1,13 @@
+import type { MermaidThemeConfig } from './types.js';
+/**
+ * Render a mermaid diagram string to a PNG buffer.
+ *
+ * Uses `@speajus/mermaid-to-svg` to produce SVG, then `@resvg/resvg-js` to
+ * rasterise to PNG so PDFKit can embed it.
+ */
+export declare function renderMermaidToPng(mermaidCode: string, themeConfig?: MermaidThemeConfig | 'default' | 'dark' | 'forest' | 'neutral'): Promise<Buffer>;
+/**
+ * Call this once when you are done rendering all mermaid diagrams to
+ * release the jsdom window that `@speajus/mermaid-to-svg` creates internally.
+ */
+export declare function cleanupMermaid(): Promise<void>;

package/dist/mermaid-renderer.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMermaidToPng = renderMermaidToPng;
+exports.cleanupMermaid = cleanupMermaid;
+const defaults_js_1 = require("./defaults.js");
+let mermaidModule = null;
+async function loadMermaid() {
+    if (!mermaidModule) {
+        mermaidModule = await import('@speajus/mermaid-to-svg');
+    }
+    return mermaidModule;
+}
+/**
+ * Resolve a mermaid theme config (string name or partial object) into
+ * a `Theme` object from `@speajus/mermaid-to-svg`.
+ */
+function resolveTheme(mermaidMod, config) {
+    if (!config || config === 'default')
+        return mermaidMod.defaultTheme;
+    if (config === 'dark')
+        return mermaidMod.darkTheme;
+    if (config === 'forest')
+        return mermaidMod.forestTheme;
+    if (config === 'neutral')
+        return mermaidMod.neutralTheme;
+    // Custom partial config — merge onto default
+    return mermaidMod.createTheme(config);
+}
+/**
+ * Render a mermaid diagram string to a PNG buffer.
+ *
+ * Uses `@speajus/mermaid-to-svg` to produce SVG, then `@resvg/resvg-js` to
+ * rasterise to PNG so PDFKit can embed it.
+ */
+async function renderMermaidToPng(mermaidCode, themeConfig) {
+    const mod = await loadMermaid();
+    const theme = resolveTheme(mod, themeConfig);
+    const result = await mod.renderMermaid(mermaidCode, { theme });
+    // Convert SVG → PNG via resvg
+    return defaults_js_1.DEFAULTS.renderSvg(result.svg);
+}
+/**
+ * Call this once when you are done rendering all mermaid diagrams to
+ * release the jsdom window that `@speajus/mermaid-to-svg` creates internally.
+ */
+async function cleanupMermaid() {
+    if (mermaidModule) {
+        mermaidModule.cleanup();
+    }
+}

package/dist/node-image-renderer.js

@@ -15,8 +15,8 @@ function isSvg(buf) {
     const head = buf.subarray(0, 256).toString('utf-8').trimStart();
     return head.startsWith('<svg') || head.startsWith('<?xml');
 }
-function convertSvgToPng(svgData) {
-    const resvg = new resvg_js_1.Resvg(svgData, { font: { loadSystemFonts: true } });
+function convertSvgToPng(svgData, options) {
+    const resvg = new resvg_js_1.Resvg(svgData, { font: { loadSystemFonts: true }, ...options });
     const rendered = resvg.render();
     return Buffer.from(rendered.asPng());
 }
@@ -60,7 +60,7 @@ function fetchImageBuffer(url, redirectCount = 0) {
  * @returns A function that takes an image URL/path and returns a Buffer
  */
 function createNodeImageRenderer(basePath = process.cwd()) {
-    return async (imageUrl) => {
+    return async (imageUrl, options) => {
         let imgBuffer;
         if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
             // Remote image - fetch via HTTP/HTTPS
@@ -73,9 +73,10 @@ function createNodeImageRenderer(basePath = process.cwd()) {
         }
         // Convert SVG to PNG since pdfkit doesn't support SVG natively
         if (isSvg(imgBuffer)) {
-            imgBuffer = convertSvgToPng(imgBuffer);
+            imgBuffer = convertSvgToPng(imgBuffer, options);
         }
         return imgBuffer;
     };
 }
 defaults_1.DEFAULTS.renderImage = createNodeImageRenderer;
+defaults_1.DEFAULTS.renderSvg = async (svg) => convertSvgToPng(Buffer.from(svg));

package/dist/renderer.js

@@ -537,7 +537,9 @@ async function renderMarkdownToPdf(markdown, options) {
         const zebraColor = theme.table.zebraColor ?? '#f9f9f9';
         for (let r = 0; r < table.rows.length; r++) {
             const row = table.rows[r];
+            doc.y = y; // sync doc.y BEFORE ensureSpace check
             ensureSpace(rowH);
+            y = doc.y; // re-sync AFTER possible page break
             // Zebra stripe: fill even rows (0-indexed, so odd visual rows) with a tinted background
             if (zebraStripes && r % 2 === 1) {
                 doc.save();
@@ -608,6 +610,39 @@ async function renderMarkdownToPdf(markdown, options) {
             case 'code': {
                 const t = token;
                 const cs = theme.code.block;
+                // ── Mermaid diagrams ──────────────────────────────────────────────
+                if (t.lang === 'mermaid') {
+                    try {
+                        const mermaidTheme = theme.mermaid;
+                        const { renderMermaidToPng } = await import('./mermaid-renderer.js');
+                        const pngBuf = await renderMermaidToPng(t.text, mermaidTheme);
+                        const img = doc.openImage(pngBuf);
+                        const maxHeight = doc.page.height - margins.top - margins.bottom;
+                        let displayWidth = Math.min(img.width, contentWidth);
+                        let displayHeight = img.height * (displayWidth / img.width);
+                        if (displayHeight > maxHeight) {
+                            displayHeight = maxHeight;
+                            displayWidth = img.width * (displayHeight / img.height);
+                        }
+                        ensureSpace(displayHeight + 10);
+                        const imgX = theme.imageAlign === 'center'
+                            ? margins.left + (contentWidth - displayWidth) / 2
+                            : doc.x;
+                        const imgY = doc.y;
+                        doc.image(pngBuf, imgX, imgY, { width: displayWidth, height: displayHeight });
+                        // Advance past the image — doc.image() does not move doc.y
+                        doc.y = imgY + displayHeight;
+                        doc.moveDown(0.5);
+                    }
+                    catch (err) {
+                        // Fallback: render as plain code block on error
+                        ensureSpace(20);
+                        resetBodyFont();
+                        doc.text(`[Mermaid diagram error: ${err.message}]`);
+                        doc.moveDown(0.3);
+                    }
+                    break;
+                }
                 // Use syntax highlighting when a language is specified and highlighting is enabled
                 if (syntaxHighlight && t.lang) {
                     const lines = t.text.split('\n');
@@ -741,6 +776,14 @@ async function renderMarkdownToPdf(markdown, options) {
     for (const token of tokens) {
         await renderToken(token);
     }
+    // Clean up mermaid jsdom window if it was used
+    try {
+        const { cleanupMermaid } = await import('./mermaid-renderer.js');
+        await cleanupMermaid();
+    }
+    catch {
+        // mermaid-renderer may not be available in browser builds
+    }
     doc.end();
     return new Promise((resolve) => {
         stream.on('end', () => resolve(Buffer.concat(chunks)));

package/dist/styles.js

@@ -95,6 +95,7 @@ exports.defaultTheme = {
     spacing: { ...exports.defaultSpacing },
     imageAlign: 'left',
     emojiFont: 'twemoji',
+    mermaid: 'default',
 };
 exports.defaultPageLayout = {
     pageSize: 'LETTER',

package/dist/themes/index.js

@@ -42,6 +42,16 @@ exports.modernTheme = {
     spacing: { ...styles_js_1.defaultSpacing },
     imageAlign: 'left',
     emojiFont: 'twemoji',
+    mermaid: {
+        background: '#ffffff',
+        primaryColor: '#0d7377',
+        secondaryColor: '#b2dfdb',
+        tertiaryColor: '#e0f2f1',
+        primaryTextColor: '#2d3436',
+        secondaryTextColor: '#636e72',
+        lineColor: '#0984e3',
+        borderColor: '#14919b',
+    },
 };
 /** Academic — serif fonts, formal look inspired by LaTeX */
 exports.academicTheme = {
@@ -81,6 +91,16 @@ exports.academicTheme = {
     spacing: { ...styles_js_1.defaultSpacing },
     imageAlign: 'left',
     emojiFont: 'twemoji',
+    mermaid: {
+        background: '#ffffff',
+        primaryColor: '#eaecee',
+        secondaryColor: '#d5dbdb',
+        tertiaryColor: '#f2f3f4',
+        primaryTextColor: '#1a1a2e',
+        secondaryTextColor: '#7f8c8d',
+        lineColor: '#2e4057',
+        borderColor: '#6c3483',
+    },
 };
 /** Minimal — lots of whitespace, muted greys */
 exports.minimalTheme = {
@@ -120,6 +140,7 @@ exports.minimalTheme = {
     spacing: { ...styles_js_1.defaultSpacing },
     imageAlign: 'left',
     emojiFont: 'twemoji',
+    mermaid: 'neutral',
 };
 /** Ocean — deep blue palette */
 exports.oceanTheme = {
@@ -159,6 +180,16 @@ exports.oceanTheme = {
     spacing: { ...styles_js_1.defaultSpacing },
     imageAlign: 'left',
     emojiFont: 'twemoji',
+    mermaid: {
+        background: '#ffffff',
+        primaryColor: '#d4e6f1',
+        secondaryColor: '#aed6f1',
+        tertiaryColor: '#eaf2f8',
+        primaryTextColor: '#1b2631',
+        secondaryTextColor: '#5d6d7e',
+        lineColor: '#2471a3',
+        borderColor: '#2980b9',
+    },
 };
 /** Record of all built-in themes keyed by display name */
 exports.themes = {

package/dist/types.d.ts

@@ -96,6 +96,42 @@ export interface ThemeConfig {
      * - `'none'` — disable emoji font; emoji render with the body font.
      */
     emojiFont?: 'twemoji' | 'openmoji' | 'noto' | 'none';
+    /**
+     * Mermaid diagram theme configuration.
+     *
+     * Controls how mermaid fenced code blocks are rendered as diagrams in the PDF.
+     * - `'default'` | `'dark'` | `'forest'` | `'neutral'` — use a built-in mermaid theme.
+     * - A `MermaidThemeConfig` object — provide custom colors for the diagram.
+     * - `undefined` — uses `'default'`.
+     */
+    mermaid?: MermaidThemeConfig | 'default' | 'dark' | 'forest' | 'neutral';
+}
+/**
+ * Custom mermaid diagram theme colors.
+ *
+ * Maps to the `Theme` interface from `@speajus/mermaid-to-svg`.
+ */
+export interface MermaidThemeConfig {
+    /** Diagram background color */
+    background?: string;
+    /** Primary node fill color */
+    primaryColor?: string;
+    /** Secondary node fill color */
+    secondaryColor?: string;
+    /** Tertiary node fill color */
+    tertiaryColor?: string;
+    /** Primary text color */
+    primaryTextColor?: string;
+    /** Secondary text color */
+    secondaryTextColor?: string;
+    /** Line / arrow color */
+    lineColor?: string;
+    /** Node border color */
+    borderColor?: string;
+    /** Font family for diagram labels */
+    fontFamily?: string;
+    /** Base font size */
+    fontSize?: number;
 }
 /**
  * A custom font definition providing font data for registration with PDFKit.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@speajus/markdown-to-pdf",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "A new project created with Intent by Augment.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,6 +51,7 @@
   "type": "commonjs",
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
+    "@speajus/mermaid-to-svg": "^0.1.5",
     "marked": "^17.0.2",
     "pdfkit": "github:jspears/pdfkit#support-color-emoji-google",
     "prismjs": "^1.30.0"
@@ -68,5 +69,6 @@
     "overrides": {
       "canvas": "^3.2.1"
     }
-  }
+  },
+  "packageManager": "pnpm@9.2.0+sha512.98a80fd11c2e7096747762304106432b3ddc67dcf54b5a8c01c93f68a2cd5e05e6821849522a06fb76284d41a2660d5e334f2ee3bbf29183bf2e739b1dafa771"
 }