mermaid-export

Export Mermaid diagrams to PNG/SVG/PDF images. Use when user asks to: (1) generate diagrams (flowchart, architecture, sequence, class, state, ER, gantt), (2) visualize processes or system designs, (3) convert Mermaid code to images, (4) create charts for documentation. Automatically saves to mermaid-export-outputs/ directory.

install

source · Clone the upstream repo

git clone https://github.com/alansong63/mermaid-export

Claude Code · Install into ~/.claude/skills/

git clone --depth=1 https://github.com/alansong63/mermaid-export ~/.claude/skills/alansong63-mermaid-export-mermaid-export

manifest: SKILL.md

source content

Mermaid Export

将 Mermaid 图表代码导出为高质量图片（PNG/SVG/PDF）。

输出目录

所有生成的图片统一保存在：

~/.openclaw/workspace/mermaid-export-outputs/

文件命名规则：

默认：
```
diagram-YYYYMMDD-HHMMSS.png
```
有主题：
```
{主题}-YYYYMMDD-HHMMSS.png
```
用户指定：
```
{用户指定名称}.png
```

使用方法

# 基础用法
bun ${SKILL_DIR}/scripts/main.ts --content "flowchart TB; A-->B"

# 指定输出格式
bun ${SKILL_DIR}/scripts/main.ts --content "..." --format svg

# 指定尺寸
bun ${SKILL_DIR}/scripts/main.ts --content "..." --width 3000 --height 4000

# 从文件读取
bun ${SKILL_DIR}/scripts/main.ts --file diagram.mmd

# 指定主题（用于文件名）
bun ${SKILL_DIR}/scripts/main.ts --content "..." --theme architecture

# 不自动发送到聊天
bun ${SKILL_DIR}/scripts/main.ts --content "..." --sendToChat false

选项

选项	短写	类型	默认值	说明
`--content`	`-c`	string	-	Mermaid 代码（必填，或用 --file）
`--file`	`-f`	string	-	Mermaid 文件路径
`--output`	`-o`	string	自动生成	输出文件路径
`--format`	`-F`	string	`png`	输出格式：png/svg/pdf
`--width`	`-W`	string	`2000`	图片宽度（像素）
`--height`	`-H`	string	`3000`	图片高度（像素）
`--theme`	`-t`	string	-	主题名称（用于文件名）
`--sendToChat`	-	boolean	`true`	是否发送到聊天

支持的图表类型

✅ flowchart / graph（流程图）
✅ sequenceDiagram（时序图）
✅ classDiagram（类图）
✅ stateDiagram（状态图）
✅ erDiagram（ER 图）
✅ gantt（甘特图）
✅ pie（饼图）
✅ journey（用户体验旅程图）

触发条件

会触发的场景：

"画个流程图"、"生成架构图"、"做个时序图"
"导出为图片"、"转成 PNG"、"可视化一下"
"画一下 OpenClaw 的架构"、"用户登录流程怎么画"
"这个系统的组件关系"、"展示一下数据流"

不会触发的场景：

"修改这个图"（已有图片，需要编辑）
"解释这个流程图"（需要理解，不是生成）
"有 Mermaid 模板吗"（询问资源）

依赖

@mermaid-js/mermaid-cli (全局安装)
Puppeteer + Chromium (mmdc 自动安装)

错误处理

Mermaid 语法错误 → 返回错误信息和行号
mmdc 执行失败 → 使用 --no-sandbox 重试一次
输出目录不存在 → 自动创建

版本历史

v1.0.0 (2026-03-07)

初始版本
支持 PNG/SVG/PDF 导出
统一输出目录管理
自动发送到聊天