mermaid-to-image

将 Mermaid 图表直接转为图片（PNG / SVG），无中间产物。

安装

npm install mermaid-to-image

或使用 npx 运行（无需安装）：

npx mermaid-to-image -i diagram.mmd -o diagram.png

运行参数：

| 参数 | 说明 | |------|------| | -i, --input <文件> | Mermaid 源文件路径 | | -o, --output <文件> | 输出图片路径（默认根据输入文件名推断） | | -f, --format <格式> | 输出格式：png | svg（默认：png） | | --no-beautify | 禁用美化 | | -h, --help | 显示帮助 |

示例：

# 从文件转换
npx mermaid-to-image -i diagram.mmd -o diagram.png
npx mermaid-to-image -i diagram.mmd -o out.svg -f svg

# 从 stdin 传入
cat diagram.mmd | npx mermaid-to-image -o diagram.png

API 使用

import { mermaidToImage, closeBrowser } from 'mermaid-to-image';

const mermaidCode = `flowchart TD
    A[Start] -->|Yes| B[End]`;

// PNG 格式
const pngBuffer = await mermaidToImage(mermaidCode, { format: 'png' });

// SVG 格式
const svgBuffer = await mermaidToImage(mermaidCode, { format: 'svg' });

// 批量转换
const buffers = await mermaidToImage([code1, code2], { format: 'png' });

await closeBrowser();

运行测试

npm test

颜色与美化

• 第三方库：@excalidraw/mermaid-to-image 支持通过 themeVariables 传色给 Mermaid（如 primaryColor、secondaryColor 等）
• 兜底美化：当库未返回颜色时，本工具会按节点索引轮换填充色（蓝/绿/橙/粉/紫），箭头与文字使用统一配色

技术方案

• Puppeteer — 浏览器引擎
• @excalidraw/mermaid-to-image — Mermaid → Excalidraw skeleton
• @excalidraw/utils — Excalidraw → SVG，再经 Puppeteer 截图得 PNG

支持的图表类型

主要支持 flowchart（流程图），包括矩形、圆角、圆形、菱形节点及带标签的连接线。

故障排查

若出现 Protocol error (Target.createTarget): Failed to open new tab：

1. 使用系统 Chrome：设置环境变量指向已安装的 Chrome：

   # Windows (PowerShell)
   $env:PUPPETEER_EXECUTABLE_PATH = "C:\Program Files\Google\Chrome\Application\chrome.exe"
   npx mermaid-to-image -i diagram.mmd -o diagram.png
   
   # Linux/macOS
   export PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome
   npx mermaid-to-image -i diagram.mmd -o diagram.png

2. 确保 Chrome 已安装：Puppeteer 会下载 Chromium，若网络受限可手动安装 Chrome 后使用上述环境变量。

3. Windows 控制台乱码：在 PowerShell 中执行 chcp 65001 切换为 UTF-8 编码。