⏱️ 时序图详解

Admin ·

目
录

解析中...

# ⏱️ 时序图详解

>i **在编辑器中输入 \`\`\`sequence 代码块来绘制时序图。下方展示写法和渲染效果。**

## 1. 基本语法

| 语法 | 含义 |
|------|------|
| `A->B: 消息` | 实线箭头（请求） |
| `A-->B: 消息` | 虚线箭头（返回） |
| `Note over A: 注释` | 注释标注框 |
| `A->A: 消息` | 自身调用 |

## 2. 基本请求-响应

**使用方式：用 \`\`\`sequence 包裹以下内容**

```text
客户端->服务器: 发送请求
服务器->数据库: 查询数据
数据库-->服务器: 返回结果
服务器-->客户端: 响应数据
```

**渲染效果：**

```sequence
客户端->服务器: 发送请求
服务器->数据库: 查询数据
数据库-->服务器: 返回结果
服务器-->客户端: 响应数据
```

## 3. 自身调用

**使用方式：用 \`\`\`sequence 包裹以下内容**

```text
服务器->服务器: 参数校验
服务器->服务器: 日志记录
```

**渲染效果：**

```sequence
服务器->服务器: 参数校验
服务器->服务器: 日志记录
```

## 4. Note 注释标注

**使用方式：用 \`\`\`sequence 包裹以下内容**

```text
客户端->服务器: 登录请求
Note over 服务器: 验证用户名和密码
服务器-->客户端: 登录成功
```

**渲染效果：**

```sequence
客户端->服务器: 登录请求
Note over 服务器: 验证用户名和密码
服务器-->客户端: 登录成功
```

## 5. 完整场景

**使用方式：用 \`\`\`sequence 包裹以下内容**

```text
浏览器->DNS: 域名解析
DNS-->浏览器: 返回IP
浏览器->服务器: HTTP请求
服务器->数据库: 查询
数据库-->服务器: 数据
服务器-->浏览器: HTML
```

**渲染效果：**

```sequence
浏览器->DNS: 域名解析
DNS-->浏览器: 返回IP
浏览器->服务器: HTTP请求
服务器->数据库: 查询
数据库-->服务器: 数据
服务器-->浏览器: HTML
```