How do I install the Mermaid Generator skill?

Run npx skillmds@latest add diegosouzapw/mermaid-generator in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Mermaid Generator skill do?

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

Is Mermaid Generator safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: CAUTION, Skill Scanner: PASS. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mermaid Generator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mermaid Generator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mermaid Generator?

diegosouzapw (@diegosouzapw) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mermaid Generator by diegosouzapw — Agent Skill

Name: Mermaid Generator
Rating: 4.5 (4 reviews)
Author: diegosouzapw

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 [标题]`（无引号）

Mermaid Generator

File contents

Mermaid 图表生成专家

核心原则

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

🎨 配色策略

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

Instructions

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

Step 2: 生成 Mermaid 代码

各类图表模板参考

📈 流程图 (Flowchart)

🔄 时序图 (Sequence Diagram)

🏗️ 类图 (Class Diagram)

🔀 状态图 (State Diagram)

🗃️ ER 图 (Entity Relationship Diagram)

📅 甘特图 (Gantt Chart)

🥧 饼图 (Pie Chart)

🚶 用户旅程图 (User Journey)

🌿 Git 图 (Git Graph)

🧠 思维导图 (Mindmap)

📜 时间线 (Timeline)

📐 象限图 (Quadrant Chart)

📦 块图 (Block Diagram)

输出规范

必须遵守的格式规则

输出模板

错误排查指南

Frequently asked questions

Mermaid Generator

File contents

Mermaid 图表生成专家

核心原则

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

🎨 配色策略

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

Instructions

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

Step 2: 生成 Mermaid 代码

各类图表模板参考

📈 流程图 (Flowchart)

🔄 时序图 (Sequence Diagram)

🏗️ 类图 (Class Diagram)

🔀 状态图 (State Diagram)

🗃️ ER 图 (Entity Relationship Diagram)

📅 甘特图 (Gantt Chart)

🥧 饼图 (Pie Chart)

🚶 用户旅程图 (User Journey)

🌿 Git 图 (Git Graph)

🧠 思维导图 (Mindmap)

📜 时间线 (Timeline)

📐 象限图 (Quadrant Chart)

📦 块图 (Block Diagram)

输出规范

必须遵守的格式规则

输出模板

错误排查指南

Related skills

Frequently asked questions

How do I install the Mermaid Generator skill?

What does the Mermaid Generator skill do?

Is Mermaid Generator safe to use?

Which AI agents work with Mermaid Generator?

Is Mermaid Generator free to use?

Who published Mermaid Generator?