⚡

Mermaid图表Skill mermaid-diagrams

Mermaid图表是一种使用Mermaid语法创建各种图表和可视化的技能，适用于流程图、序列图、类图、实体关系图、甘特图等，方便软件文档编写、数据可视化和项目规划。关键词：Mermaid、图表、可视化、流程图、序列图、类图、数据可视化。

数据可视化 0 次安装 0 次浏览 更新于 3/22/2026

name: mermaid-diagrams description: 使用Mermaid语法创建图表和可视化。用于生成流程图、序列图、类图、实体关系图、甘特图或任何视觉文档。触发词：Mermaid、流程图、序列图、类图、ER图、甘特图、图表、可视化。

Mermaid图表

使用Mermaid markdown语法创建图表和可视化。

快速参考

Mermaid图表写在以mermaid为语言标识符的markdown代码块中。

流程图

flowchart TD
    A[开始] --> B{是否有效？}
    B -->|是| C[处理数据]
    B -->|否| D[显示错误]
    C --> E[保存到数据库]
    D --> F[返回输入]
    E --> G[结束]
    F --> A

流程图语法

flowchart TD          %% TD = 自上而下, LR = 从左到右, RL, BT
    A[矩形]           %% 方括号 = 矩形
    B(圆角)           %% 括号 = 圆角矩形
    C{菱形}           %% 花括号 = 菱形/决策
    D[[子程序]]       %% 双括号 = 子程序
    E[(数据库)]       %% 圆柱形状
    F((圆形))         %% 双括号 = 圆形
    G>非对称]         %% 旗形形状

    A --> B           %% 箭头
    B --- C           %% 无箭头线
    C -.-> D          %% 虚线箭头
    D ==> E           %% 粗箭头
    E --文本--> F     %% 带标签的箭头
    F -->|标签| G     %% 替代标签语法

子图

flowchart TB
    subgraph 前端
        A[React应用] --> B[组件]
        B --> C[钩子]
    end
    
    subgraph 后端
        D[API服务器] --> E[数据库]
    end
    
    A -->|HTTP| D

序列图

sequenceDiagram
    participant U as 用户
    participant C as 客户端
    participant S as 服务器
    participant D as 数据库

    U->>C: 点击提交
    C->>S: POST /api/data
    activate S
    S->>D: INSERT查询
    D-->>S: 成功
    S-->>C: 200 OK
    deactivate S
    C-->>U: 显示成功消息

序列图语法

sequenceDiagram
    participant A as 爱丽丝
    participant B as 鲍勃

    A->>B: 实线带箭头
    A-->>B: 虚线带箭头
    A-)B: 实线开箭头
    A--)B: 虚线开箭头
    
    activate B          %% 激活框
    B->>A: 响应
    deactivate B
    
    Note over A,B: 这是一个注释
    Note right of A: 右侧注释
    
    alt 条件真
        A->>B: 执行此操作
    else 条件假
        A->>B: 执行彼操作
    end
    
    loop 每分钟
        A->>B: 心跳
    end
    
    opt 可选操作
        A->>B: 可能执行此操作
    end

类图

classDiagram
    class 用户 {
        +字符串 id
        +字符串 姓名
        +字符串 邮箱
        +登录()
        +退出()
    }
    
    class 订单 {
        +字符串 id
        +日期 创建时间
        +计算总额()
    }
    
    class 产品 {
        +字符串 id
        +字符串 名称
        +数字 价格
    }
    
    用户 "1" --> "*" 订单 : 下单
    订单 "*" --> "*" 产品 : 包含

类图语法

classDiagram
    class 类名 {
        +公共字段
        -私有字段
        #受保护字段
        ~包字段
        +公共方法()
        -私有方法()
    }
    
    类A <|-- 类B : 继承
    类C *-- 类D : 组合
    类E o-- 类F : 聚合
    类G --> 类H : 关联
    类I ..> 类J : 依赖
    类K ..|> 类L : 实现

实体关系图

erDiagram
    用户 ||--o{ 订单 : 下单
    订单 ||--|{ 订单项 : 包含
    产品 ||--o{ 订单项 : "在其中"
    
    用户 {
        字符串 id PK
        字符串 邮箱 UK
        字符串 姓名
        日期时间 创建时间
    }
    
    订单 {
        字符串 id PK
        字符串 用户_id FK
        日期时间 创建时间
        字符串 状态
    }
    
    产品 {
        字符串 id PK
        字符串 名称
        小数 价格
    }
    
    订单项 {
        字符串 id PK
        字符串 订单_id FK
        字符串 产品_id FK
        整数 数量
    }

ER图基数

||--||   一对一
||--o{   一对零或多
||--|{   一对一个或多个
}o--o{   零或多对零或多

甘特图

gantt
    标题 项目时间线
    日期格式 YYYY-MM-DD
    
    section 规划
    需求分析    :a1, 2024-01-01, 7d
    设计          :a2, after a1, 14d
    
    section 开发
    后端API     :b1, after a2, 21d
    前端        :b2, after a2, 28d
    集成        :b3, after b1, 7d
    
    section 测试
    QA测试      :c1, after b3, 14d
    缺陷修复    :c2, after c1, 7d
    
    section 发布
    部署        :milestone, after c2, 0d

状态图

stateDiagram-v2
    [*] --> 空闲
    空闲 --> 处理中: 提交
    处理中 --> 成功: 有效
    处理中 --> 错误: 无效
    成功 --> 空闲: 重置
    错误 --> 空闲: 重试
    成功 --> [*]

饼图

pie title 浏览器市场份额
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "其他" : 2

Git图

gitGraph
    commit
    commit
    branch 特性
    checkout 特性
    commit
    commit
    checkout 主分支
    merge 特性
    commit
    branch 热修复
    checkout 热修复
    commit
    checkout 主分支
    merge 热修复

用户旅程

journey
    标题 用户结账体验
    section 浏览
        查看产品: 5: 用户
        添加到购物车: 4: 用户
    section 结账
        输入地址: 3: 用户
        输入支付: 2: 用户
        确认订单: 5: 用户
    section 购后
        接收确认: 5: 用户, 系统
        跟踪运输: 4: 用户

思维导图

mindmap
    root((项目))
        前端
            React
            TypeScript
            Tailwind
        后端
            Node.js
            PostgreSQL
            Redis
        DevOps
            Docker
            Kubernetes
            CI/CD

样式

flowchart LR
    A[开始]:::绿色 --> B[处理]:::蓝色 --> C[结束]:::红色
    
    classDef 绿色 fill:#22c55e,color:#fff
    classDef 蓝色 fill:#3b82f6,color:#fff
    classDef 红色 fill:#ef4444,color:#fff

React组件

import mermaid from 'mermaid';
import { useEffect, useRef } from 'react';

mermaid.initialize({
  startOnLoad: true,
  theme: 'neutral', // 默认、深色、森林、中性
  securityLevel: 'loose',
});

interface MermaidProps {
  chart: string;
  id?: string;
}

export function Mermaid({ chart, id = 'mermaid-diagram' }: MermaidProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      mermaid.render(id, chart).then(({ svg }) => {
        if (ref.current) {
          ref.current.innerHTML = svg;
        }
      });
    }
  }, [chart, id]);

  return <div ref={ref} className="mermaid-container" />;
}

// 用法
<Mermaid
  chart={`
    flowchart LR
      A --> B --> C
  `}
/>

提示

  1. 方向: 使用TD（自上而下）、LR（从左到右）、BT（自下而上）、RL（从右到左）
  2. 注释: 使用%%进行注释
  3. 引号: 对于包含特殊字符的标签，使用引号：A["包含（括号）的标签"]
  4. 换行: 使用<br/>进行多行标签

资源