Mermaid CLI Image Export Skill
Professional image export skill for Mermaid diagrams using mermaid-cli. Converts Mermaid code into high-quality PNG, SVG, and PDF images suitable for documentation, presentations, and print materials.
Quick Start
Prerequisites
CODEBLOCK0
Installation Check
CODEBLOCK1
Basic Usage
Export a Mermaid diagram to PNG:
CODEBLOCK2
Export to SVG:
CODEBLOCK3
Batch export multiple files:
CODEBLOCK4
Core Features
Supported Formats
- - PNG: Raster image, ideal for web and documents
- SVG: Vector image, scalable without quality loss
- PDF: Document format for printing and sharing
Quality Controls
- - Resolution scaling (
--scale) - Background color (
--background) - Width and height constraints (
--width, --height) - Custom CSS styling (
--css)
Theme Support
- - All Mermaid built-in themes:
default, forest, dark, INLINECODE8 - Custom theme configuration (
--config) - Dark/light mode switching
Batch Processing
- - Export multiple diagrams at once
- Progress tracking and error handling
- Consistent settings across all exports
Workflow
1. Environment Setup
Ensure Node.js and mermaid-cli are installed:
CODEBLOCK5
2. Diagram Creation
Create Mermaid diagrams using standard syntax.
3. Image Export
Use appropriate format based on needs:
- - Web/Docs: PNG or SVG
- Print: PDF or high-resolution PNG
- Development: Quick PNG previews
4. Integration
Embed exported images in:
- - README documentation
- Presentation slides
- Technical papers
- API documentation
- Blog posts
Comparison with Termaid
| Feature | Termaid | Mermaid-CLI Export |
|---|
| Output | ASCII terminal | PNG/SVG/PDF images |
| Dependencies |
Pure Python | Node.js + Puppeteer |
|
Use Case | Terminal preview | Professional export |
|
Quality | Terminal-friendly | Print-ready |
|
Speed | Instant | Requires browser |
Advanced Usage
Custom Configuration
CODEBLOCK6
Automation
CODEBLOCK7
Troubleshooting
Common Issues
- 1. Node.js not installed: Install Node.js from nodejs.org
- mermaid-cli not found: Run INLINECODE10
- Browser errors: Ensure Chrome/Chromium is installed
- Memory issues: Reduce image size or resolution
Performance Tips
- - Use lower resolution for quick previews
- Cache frequently used diagrams
- Batch process multiple diagrams
- Consider using SVG for scalability
Examples
See assets/examples/ for complete examples:
- - Basic export workflow
- Configuration examples
- Template diagrams
References
Complete documentation in references/:
- -
overview.md: Skill overview - INLINECODE14 : Installation guide
- INLINECODE15 : Usage instructions
- INLINECODE16 : Format specifications
- INLINECODE17 : Problem solving
Note: This skill requires Node.js and mermaid-cli installation. For terminal-only rendering without dependencies, use the
termaid skill.
Mermaid CLI 图像导出技能
使用 mermaid-cli 的专业图像导出技能。将 Mermaid 代码转换为高质量的 PNG、SVG 和 PDF 图像，适用于文档、演示文稿和印刷材料。
快速开始
前置条件
bash
检查 Node.js 是否已安装
node --version
检查 npm 是否已安装
npm --version
安装检查
bash
python scripts/install
mermaidcli.py --check
基本用法
将 Mermaid 图表导出为 PNG：
bash
python scripts/export
mermaidimage.py diagram.mmd -o output.png
导出为 SVG：
bash
python scripts/exportmermaidimage.py diagram.mmd -f svg -o diagram.svg
批量导出多个文件：
bash
python scripts/exportmermaidimage.py *.mmd -d outputs/
核心功能
支持的格式
- - PNG：光栅图像，适用于网页和文档
- SVG：矢量图像，可无损缩放
- PDF：用于打印和分享的文档格式
质量控制
- - 分辨率缩放（--scale）
- 背景颜色（--background）
- 宽度和高度限制（--width、--height）
- 自定义 CSS 样式（--css）
主题支持
- - 所有 Mermaid 内置主题：default、forest、dark、neutral
- 自定义主题配置（--config）
- 深色/浅色模式切换
批量处理
- - 一次性导出多个图表
- 进度跟踪和错误处理
- 所有导出使用一致的设置
工作流程
1. 环境设置
确保已安装 Node.js 和 mermaid-cli：
bash
npm install -g @mermaid-js/mermaid-cli
2. 图表创建
使用标准语法创建 Mermaid 图表。
3. 图像导出
根据需求选择合适的格式：
- - 网页/文档：PNG 或 SVG
- 印刷：PDF 或高分辨率 PNG
- 开发：快速 PNG 预览
4. 集成
将导出的图像嵌入到：
- - README 文档
- 演示幻灯片
- 技术论文
- API 文档
- 博客文章
与 Termaid 的对比
| 功能 | Termaid | Mermaid-CLI 导出 |
|---|
| 输出 | ASCII 终端 | PNG/SVG/PDF 图像 |
| 依赖 |
纯 Python | Node.js + Puppeteer |
|
用例 | 终端预览 | 专业导出 |
|
质量 | 终端友好 | 可印刷 |
|
速度 | 即时 | 需要浏览器 |
高级用法
自定义配置
bash
自定义 CSS
python scripts/export
mermaidimage.py diagram.mmd --css custom.css -o output.png
特定主题
python scripts/export
mermaidimage.py diagram.mmd -t dark -o output.png
高分辨率
python scripts/export
mermaidimage.py diagram.mmd --scale 2.0 -o output.png
自动化
bash
CI/CD 集成
python scripts/export
mermaidimage.py docs/*.mmd -d generated/
文档生成
find . -name *.mmd -exec python scripts/export
mermaidimage.py {} -o images/{}.png \;
故障排除
常见问题
- 1. Node.js 未安装：从 nodejs.org 安装 Node.js
- 找不到 mermaid-cli：运行 npm install -g @mermaid-js/mermaid-cli
- 浏览器错误：确保已安装 Chrome/Chromium
- 内存问题：减小图像尺寸或分辨率
性能提示
- - 使用较低分辨率进行快速预览
- 缓存常用图表
- 批量处理多个图表
- 考虑使用 SVG 以获得可伸缩性
示例
查看 assets/examples/ 获取完整示例：
参考文档
references/ 中的完整文档：
- - overview.md：技能概述
- installation.md：安装指南
- usage.md：使用说明
- formats.md：格式规范
- troubleshooting.md：问题解决
注意：此技能需要安装 Node.js 和 mermaid-cli。如需仅终端渲染且无依赖，请使用 termaid 技能。
