Mermaid流程图语言

Mermaid 是文本描述语言，用简单语法定义图表——流程图、时序图、类图、状态图、甘特图、饼图，实现「文本即图形」。

图表类型总览

类型	关键字	用途
流程图	graph / flowchart	流程、关系
时序图	sequenceDiagram	交互流程
类图	classDiagram	类结构
状态图	stateDiagram-v2	状态迁移
甘特图	gantt	项目进度
饼图	pie	数据占比

渲染方式

• 在线编辑：Mermaid Live Editor
• Markdown 环境：Typora、GitLab、Obsidian 等原生支持
• 网页集成：通过 Mermaid.js 库嵌入 HTML
• 官方文档：https://mermaid.js.org/

流程图

flowchart TD
    A[开始] --> B{条件}
    B -->|是| C[执行]
    B -->|否| D[结束]

方向：TD/TB（上下）、LR（左右）、RL、BT

节点形状：[矩形]、(圆边矩形)、{菱形}、((圆形))

连接线：--> 实线箭头、--- 实线无箭头、-.-> 虚线箭头、==> 粗线箭头、-- 文字 --> 带文字

实战示例（视频篡改检测流程）：

graph LR
    A[原始视频] --> B[帧大小序列EFS]
    B --> C[小波多尺度分解]
    C --> D[特征提取]
    D --> E[分类模型]
    F[篡改视频] --> B
    E --> G[原始视频分类]
    E --> H[速度操作检测]

时序图

sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 请求
    B-->>A: 响应

箭头：->>（实线）、-->>（虚线）、->x（带×）

类图

classDiagram
    class Animal {
        +String name
        +eat()
        #sleep()
        -digest()
    }
    Animal <|-- Dog : 继承

可见性：+（public）、-（private）、#（protected）

关系：<|--（继承）、*--（组合）、o--（聚合）

状态图

stateDiagram-v2
    [*] --> State1
    State1 --> State2 : 事件
    State2 --> [*]

甘特图

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 阶段A
    任务1 :a1, 2023-01-01, 30d

饼图

pie
    title 分布
    "A" : 45
    "B" : 30
    "C" : 25

子图

flowchart TB
    subgraph 系统 [订单处理]
        direction LR
        A[创建] --> B[支付]
    end

样式

classDef 定义样式类，class 将节点归类：

graph TB
    A[输入] --> B[处理]
    B --> C[输出]

    classDef input fill:#9f9,stroke:#333
    classDef output fill:#f99,stroke:#333
    class A input
    class C output