SuperAPI AI 工具集

mermaid-generator

设计与创作

查看项目

更新于 10-16 04:46

技能介绍

用途

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。文件内容模板包括标题(主题名 - 图表类型)、生成时间与来源、图表说明(一句话描述)、Mermaid 代码块、要点说明。

使用示例

示例 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。该技能的运行环境、安装方式、依赖条件与收费信息,资料中暂未提供。