Mermaid 图表技能

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

English

为什么选择这个技能？

| 特性 | 本技能 | 原生 Claude Code | 其他技能 | MCP 服务器 | |------|--------|-----------------|----------|------------| | 编写 Mermaid 语法 | ✓ 有示例引导 | ✓ 内置能力 | ✓ 不一定 | ✓ 不一定 | | 导出前验证 | ✓ 必须步骤 | ✗ 无验证环节 | 经常跳过 | 不一定 | | 导出 PNG/SVG/PDF | ✓ 自动完成 | ✗ 需手动要求 | 通常只有一种 | 仅网页 | | 零安装备选 | ✓ Kroki 只需 curl | ✗ 无备选方案 | 需要安装 | 需要配置 | | 主动触发 | ✓ 3+组件自动触发 | ✗ 仅在明确要求时 | 仅手动 | 仅手动 | | 中文支持 | ✓ 画图、架构图、流程图、时序图 | ✗ 无关键词触发 | 仅英文 | 仅英文 | | 端到端工作流 | ✓ 生成→验证→导出→报告 | ✗ 仅生成代码 | 部分支持 | 部分支持 | | 渐进式加载 | ✓ 语法分离到独立文件 | 不适用 | 全部内联 | 不适用 |

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

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

这个技能能做什么

图表类型（11+种）

| 类型 | 用途 | 示例 | |------|------|------| | 流程图 | 流程、管道、决策树 | CI/CD 管道、用户注册流程 | | 时序图 | API 调用、认证流程 | JWT 认证、微服务通信 | | 类图 | OOP 模型、数据结构 | 领域模型、继承层次 | | ER 图 | 数据库模式 | 用户-订单-商品关系 | | 状态图 | 状态机、生命周期 | 订单状态、连接状态 | | 甘特图 | 项目时间线 | 迭代规划、发布计划 | | 饼图 | 比例、分布 | 市场份额、资源分配 | | Git 图 | 分支策略 | 分支模型、主干开发 | | C4 上下文图 | 高级架构 | 系统上下文、容器图 | | 思维导图 | 主题分解 | 功能规划、头脑风暴 |

输出格式

• 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. 报告输出文件路径

工作流程

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

flowchart TD
  Start([用户请求图表]):::input --> CheckDeps{检查依赖}:::decision
  CheckDeps -->|mmdc 可用| UseMmdc[使用 mmdc 本地导出]:::process
  CheckDeps -->|mmdc 不可用| UseKroki[使用 Kroki API]:::process
  UseMmdc --> PickType
  UseKroki --> PickType
  PickType[选择图表类型]:::process --> Generate[生成 .mmd 文件]:::process
  Generate --> Validate{验证语法}:::decision
  Validate -->|错误| Fix[修复 .mmd 文件]:::warning
  Fix --> Validate
  Validate -->|通过| Export[导出 PNG/SVG/PDF]:::process
  Export --> Report([报告输出路径]):::output

  classDef input fill:#d4edda,stroke:#28a745,color:#155724
  classDef process fill:#cce5ff,stroke:#007bff,color:#004085
  classDef decision fill:#fff3cd,stroke:#ffc107,color:#856404
  classDef warning fill:#f8d7da,stroke:#dc3545,color:#721c24
  classDef output fill:#e2d5f1,stroke:#6f42c1,color:#4a235a

颜色图例： 🟢 输入 | 🔵 处理 | 🟡 决策 | 🔴 警告 | 🟣 输出

示例输出

提示词：

创建一个微服务电商架构，包含 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