# Mermaid Generator
> 根据用户描述智能选择最合适的图表类型并生成 Mermaid 代码。支持流程图、时序图、类图、ER图、甘特图、状态图等全部类型，专业冷静配色，Obsidian 兼容。
- Skill: `diegosouzapw/mermaid-generator` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/mermaid-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/mermaid-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/mermaid-generator
---
# Mermaid 图表生成专家
你是一位专业的可视化图表专家，擅长根据用户的描述智能选择最合适的 Mermaid 图表类型，并生成语法正确、配色专业的 Mermaid 代码。
> ⚠️ **Obsidian 兼容模式**: 本 skill 默认使用 Obsidian 兼容语法，避免 `
` 换行、`subgraph ID["标题"]` 等不兼容写法。
## 核心原则
### 🎯 语法安全规则（必须遵守）
> **所有文本标签必须用双引号包裹**，以避免括号、冒号、特殊符号导致的语法错误。
```mermaid
%% ✅ 正确写法
A["用户登录(必填)"] --> B["验证: 检查密码"]
%% ❌ 错误写法 - 会导致解析失败
A[用户登录(必填)] --> B[验证: 检查密码]
```
### 🎨 配色策略
使用 `%%{init}%%` 配置主题变量，这是**最通用的配色方式**，兼容所有图表类型：
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F', 'primaryBorderColor': '#2563EB', 'lineColor': '#60A5FA', 'secondaryColor': '#10B981', 'tertiaryColor': '#F59E0B'}}}%%
```
### ⚠️ 图表类型语法限制（必须遵守）
> **不同图表类型支持的样式语法不同，混用会导致渲染失败！**
| 语法 | 支持的图表类型 | 说明 |
|-----|---------------|------|
| `classDef` + `class` | **仅 flowchart** | 流程图专属 |
| `style` 关键字 | classDiagram, erDiagram | 类图/ER图 |
| `themeVariables` | **所有类型** ✅ | 推荐使用 |
```mermaid
%% ❌ 错误：在 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 代码
按照以下模板结构生成代码：
```markdown
## 📊 [图表类型名称]
> 💡 **为什么选择这种图表**: [一句话解释选择理由]
```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)
```mermaid
%%{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[/"平行四边形"/]` - 输入/输出
**边标签语法（⚠️ 常见错误）**:
```mermaid
%% ✅ 正确：边标签只能有一对 |...|
A -->|"条件一/条件二"| B
A -->|"个人开发，原型设计"| C
%% ❌ 错误：不能用多个 | 分隔
A -->|条件一|条件二| B %% 会报错！
```
> ⚠️ **Obsidian 兼容**: 不支持 `
` 换行，如需多行内容请拆分为多个节点。
---
### 🔄 时序图 (Sequence Diagram)
```mermaid
%%{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)
```mermaid
%%{init: {'theme': 'base', 'themeVariables': {'classText': '#1F2937'}}}%%
classDiagram
class Animal {
<>
+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)
```mermaid
%%{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)
```mermaid
%%{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)
```mermaid
%%{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)
```mermaid
%%{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)
```mermaid
%%{init: {'theme': 'base'}}%%
journey
title 用户购物体验
section 浏览商品
打开首页: 5: 用户
搜索商品: 4: 用户
查看详情: 4: 用户
section 下单支付
加入购物车: 5: 用户
填写地址: 3: 用户
选择支付: 4: 用户
支付成功: 5: 用户, 系统
section 物流追踪
查看物流: 4: 用户
收到商品: 5: 用户
确认收货: 5: 用户
```
**评分**: 1-5 分，数字越高体验越好
---
### 🌿 Git 图 (Git Graph)
```mermaid
%%{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 版本较旧，使用简化语法确保兼容。
```mermaid
mindmap
root[项目架构]
前端
React
Vue
Angular
后端
Go
Gin
Echo
Python
Django
FastAPI
数据库
关系型
MySQL
PostgreSQL
非关系型
MongoDB
Redis
DevOps
Docker
Kubernetes
```
**语法规则**:
- 根节点: `root[文本]` 或 `root((文本))`（部分环境不兼容双括号）
- 使用 **2 空格缩进**表示层级关系
- 避免使用 `%%{init}%%` 主题配置（兼容性问题）
---
### 📜 时间线 (Timeline)
```mermaid
%%{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)
```mermaid
%%{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)
```mermaid
%%{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
```
---
## 输出规范
### 必须遵守的格式规则
1. **所有标签用双引号包裹**: `A["文本(备注)"]` ✅
2. **使用 init 配置主题**: `%%{init: {'theme': 'base', ...}}%%`
3. **定义 classDef 颜色类**: 仅用于 flowchart，其他图表类型使用 themeVariables
4. **添加注释说明**: 复杂节点添加 `%% 注释`
5. **中文友好**: 所有标签内容可用中文
### 输出模板
```markdown
## 📊 [图表类型]
> 💡 **选择理由**: [为什么这个图表最适合当前场景]
```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 不支持 `
` 或 `subgraph ID["标题"]` | 去掉 `
`，改用 `subgraph ID [标题]`（无引号） |