Claude Code LogoVibe Coding Guide
Back to All Skills

Mermaid Generator

by unix2dos

skill
View on GitHub

根据用户描述智能选择最合适的图表类型并生成 Mermaid 代码。支持流程图、时序图、类图、ER图、甘特图、状态图等全部类型，配色鲜艳美观。

Skill Details

Repository Files

1 file in this skill directory

name: mermaid-generator description: 根据用户描述智能选择最合适的图表类型并生成 Mermaid 代码。支持流程图、时序图、类图、ER图、甘特图、状态图等全部类型，配色鲜艳美观。 compatibility: opencode

Mermaid 图表生成专家

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

核心原则

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

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

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

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

🎨 配色策略

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

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#4F46E5', 'primaryTextColor': '#000', 'primaryBorderColor': '#3730A3', 'lineColor': '#6366F1', '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
主色（流程/重点） 靛蓝 #4F46E5
成功/完成 翠绿 #10B981
警告/注意 琥珀 #F59E0B
错误/危险 玫红 #EF4444
信息/辅助 天蓝 #06B6D4
紫色强调 紫罗兰 #8B5CF6
粉色点缀 粉红 #EC4899

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:#4F46E5,stroke:#3730A3,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:#06B6D4,stroke:#0891B2,color:#fff
​```

各类图表模板参考

📈 流程图 (Flowchart)

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#4F46E5', 'primaryTextColor': '#000', 'primaryBorderColor': '#3730A3', 'lineColor': '#6366F1', 'secondaryColor': '#10B981', 'tertiaryColor': '#F59E0B'}}}%%
flowchart TD
    A["开始"] --> B{"条件判断"}
    B -->|"是"| C["执行操作A"]
    B -->|"否"| D["执行操作B"]
    C --> E["结束"]
    D --> E

    classDef primary fill:#4F46E5,stroke:#3730A3,color:#fff
    classDef success fill:#10B981,stroke:#059669,color:#fff
    classDef decision fill:#F59E0B,stroke:#D97706,color:#000

    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  %% 会报错！

换行语法:

  • 使用 <br/> 在节点内换行：A["第一行<br/>第二行"]

🔄 时序图 (Sequence Diagram)

%%{init: {'theme': 'base', 'themeVariables': {'actorBkg': '#4F46E5', 'actorTextColor': '#000', 'actorBorder': '#3730A3', 'signalColor': '#6366F1', 'activationBkgColor': '#E0E7FF', 'activationBorderColor': '#4F46E5'}}}%%
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': '#4F46E5', 'primaryTextColor': '#000'}}}%%
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': '#4F46E5'}}}%%
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': '#4F46E5', 'primaryTextColor': '#000', 'primaryBorderColor': '#3730A3', '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': '#4F46E5', 'pie2': '#10B981', 'pie3': '#F59E0B', 'pie4': '#EF4444', 'pie5': '#8B5CF6', 'pie6': '#EC4899', 'pie7': '#06B6D4'}}}%%
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': '#4F46E5', 'git1': '#10B981', 'git2': '#F59E0B', 'git3': '#EF4444', 'gitBranchLabel0': '#4F46E5', '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': '#4F46E5', '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

输出规范

必须遵守的格式规则

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

输出模板

## 📊 [图表类型]

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

​```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 空格缩进
View on GitHub

Related Skills

Attack Tree Construction

Build comprehensive attack trees to visualize threat paths. Use when mapping attack scenarios, identifying defense gaps, or communicating security risks to stakeholders.

skill

Grafana Dashboards

Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visualizing metrics, or creating operational observability interfaces.

skill

Matplotlib

Foundational plotting library. Create line plots, scatter, bar, histograms, heatmaps, 3D, subplots, export PNG/PDF/SVG, for scientific visualization and publication figures.

skill

Scientific Visualization

Create publication figures with matplotlib/seaborn/plotly. Multi-panel layouts, error bars, significance markers, colorblind-safe, export PDF/EPS/TIFF, for journal-ready scientific plots.

skill

Seaborn

Statistical visualization. Scatter, box, violin, heatmaps, pair plots, regression, correlation matrices, KDE, faceted plots, for exploratory analysis and publication figures.

skill

Shap

Model interpretability and explainability using SHAP (SHapley Additive exPlanations). Use this skill when explaining machine learning model predictions, computing feature importance, generating SHAP plots (waterfall, beeswarm, bar, scatter, force, heatmap), debugging models, analyzing model bias or fairness, comparing models, or implementing explainable AI. Works with tree-based models (XGBoost, LightGBM, Random Forest), deep learning (TensorFlow, PyTorch), linear models, and any black-box model

skill

Pydeseq2

Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.

skill

Query Writing

For writing and executing SQL queries - from simple single-table queries to complex multi-table JOINs and aggregations

skill

Pydeseq2

Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.

skill

Scientific Visualization

Meta-skill for publication-ready figures. Use when creating journal submission figures requiring multi-panel layouts, significance annotations, error bars, colorblind-safe palettes, and specific journal formatting (Nature, Science, Cell). Orchestrates matplotlib/seaborn/plotly with publication styles. For quick exploration use seaborn or plotly directly.

skill

Skill Information

Category:Skill
Last Updated:1/22/2026