Markdown 图表语法示例汇总

Markdown 图表语法示例汇总

下面把常用图表类型逐个给出源码 + 渲染效果，方便直接复制。

1. 流程图（Flowchart）

源码：

```mermaid
flowchart TD
    A[开始] --> B{是否登录?}
    B -- 是 --> C[进入首页]
    B -- 否 --> D[跳转登录页]
    D --> E[输入账号密码]
    E --> B
    C --> F[结束]
```

效果：

flowchart TD
    A[开始] --> B{是否登录?}
    B -- 是 --> C[进入首页]
    B -- 否 --> D[跳转登录页]
    D --> E[输入账号密码]
    E --> B
    C --> F[结束]

2. 时序图（Sequence Diagram）

源码：

```mermaid
sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    用户->>浏览器: 输入网址
    浏览器->>服务器: HTTP 请求
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 渲染页面
```

效果：

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    用户->>浏览器: 输入网址
    浏览器->>服务器: HTTP 请求
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 渲染页面

3. 类图（Class Diagram）

源码：

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +bark()
    }
    class Cat {
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

效果：

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +bark()
    }
    class Cat {
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

4. 状态图（State Diagram）

源码：

```mermaid
stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 付款成功
    待支付 --> 已取消: 超时/取消
    已支付 --> 已发货: 商家发货
    已发货 --> 已完成: 确认收货
    已完成 --> [*]
    已取消 --> [*]
```

效果：

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 付款成功
    待支付 --> 已取消: 超时/取消
    已支付 --> 已发货: 商家发货
    已发货 --> 已完成: 确认收货
    已完成 --> [*]
    已取消 --> [*]

5. 甘特图（Gantt）

源码：

```mermaid
gantt
    title 项目排期
    dateFormat YYYY-MM-DD
    section 设计
    需求调研 :a1, 2026-01-01, 7d
    原型设计 :a2, after a1, 5d
    section 开发
    前端开发 :b1, after a2, 10d
    后端开发 :b2, after a2, 12d
```

效果：

gantt
    title 项目排期
    dateFormat YYYY-MM-DD
    section 设计
    需求调研 :a1, 2026-01-01, 7d
    原型设计 :a2, after a1, 5d
    section 开发
    前端开发 :b1, after a2, 10d
    后端开发 :b2, after a2, 12d

6. 饼图（Pie）

源码：

```mermaid
pie title 流量来源
    "搜索引擎" : 45
    "直接访问" : 30
    "社交媒体" : 20
    "其他" : 5
```

效果：

pie title 流量来源
    "搜索引擎" : 45
    "直接访问" : 30
    "社交媒体" : 20
    "其他" : 5

7. 实体关系图（ER Diagram）

源码：

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : includes
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        int id
        date created_at
    }
```

效果：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : includes
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        int id
        date created_at
    }

8. 用户旅程图（User Journey）

源码：

```mermaid
journey
    title 用户下单旅程
    section 浏览
      打开 App: 5: 用户
      搜索商品: 4: 用户
    section 下单
      加入购物车: 4: 用户
      支付: 2: 用户
    section 售后
      查看物流: 3: 用户
```

效果：

journey
    title 用户下单旅程
    section 浏览
      打开 App: 5: 用户
      搜索商品: 4: 用户
    section 下单
      加入购物车: 4: 用户
      支付: 2: 用户
    section 售后
      查看物流: 3: 用户

9. Git 图（Git Graph）

源码：

```mermaid
gitGraph
    commit
    branch develop
    checkout develop
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout develop
    merge feature
    checkout main
    merge develop
```

效果：

gitGraph
    commit
    branch develop
    checkout develop
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout develop
    merge feature
    checkout main
    merge develop

10. 表格（最通用的保底方案）

源码：

| 任务 | 负责人 | 进度 |
|:-----|:------:|-----:|
| 需求调研 | 张三 | 已完成 |
| 原型设计 | 李四 | 进行中，约 60% |
| 前端开发 | 王五 | 未开始 |

效果：

11. 综合示例：订单系统架构

源码：

```mermaid
flowchart LR
    subgraph 客户端
        A[Web 页面] --> B[移动 App]
    end
    subgraph 网关层
        C[API Gateway]
    end
    subgraph 服务层
        D[订单服务]
        E[支付服务]
        F[库存服务]
    end
    subgraph 存储层
        G[(MySQL)]
        H[(Redis)]
    end
    B --> C
    A --> C
    C --> D
    C --> E
    C --> F
    D --> G
    E --> H
    F --> G
```

效果：

flowchart LR
    subgraph 客户端
        A[Web 页面] --> B[移动 App]
    end
    subgraph 网关层
        C[API Gateway]
    end
    subgraph 服务层
        D[订单服务]
        E[支付服务]
        F[库存服务]
    end
    subgraph 存储层
        G[(MySQL)]
        H[(Redis)]
    end
    B --> C
    A --> C
    C --> D
    C --> E
    C --> F
    D --> G
    E --> H
    F --> G

12. 平台兼容性速查

⚠️ 表示部分版本支持或需插件；❌ 表示通常不支持。

13. 常见坑与技巧

需要我针对某个具体图表（比如甘特图排期或ER 图设计）给出更完整的实战示例吗？