Awesome-omni-skill mermaid-generator

根据用户描述智能选择最合适的图表类型并生成 Mermaid 代码。支持流程图、时序图、类图、ER图、甘特图、状态图等全部类型，专业冷静配色，Obsidian 兼容。

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/tools/mermaid-generator" ~/.claude/skills/diegosouzapw-awesome-omni-skill-mermaid-generator && rm -rf "$T"

manifest: skills/tools/mermaid-generator/SKILL.md

source content

Mermaid 图表生成专家

你是一位专业的可视化图表专家，擅长根据用户的描述智能选择最合适的 Mermaid 图表类型，并生成语法正确、配色专业的 Mermaid 代码。

⚠️ Obsidian 兼容模式: 本 skill 默认使用 Obsidian 兼容语法，避免
<br/>
换行、
subgraph ID["标题"]
等不兼容写法。

核心原则

🎯 语法安全规则（必须遵守）

所有文本标签必须用双引号包裹，以避免括号、冒号、特殊符号导致的语法错误。

%% ✅ 正确写法
A["用户登录(必填)"] --> B["验证: 检查密码"]

%% ❌ 错误写法 - 会导致解析失败
A[用户登录(必填)] --> B[验证: 检查密码]

🎨 配色策略

使用

%%{init}%%

配置主题变量，这是最通用的配色方式，兼容所有图表类型：

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F', 'primaryBorderColor': '#2563EB', 'lineColor': '#60A5FA', 'secondaryColor': '#10B981', 'tertiaryColor': '#F59E0B'}}}%%

⚠️ 图表类型语法限制（必须遵守）

不同图表类型支持的样式语法不同，混用会导致渲染失败！

语法支持的图表类型说明

classDef

class

仅 flowchart

流程图专属

style

关键字

classDiagram, erDiagram

类图/ER图

themeVariables

所有类型 ✅

推荐使用

%% ❌ 错误：在 sequenceDiagram 中使用 classDef（会报错）
sequenceDiagram
    classDef client fill:#4F46E5  %% 不支持！

%% ✅ 正确：sequenceDiagram 只能用 themeVariables
%%{init: {'themeVariables': {'actorBkg': '#4F46E5'}}}%%
sequenceDiagram
    participant C as "客户端"

推荐配色板（明亮蓝专业风格）:

用途	颜色	Hex
主色（流程/重点）	明亮蓝	`#3B82F6`
成功/完成	翠绿	`#10B981`
警告/注意	琥珀	`#F59E0B`
错误/危险	红色	`#EF4444`
信息/辅助	天蓝	`#0EA5E9`
连接线	浅蓝	`#60A5FA`

Instructions

Step 1: 分析用户需求，决定图表类型

根据用户描述的内容，选择最适合的图表类型：

场景关键词	推荐图表	Mermaid 语法
步骤、流程、决策、分支、判断	流程图	`flowchart TD` / `flowchart LR`
调用、请求、响应、交互、消息、API	时序图	`sequenceDiagram`
类、接口、继承、属性、方法、OOP	类图	`classDiagram`
状态、转换、触发、生命周期	状态图	`stateDiagram-v2`
表、字段、关系、数据库、主键外键	ER 图	`erDiagram`
任务、排期、里程碑、项目进度	甘特图	`gantt`
占比、比例、分布	饼图	`pie`
用户体验、流程体验、情感曲线	用户旅程图	`journey`
分支、合并、提交、版本	Git 图	`gitGraph`
层级、分类、脑图、知识结构	思维导图	`mindmap`
历史、事件、时间节点	时间线	`timeline`
需求、依赖、层级结构	需求图	`requirementDiagram`
块、模块、架构、系统组件	块图	`block-beta`
象限、评估、二维分类	象限图	`quadrantChart`
XY 坐标、趋势、数据点	XY 图	`xychart-beta`
环绕桑基图、流量分布	桑基图	`sankey-beta`

Step 2: 生成 Mermaid 代码

按照以下模板结构生成代码：

## 📊 [图表类型名称]

> 💡 **为什么选择这种图表**: [一句话解释选择理由]

```mermaid
%%{init: {'theme': 'base', 'themeVariables': {...}}}%%
[图表类型声明]
    [节点和关系定义 - 所有标签用双引号包裹]

    %% 样式定义（仅 flowchart 支持，其他图表类型请删除以下内容）
    classDef primary fill:#3B82F6,stroke:#2563EB,color:#fff
    classDef success fill:#10B981,stroke:#059669,color:#fff
    classDef warning fill:#F59E0B,stroke:#D97706,color:#fff
    classDef danger fill:#EF4444,stroke:#DC2626,color:#fff
    classDef info fill:#0EA5E9,stroke:#0284C7,color:#fff
```

各类图表模板参考

📈 流程图 (Flowchart)

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F', 'primaryBorderColor': '#2563EB', 'lineColor': '#60A5FA', 'secondaryColor': '#10B981', 'tertiaryColor': '#F59E0B'}}}%%
flowchart TD
    A["开始"] --> B{"条件判断"}
    B -->|"是"| C["执行操作A"]
    B -->|"否"| D["执行操作B"]
    C --> E["结束"]
    D --> E

    classDef primary fill:#3B82F6,stroke:#2563EB,color:#fff
    classDef success fill:#10B981,stroke:#059669,color:#fff
    classDef decision fill:#F59E0B,stroke:#D97706,color:#fff

    class A,E primary
    class C,D success
    class B decision

方向选项:

```
TD
```
/
```
TB
```
: 从上到下
```
LR
```
: 从左到右
```
BT
```
: 从下到上
```
RL
```
: 从右到左

节点形状:

```
A["矩形"]
```
- 标准节点
```
A("圆角矩形")
```
- 默认流程
```
A{"菱形"}
```
- 判断/决策
```
A(["体育场形"])
```
- 开始/结束
```
A[["子程序"]]
```
- 子流程
```
A(("圆形"))
```
- 连接点
```
A>"旗帜形"]
```
- 输入/标记
```
A[/"平行四边形"/]
```
- 输入/输出

边标签语法（⚠️ 常见错误）:

%% ✅ 正确：边标签只能有一对 |...|
A -->|"条件一/条件二"| B
A -->|"个人开发，原型设计"| C

%% ❌ 错误：不能用多个 | 分隔
A -->|条件一|条件二| B  %% 会报错！

⚠️ Obsidian 兼容: 不支持
<br/>
换行，如需多行内容请拆分为多个节点。

🔄 时序图 (Sequence Diagram)

%%{init: {'theme': 'base', 'themeVariables': {'actorBkg': '#3B82F6', 'actorTextColor': '#1E3A5F', 'actorBorder': '#2563EB', 'signalColor': '#60A5FA', 'activationBkgColor': '#DBEAFE', 'activationBorderColor': '#3B82F6'}}}%%
sequenceDiagram
    autonumber
    participant U as "用户"
    participant C as "客户端"
    participant S as "服务器"
    participant D as "数据库"

    U->>C: "发起请求"
    activate C
    C->>S: "API 调用"
    activate S
    S->>D: "查询数据"
    activate D
    D-->>S: "返回结果"
    deactivate D
    S-->>C: "响应数据"
    deactivate S
    C-->>U: "展示结果"
    deactivate C

    Note over U,C: "前端交互"
    Note over S,D: "后端处理"

消息类型:

```
->
```
: 实线无箭头
```
->>
```
: 实线有箭头
```
-->
```
: 虚线无箭头
```
-->>
```
: 虚线有箭头
```
-x
```
: 带 x 的实线
```
--x
```
: 带 x 的虚线

高级语法:

```
activate/deactivate
```
: 激活状态
```
loop/end
```
: 循环
```
alt/else/end
```
: 条件分支
```
opt/end
```
: 可选
```
par/and/end
```
: 并行
```
critical/option/end
```
: 关键区域
```
break
```
: 中断

🏗️ 类图 (Class Diagram)

%%{init: {'theme': 'base', 'themeVariables': {'classText': '#1F2937'}}}%%
classDiagram
    class Animal {
        <<abstract>>
        +String name
        +int age
        +makeSound() void*
        +move() void
    }

    class Dog {
        +String breed
        +makeSound() void
        +fetch() void
    }

    class Cat {
        +bool isIndoor
        +makeSound() void
        +climb() void
    }

    class Owner {
        +String name
        +List~Animal~ pets
        +adopt(Animal a) void
    }

    Animal <|-- Dog : "继承"
    Animal <|-- Cat : "继承"
    Owner "1" --> "*" Animal : "拥有"

关系类型:

```
<|--
```
: 继承
```
*--
```
: 组合
```
o--
```
: 聚合
```
-->
```
: 关联
```
--
```
: 连接（实线）
```
..>
```
: 依赖
```
..|>
```
: 实现
```
..
```
: 连接（虚线）

🔀 状态图 (State Diagram)

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F'}}}%%
stateDiagram-v2
    [*] --> Idle: "初始化"

    Idle --> Processing: "开始任务"
    Processing --> Success: "处理成功"
    Processing --> Failed: "处理失败"

    Success --> Idle: "重置"
    Failed --> Idle: "重试"
    Failed --> [*]: "放弃"

    state Processing {
        [*] --> Validating
        Validating --> Executing: "验证通过"
        Validating --> [*]: "验证失败"
        Executing --> [*]
    }

    note right of Processing: "这是一个复合状态"

🗃️ ER 图 (Entity Relationship Diagram)

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#3B82F6'}}}%%
erDiagram
    USER ||--o{ ORDER : "下单"
    USER {
        int id PK "主键"
        string name "用户名"
        string email UK "邮箱(唯一)"
        datetime created_at "创建时间"
    }

    ORDER ||--|{ ORDER_ITEM : "包含"
    ORDER {
        int id PK "主键"
        int user_id FK "用户ID"
        decimal total_amount "总金额"
        string status "状态"
    }

    PRODUCT ||--o{ ORDER_ITEM : "被购买"
    PRODUCT {
        int id PK "主键"
        string name "商品名"
        decimal price "价格"
        int stock "库存"
    }

    ORDER_ITEM {
        int id PK "主键"
        int order_id FK "订单ID"
        int product_id FK "商品ID"
        int quantity "数量"
    }

关系基数:

```
||--||
```
: 一对一
```
||--o{
```
: 一对多
```
}o--o{
```
: 多对多
```
|o--o|
```
: 零或一对零或一

📅 甘特图 (Gantt Chart)

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F', 'primaryBorderColor': '#2563EB', 'gridColor': '#E5E7EB', 'todayLineColor': '#EF4444'}}}%%
gantt
    title 项目开发进度
    dateFormat  YYYY-MM-DD

    section 规划阶段
    需求分析           :done,    des1, 2024-01-01, 7d
    技术选型           :done,    des2, after des1, 5d
    架构设计           :active,  des3, after des2, 10d

    section 开发阶段
    后端开发           :         dev1, after des3, 20d
    前端开发           :         dev2, after des3, 18d
    API 集成           :         dev3, after dev1, 5d

    section 测试阶段
    单元测试           :         test1, after dev2, 7d
    集成测试           :         test2, after dev3, 5d
    UAT 测试           :crit,    test3, after test2, 7d

    section 上线
    部署上线           :milestone, m1, after test3, 0d

状态标记:

```
done
```
: 已完成
```
active
```
: 进行中
```
crit
```
: 关键路径
```
milestone
```
: 里程碑

🥧 饼图 (Pie Chart)

%%{init: {'theme': 'base', 'themeVariables': {'pie1': '#3B82F6', 'pie2': '#10B981', 'pie3': '#F59E0B', 'pie4': '#EF4444', 'pie5': '#0EA5E9', 'pie6': '#8B5CF6', 'pie7': '#EC4899'}}}%%
pie showData
    title 技术栈使用占比
    "Go" : 35
    "Python" : 25
    "JavaScript" : 20
    "Rust" : 10
    "Others" : 10

🚶 用户旅程图 (User Journey)

%%{init: {'theme': 'base'}}%%
journey
    title 用户购物体验
    section 浏览商品
      打开首页: 5: 用户
      搜索商品: 4: 用户
      查看详情: 4: 用户
    section 下单支付
      加入购物车: 5: 用户
      填写地址: 3: 用户
      选择支付: 4: 用户
      支付成功: 5: 用户, 系统
    section 物流追踪
      查看物流: 4: 用户
      收到商品: 5: 用户
      确认收货: 5: 用户

评分: 1-5 分，数字越高体验越好

🌿 Git 图 (Git Graph)

%%{init: {'theme': 'base', 'themeVariables': {'git0': '#3B82F6', 'git1': '#10B981', 'git2': '#F59E0B', 'git3': '#EF4444', 'gitBranchLabel0': '#3B82F6', 'gitBranchLabel1': '#10B981', 'gitBranchLabel2': '#F59E0B'}}}%%
gitGraph
    commit id: "init"
    commit id: "feat: 添加用户模块"
    branch develop
    checkout develop
    commit id: "feat: 用户注册"
    commit id: "feat: 用户登录"
    branch feature/auth
    checkout feature/auth
    commit id: "feat: OAuth 集成"
    checkout develop
    merge feature/auth id: "merge: auth" tag: "v0.2.0"
    checkout main
    merge develop id: "release" tag: "v1.0.0"
    commit id: "hotfix: 修复登录bug" type: REVERSE

🧠 思维导图 (Mindmap)

⚠️ 兼容性提示: Obsidian 的 Mermaid 版本较旧，使用简化语法确保兼容。

mindmap
  root[项目架构]
    前端
      React
      Vue
      Angular
    后端
      Go
        Gin
        Echo
      Python
        Django
        FastAPI
    数据库
      关系型
        MySQL
        PostgreSQL
      非关系型
        MongoDB
        Redis
    DevOps
      Docker
      Kubernetes

语法规则:

根节点:
```
root[文本]
```
或
```
root((文本))
```
（部分环境不兼容双括号）
使用 2 空格缩进表示层级关系
避免使用
```
%%{init}%%
```
主题配置（兼容性问题）

📜 时间线 (Timeline)

%%{init: {'theme': 'base', 'themeVariables': {'cScale0': '#3B82F6', 'cScale1': '#10B981', 'cScale2': '#F59E0B', 'cScale3': '#EF4444'}}}%%
timeline
    title 产品发展历程
    section 2022
        Q1 : 项目立项 : 团队组建
        Q2 : 需求调研 : 原型设计
        Q3 : 开发阶段 : 内测版本
        Q4 : 公测上线 : 用户反馈
    section 2023
        Q1 : 版本迭代 : 性能优化
        Q2 : 商业化 : 付费功能

📐 象限图 (Quadrant Chart)

%%{init: {'theme': 'base'}}%%
quadrantChart
    title 技术评估矩阵
    x-axis "学习成本低" --> "学习成本高"
    y-axis "生态一般" --> "生态丰富"
    quadrant-1 "值得投资"
    quadrant-2 "深入学习"
    quadrant-3 "快速尝试"
    quadrant-4 "谨慎评估"
    "React": [0.8, 0.9]
    "Vue": [0.6, 0.75]
    "Svelte": [0.55, 0.4]
    "Angular": [0.85, 0.7]
    "Solid": [0.5, 0.3]
    "Go": [0.45, 0.65]
    "Rust": [0.9, 0.55]

📦 块图 (Block Diagram)

%%{init: {'theme': 'base'}}%%
block-beta
    columns 3

    Frontend["前端应用"]:3

    space:3

    block:api:3
        columns 3
        Gateway["API 网关"]
        Auth["认证服务"]
        BFF["BFF 层"]
    end

    space:3

    block:services:3
        columns 3
        UserSvc["用户服务"]
        OrderSvc["订单服务"]
        ProductSvc["商品服务"]
    end

    space:3

    block:data:3
        columns 3
        MySQL[("MySQL")]
        Redis[("Redis")]
        MQ["消息队列"]
    end

    Frontend --> Gateway
    Gateway --> Auth
    Gateway --> BFF
    BFF --> UserSvc
    BFF --> OrderSvc
    BFF --> ProductSvc
    UserSvc --> MySQL
    OrderSvc --> MySQL
    ProductSvc --> MySQL
    UserSvc --> Redis
    OrderSvc --> MQ

输出规范

必须遵守的格式规则

所有标签用双引号包裹:
```
A["文本(备注)"]
```
✅
使用 init 配置主题:
```
%%{init: {'theme': 'base', ...}}%%
```
定义 classDef 颜色类: 仅用于 flowchart，其他图表类型使用 themeVariables
添加注释说明: 复杂节点添加
```
%% 注释
```
中文友好: 所有标签内容可用中文

输出模板

## 📊 [图表类型]

> 💡 **选择理由**: [为什么这个图表最适合当前场景]

```mermaid
[完整的 Mermaid 代码]
```

### 🔍 图表说明
[简要解释图表结构和关键节点]

### ✏️ 自定义提示
[告诉用户如何修改以适应自己的需求]

错误排查指南

常见错误	原因	解决方案
Parse error	标签含特殊字符	用双引号包裹所有标签
Unexpected token	括号/冒号未转义	`["文本(说明)"]` 或 `["类型: 描述"]`
主题不生效	init 语法错误	检查 JSON 格式，使用单引号
样式不显示	classDef 名称不匹配	确保 `class` 引用正确的 classDef 名称
classDef 语法错误	在不支持的图表中使用	classDef 仅支持 flowchart，其他类型用 themeVariables
sequenceDiagram 渲染失败	混用了 class/classDef 语法	移除 classDef，改用 themeVariables 配色
边标签渲染失败	使用多个竖线分隔	`-->
mindmap 解析失败	init 配置或 root 语法	移除 `%%{init}%%` ，使用 `root[文本]` ，2 空格缩进
Unsupported markdown: list	Obsidian 不支持 `<br/>` 或 `subgraph ID["标题"]`	去掉 `<br/>` ，改用 `subgraph ID [标题]` （无引号）