mermaid-generator
SKILL.md
Mermaid Generator
将任意文本、描述、工作流转换为清晰简约的 Mermaid 图表。
核心能力
- 智能识别结构 - 从文本中提取逻辑关系和流程步骤
- 多图表类型 - 支持 flowchart、sequence、class diagram
- 清晰简约 - 使用 emoji 和图标增强可读性
- 批量生成 - 复杂逻辑可拆分为多个关联图表
- 自动分类保存 - 按 MMDD-主题 分文件夹保存
支持的图表类型
| 类型 | 适用场景 | 触发词 |
|---|---|---|
| Flowchart | 工作流程、决策树、系统流程 | 流程图、工作流 |
| Sequence | 时序交互、API 调用、用户旅程 | 时序图、交互流程 |
| Class | 系统架构、数据模型、类关系 | 架构图、类图 |
工作流程
第一步:分析输入内容
识别:
- 内容类型:工作流/交互流程/系统架构
- 核心实体:主要角色/系统/模块
- 逻辑关系:顺序/分支/循环/依赖
- 复杂度:是否需要拆分为多个图表
第二步:选择图表类型
自动选择规则:
- 顺序流程 + 分支决策 → Flowchart
- 多方交互 + 时间顺序 → Sequence
- 模块关系 + 继承组合 → Class
用户可指定:
用户:生成流程图
用户:用时序图展示
用户:创建类图
第三步:设计图表结构
Flowchart 设计原则:
- 使用
flowchart LR/TB方向 - 节点命名简洁(中文 + emoji)
- 用 subgraph 分组相关步骤
- 决策点用菱形
{} - 关键路径用粗箭头
==>
Sequence 设计原则:
- 参与者命名清晰
- 每步操作一句话描述
- 用 Note 补充关键信息
- 异步操作用虚线
-->
Class 设计原则:
- 类名用大驼峰
- 核心属性/方法简化展示
- 关系清晰(继承/组合/依赖)
- 用 note 说明设计意图
第四步:增强可读性
使用 Emoji:
📱 应用层
🔧 工具类
📊 数据层
🔐 安全模块
✅ 成功状态
❌ 失败状态
⚙️ 配置
🚀 启动
颜色提示(在 subgraph 中使用):
flowchart TB
subgraph input [📥 输入阶段]
A[用户输入]
end
subgraph process [⚙️ 处理阶段]
B[数据验证]
end
subgraph output [📤 输出阶段]
C[结果展示]
end
第五步:保存文件
目录结构:
00 收件箱/画板/mermaid流程图/
└── MMDD-主题名/
├── 01-主流程图.md
├── 02-子流程图.md
└── README.md (索引说明)
文件命名:
- 单个图表:
MMDD-主题名.md - 多个图表:
MMDD-主题名/序号-子主题.md
文件内容模板:
# 主题名 - 图表类型
> 生成时间:YYYY-MM-DD
> 来源:[原文链接或描述]
## 图表说明
[一句话描述这个图表展示什么]
## Mermaid 代码
\`\`\`mermaid
[图表代码]
\`\`\`
## 要点说明
- 关键点 1
- 关键点 2
使用示例
示例 1:简单流程转换
输入:
把这个转为流程图:
1. 用户打开 X 书签页面
2. 手动滚动加载
3. 点击下载按钮
4. 选择保存目录
5. 保存为 Markdown 文件
输出:
flowchart LR
A[📱 用户打开 X 书签] --> B[📜 手动滚动加载]
B --> C[⬇️ 点击下载]
C --> D[📁 选择保存目录]
D --> E[💾 保存 Markdown]
示例 2:复杂系统拆分
输入:
生成播客处理工作流的流程图,包括:
- 获取更新
- 提取字幕
- 内容处理
- 保存飞书
- 生成图片
输出:生成 3 个图表
- 主流程图(整体流程)
- 内容处理子流程(详细步骤)
- 数据流转图(系统架构)
示例 3:时序图生成
输入:
用时序图展示用户登录流程
输出:
sequenceDiagram
actor User as 👤 用户
participant App as 📱 前端
participant API as 🔧 后端 API
participant DB as 💾 数据库
User->>App: 输入账号密码
App->>API: POST /login
API->>DB: 查询用户
DB-->>API: 返回用户信息
API-->>App: 返回 Token
App-->>User: 登录成功
最佳实践
图表简化原则
- 一图一主题 - 不要在一个图里塞太多内容
- 3-7 法则 - 每个 subgraph 3-7 个节点
- 命名清晰 - 节点名称 3-5 个字
- 适度使用 emoji - 2-3 个关键位置即可
拆分策略
何时拆分:
- 节点数 > 15
- 有明显的子流程
- 涉及多个系统/角色
- 需要展示不同层次
拆分方式:
- 主流程 + 子流程
- 业务流程 + 技术实现
- 时序关系 + 模块关系
保存组织
单个流程:
00 收件箱/画板/mermaid流程图/0202-X推文处理.md
多个流程:
00 收件箱/画板/mermaid流程图/0202-播客处理工作流/
├── README.md # 索引说明
├── 01-主流程.md # 整体流程
├── 02-内容处理.md # 子流程
└── 03-系统架构.md # 架构图
图表质量检查
生成后自检:
Flowchart:
- 流程方向清晰(LR/TB)
- 决策点用菱形
- 有开始和结束
- 分支都有明确出口
Sequence:
- 参与者命名清晰
- 时间顺序正确
- 异步操作用虚线
- 重要信息有 Note
Class:
- 类名符合规范
- 关系类型正确
- 核心属性方法展示
- 有必要的 note 说明
触发方式
| 用户说法 | 触发 |
|---|---|
| 生成流程图 | ✅ |
| 转为 mermaid | ✅ |
| 画个图表 | ✅ |
| 可视化这个流程 | ✅ |
| 用时序图展示 | ✅ |
| 创建架构图 | ✅ |
参考资源
详细语法参考:references/mermaid-syntax.md
Weekly Installs
11
Repository
zephyrwang6/myskillGitHub Stars
88
First Seen
Feb 4, 2026
Security Audits
Installed on
opencode11
codex11
gemini-cli11
cursor10
github-copilot9
codebuddy8