Mermaid 图表技能

一键生成 Mermaid 图表并自动导出为 PNG/SVG/PDF 的 Claude Code 技能。

English

为什么选择这个技能？

相比原生 Claude Code 的核心优势：

• 完整管道 — Claude Code 能写 Mermaid 代码，但止步于 .mmd 文件。本技能自动完成验证、导出和错误恢复
• 提前捕获错误 — 验证循环防止导出损坏的图表
• 灵活导出 — 本地 mmdc 或 Kroki API 备选（无需安装）
• 主动画图 — 讨论架构时自动触发，不需要你专门要求"画个图"

这个技能能做什么

图表类型（11+种）

输出格式

• PNG — 高分辨率（2048px），白色背景，多种主题
• SVG — 可缩放矢量图，适合文档
• PDF — 可打印文档

自动触发

技能在以下情况自动激活：

• 明确请求图表：“创建流程图”、“画架构图”
• 解释复杂系统：“认证是怎么工作的”（3+组件）
• 使用中文：“画一个时序图”、“架构图”

如何使用这个技能

1. 安装技能

Claude Code（全局）：

git clone https://github.com/Agents365-ai/creating-mermaid-diagrams.git ~/.claude/skills/creating-mermaid-diagrams

Claude Code（仅当前项目）：

git clone https://github.com/Agents365-ai/creating-mermaid-diagrams.git .claude/skills/creating-mermaid-diagrams

OpenClaw：

git clone https://github.com/Agents365-ai/creating-mermaid-diagrams.git skills/creating-mermaid-diagrams

SkillsMP： 在 skillsmp.com 搜索 mermaid，一键安装。

2. 安装依赖

方式 A：本地导出（mmdc）

npm install -g @mermaid-js/mermaid-cli
mmdc --version

方式 B：Kroki API（无需安装）

# 只需要 curl，无需安装任何东西！
curl --version

使用 Kroki 的场景：

• mmdc 安装失败（Chromium 依赖问题）
• 持续集成环境没有 Node.js
• 快速生成单个图表

3. 开始使用

在 Claude Code 中描述你想要的：

创建一个用户认证的时序图，使用 JWT

画一个电商微服务架构图

Claude 会：

1. 生成 .mmd 源文件
2. 验证语法（在导出前捕获错误）
3. 导出为 PNG/SVG/PDF
4. 报告输出文件路径

工作流程

本技能采用验证优先的工作流：

示例输出

提示词：

创建一个微服务电商架构，包含 API 网关、各种服务和数据库

生成结果：

文件结构

creating-mermaid-diagrams/
├── SKILL.md              # 主技能说明
├── reference/
│   ├── FLOWCHART.md      # 流程图语法和示例
│   ├── SEQUENCE.md       # 时序图语法
│   ├── CLASS-ER.md       # 类图和 ER 图语法
│   └── OTHER-TYPES.md    # 状态图、甘特图、Git图、饼图、思维导图、C4
├── assets/
│   ├── example.mmd       # 示例：微服务架构
│   ├── example.png
│   ├── workflow.mmd      # 示例：工作流（英文）
│   ├── workflow.png
│   ├── workflow_cn.mmd   # 示例：工作流（中文）
│   └── workflow_cn.png
├── README.md             # 中文文档（默认）
└── README_EN.md          # 英文文档

支持作者

如果这个技能对你有帮助，欢迎支持作者：

许可证

MIT

作者

Agents365-ai

• GitHub: https://github.com/Agents365-ai
• Bilibili: https://space.bilibili.com/441831884