---
title: Mermaid 图表
slug: docs/cn/mermaid
createdAt: 2026-06-05T12:56:34.018Z
---

[Mermaid 图表](docId\:UfXtTrIshr1M7IAViCrWx)  使您能够直接从文本创建图表和可视化内容。它们有助于记录工作流程、流程、架构和交互，而无需依赖图像。

## 语法

Mermaid 图表使用标准的 fenced code block 语法。

````markdown
```mermaid
sequenceDiagram
    A->>B: message
```
````

## 示例

以下示例创建了一个 sequence diagram，用于展示 API 请求流程。

````markdown
```mermaid
sequenceDiagram
    autonumber
    participant C as Client
    participant A as API
    participant K as Cache
    participant D as DB

    C->>+A: GET /users/123
    A->>+K: lookup user:123
    alt cache hit
        K-->>A: cached user
    else cache miss
        K-->>A: null
        A->>+D: SELECT * FROM users WHERE id=123
        D-->>-A: user row
        A->>K: SET user:123
    end
    A-->>-C: 200 OK
```
````

以下示例创建了一个 flowchart。

````markdown
```mermaid
flowchart TD
    A[Start] --> B{Is config valid?}
    B -->|Yes| C[Load docs]
    B -->|No| D[Show error]
    C --> E[Start server]
    E --> F[Open browser]
    D --> G[Exit]
```
````