mermaid-generator
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
More from zephyrwang6/myskill
web-scraper
Fetch and extract content from web pages, converting HTML to clean markdown. Use when users want to read web articles, extract information from URLs, scrape web content, or when the built-in WebFetch tool fails due to network restrictions. Trigger when user provides URLs to read, asks to fetch web content, or needs to extract text from websites.
246rss-aggregator
Aggregates and summarizes recent updates from a predefined list of RSS feeds. Use when the user asks for "recent updates", "what's new", or "RSS updates" within a specific timeframe.
196youtube-transcript-cn
|
108content-topic-generator
从文章、推文、社交媒体内容生成多角度选题,包括推文选题(140字完整内容)和公众号选题(含详细大纲)。支持延伸、反驳、扩充、热点结合四种策略。当用户需要基于现有内容创作新选题、分析文章生成衍生内容、或进行内容再创作时使用。适用场景:(1) 分析推文/文章并生成选题,(2) 创建公众号/社交媒体内容策划,(3) 将长文拆解为多个传播点,(4) 内容营销和话题策划。
99topic-collector
AI热点采集工具。从Twitter/X、Product Hunt、Reddit、Hacker News、博客等采集AI相关热点内容。当用户说"开始今日选题"、"采集热点"、"看看今天有什么新闻"、"今日AI热点"时触发。聚焦领域:Vibe Coding、Claude Skill、AI知识管理、AI模型更新、AI新产品、海外热点。
76topic-generator
AI选题生成工具。从采集的热点中筛选TOP10,生成完整选题方案。当用户说"生成选题"、"筛选热点"、"哪些值得写"时触发。输出包含:事件描述、核心角度、标题、写作方式。
71