Mermaid Image Generator
Convert Mermaid diagram syntax to PNG/SVG images using the mermaid.ink online rendering API. Zero dependencies - uses only Node.js built-in modules and curl.
Quick Start
CODEBLOCK0
When to Use This Skill
Use this skill when:
- - User asks to "draw a diagram", "create a flowchart", "make a visual"
- User needs diagram images for PPTs, documentation, or presentations
- User wants to convert Mermaid code to shareable image files
- Local Mermaid CLI (mmdc) is unavailable or has dependency issues
Script Usage
Basic Conversion
CODEBLOCK1
Input options:
- - File path: INLINECODE0
- Stdin:
- (pipe Mermaid code directly)
Output format: Determined by file extension (.png or .svg)
Examples
Example 1: Convert file to PNG
CODEBLOCK2
Example 2: Pipe from stdin
CODEBLOCK3
Example 3: Generate SVG for web
CODEBLOCK4
Mermaid Diagram Types
This skill supports all Mermaid diagram types:
| Type | Use Case |
|---|
| INLINECODE4 | Processes, algorithms, user journeys |
| INLINECODE5 |
API flows, interactions over time |
|
classDiagram | OOP design, domain models |
|
erDiagram | Database schemas |
|
stateDiagram | State machines |
|
gantt | Project timelines |
|
pie | Proportional data |
|
gitGraph | Git branching strategies |
Example Mermaid Code
Flowchart
CODEBLOCK5
Sequence Diagram
CODEBLOCK6
Class Diagram
CODEBLOCK7
API Details
Service: mermaid.ink
Endpoints:
- - PNG: INLINECODE12
- SVG: INLINECODE13
Advantages:
- - ✅ No local dependencies (no Chrome/Puppeteer needed)
- ✅ Free and fast
- ✅ Returns high-quality PNG/SVG
- ✅ Works in headless environments
Limitations:
- - Requires internet connection
- Diagram code is sent to external service (don't use for sensitive data)
Error Handling
The script handles common errors:
CODEBLOCK8
Troubleshooting:
- 1. Check internet connectivity
- Verify Mermaid syntax at https://mermaid.live
- Ensure output directory exists (script creates it automatically)
Integration Pattern
When creating diagrams for users:
- 1. Write Mermaid code → Save to
.mmd file or use stdin - Run conversion script → Generate PNG/SVG
- Send/deliver image → Attach to response or save to specified location
Example workflow:
CODEBLOCK9
Best Practices
- 1. Keep diagrams simple - Under 15 nodes for readability
- Use meaningful labels - Self-documenting diagrams
- Test syntax first - Validate at mermaid.live before converting
- Choose format wisely - PNG for PPTs, SVG for web/docs
- Add comments - Use
%% for in-diagram documentation
Security Notes
- - Diagram code is sent to mermaid.ink API
- Do not include sensitive information in diagrams
- For sensitive data, use local Mermaid CLI instead
Mermaid 图像生成器
使用 mermaid.ink 在线渲染 API 将 Mermaid 图表语法转换为 PNG/SVG 图像。零依赖 - 仅使用 Node.js 内置模块和 curl。
快速开始
bash
从 .mmd 文件
node scripts/mermaid-to-image.js diagram.mmd output.png
从标准输入
echo flowchart LR; A --> B | node scripts/mermaid-to-image.js - output.png
生成 SVG 格式
node scripts/mermaid-to-image.js diagram.mmd output.svg
何时使用此技能
在以下情况下使用此技能：
- - 用户要求画图、创建流程图、制作可视化内容
- 用户需要为 PPT、文档或演示文稿生成图表图像
- 用户希望将 Mermaid 代码转换为可分享的图像文件
- 本地 Mermaid CLI (mmdc) 不可用或存在依赖问题
脚本用法
基本转换
bash
node scripts/mermaid-to-image.js <输入> <输出>
输入选项：
- - 文件路径：diagram.mmd
- 标准输入：-（直接管道输入 Mermaid 代码）
输出格式： 由文件扩展名决定（.png 或 .svg）
示例
示例 1：将文件转换为 PNG
bash
node scripts/mermaid-to-image.js flowchart.mmd flowchart.png
示例 2：从标准输入管道输入
bash
cat <
sequenceDiagram
Alice->>Bob: Hello
Bob-->>Alice: Hi
EOF
示例 3：生成用于网页的 SVG
bash
node scripts/mermaid-to-image.js architecture.mmd architecture.svg
Mermaid 图表类型
此技能支持所有 Mermaid 图表类型：
| 类型 | 使用场景 |
|---|
| flowchart | 流程、算法、用户旅程 |
| sequenceDiagram |
API 流程、时间交互 |
| classDiagram | 面向对象设计、领域模型 |
| erDiagram | 数据库架构 |
| stateDiagram | 状态机 |
| gantt | 项目时间线 |
| pie | 比例数据 |
| gitGraph | Git 分支策略 |
Mermaid 代码示例
流程图
mermaid
flowchart LR
A[开始] --> B{决策}
B -->|是| C[操作 1]
B -->|否| D[操作 2]
C --> E[结束]
D --> E
序列图
mermaid
sequenceDiagram
participant 用户
participant API
participant 数据库
用户->>API: POST /login
API->>数据库: 查询
数据库-->>API: 结果
API-->>用户: 响应
类图
mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal: +int age
Animal: +String gender
Animal: +isMammal()
API 详情
服务： mermaid.ink
端点：
- - PNG：https://mermaid.ink/img/{base64code}
- SVG：https://mermaid.ink/svg/{base64code}
优势：
- - ✅ 无本地依赖（无需 Chrome/Puppeteer）
- ✅ 免费且快速
- ✅ 返回高质量 PNG/SVG
- ✅ 可在无头环境中运行
限制：
- - 需要网络连接
- 图表代码会发送到外部服务（请勿用于敏感数据）
错误处理
脚本处理常见错误：
❌ 文件未找到：diagram.mmd
❌ API 请求失败：400 Bad Request
❌ 无法连接到 mermaid.ink：连接超时
故障排除：
- 1. 检查网络连接
- 在 https://mermaid.live 验证 Mermaid 语法
- 确保输出目录存在（脚本会自动创建）
集成模式
为用户创建图表时：
- 1. 编写 Mermaid 代码 → 保存到 .mmd 文件或使用标准输入
- 运行转换脚本 → 生成 PNG/SVG
- 发送/交付图像 → 附加到响应或保存到指定位置
示例工作流程：
bash
1. 创建图表
cat > openclaw-flow.mmd <
flowchart LR
User --> OpenClaw
OpenClaw --> Tools
EOF
2. 转换为图像
node scripts/mermaid-to-image.js openclaw-flow.mmd openclaw-flow.png
3. 使用图像（通过消息发送、保存等）
最佳实践
- 1. 保持图表简洁 - 节点不超过 15 个以保证可读性
- 使用有意义的标签 - 图表应能自我说明
- 先测试语法 - 在 mermaid.live 验证后再转换
- 明智选择格式 - PPT 用 PNG，网页/文档用 SVG
- 添加注释 - 使用 %% 进行图表内文档说明
安全说明
- - 图表代码会发送到 mermaid.ink API
- 请勿在图表中包含敏感信息
- 对于敏感数据，请改用本地 Mermaid CLI
