全栈攻城狮

Appearance

Mermaid 图表 ​

架构图、流程图、时序图是技术演示的核心表达。Slidev 内置 Mermaid，用文本描述即可渲染矢量图表，随 Markdown 一起纳入版本管理。

Mermaid 集成 ​

在代码块中标注 mermaid 语言即自动渲染为图表：

markdown
```mermaid
flowchart TD
    A[开始] --> B{是否通过?}
    B -->|是| C[通过]
    B -->|否| D[拒绝]
```

渲染结果是一张由文本驱动的矢量流程图，随幻灯片缩放不失真。

流程图（flowchart） ​

markdown
```mermaid
flowchart LR
    A[客户端] --> B[网关]
    B --> C[服务 A]
    B --> D[服务 B]

方向关键字：`TD`（从上到下）、`LR`（从左到右）、`BT`、`RL`。节点形状：`[矩形]`、`(圆角)`、`{菱形}`、`((圆形))`。连线标签用 `-->|文字|`。

## 时序图（sequenceDiagram）

```mermaid
sequenceDiagram
    participant 浏览器
    participant 网关
    participant 服务
    浏览器->>网关: 请求
    网关->>服务: 转发
    服务-->>浏览器: 响应
markdown
```mermaid
sequenceDiagram
    participant 浏览器
    participant 网关
    participant 服务
    浏览器->>网关: 请求
    网关->>服务: 转发
    服务-->>浏览器: 响应

箭头类型：`->`（实线）、`-->`（虚线）、`->>`（实线箭头）、`-->>`（虚线箭头）。`participant` 声明参与者并起别名。

## 甘特图（gantt）

```mermaid
gantt
    title 项目排期
    dateFormat  YYYY-MM-DD
    section 开发
    需求分析      :done, a1, 2026-08-01, 7d
    编码实现      :active, a2, after a1, 14d
    section 测试
    功能测试      :crit, a3, after a2, 7d
markdown
```mermaid
gantt
    title 项目排期
    dateFormat  YYYY-MM-DD
    section 开发
    需求分析      :done, a1, 2026-08-01, 7d
    编码实现      :active, a2, after a1, 14d

甘特图适合讲排期与里程碑：`done`（已完成）、`active`（进行中）、`crit`（关键路径），`after a1` 表示依赖关系。

## 类图（classDiagram）

```mermaid
classDiagram
    class Animal {
        +String name
        +eat() void
    }
    class Dog {
        +bark() void
    }
    Animal <|-- Dog
markdown
```mermaid
classDiagram
    class Animal {
        +String name
        +eat() void
    }
    Dog --|> Animal

类图适合讲面向对象设计：`+` 表示公开成员、`-` 表示私有；`<|--` 表示继承，`*--` 表示组合，`o--` 表示聚合。

## 状态图（stateDiagram-v2）

```mermaid
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中 : 开始
    处理中 --> 已完成 : 成功
    处理中 --> 失败 : 异常
    失败 --> 待处理 : 重试
    已完成 --> [*]
markdown
```mermaid
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中
    处理中 --> 已完成

状态图适合讲状态机：`[*]` 表示初始/终止状态，`:` 后写转移触发条件。

## 图表类型速查

| 图表 | 关键字 | 典型用途 |
|------|--------|---------|
| 流程图 | `flowchart` | 流程、决策树 |
| 时序图 | `sequenceDiagram` | 交互、调用链 |
| 甘特图 | `gantt` | 排期、里程碑 |
| 类图 | `classDiagram` | 类关系、建模 |
| 状态图 | `stateDiagram-v2` | 状态机 |
| 饼图 | `pie` | 占比统计 |
| ER 图 | `erDiagram` | 数据库建模 |
| 思维导图 | `mindmap` | 内容梳理 |

## PlantUML 备选方案

Slidev 支持通过 Mermaid 之外的 **PlantUML** 渲染图表（需安装插件并配置服务器）：

```yaml
# 安装 @slidev/addon-plantuml 后启用
addons:
  - slidev-addon-plantuml
markdown
```plantuml
@startuml
Alice -> Bob: 你好
@enduml

选择建议：Mermaid 开箱即用、无需外部服务，绝大多数场景够用；PlantUML 语法更丰富（尤其 UML 建模），但依赖服务器渲染，仅在需要高级 UML 时选用。

## 文本驱动图表最佳实践

| 实践 | 说明 |
|------|------|
| 图随内容走 | 图表与讲解文字同页，避免前后翻页对照 |
| 节点命名规范 | 用语义化名称（如 `服务A`），不用 `A` `B` 缩写 |
| 控制节点数量 | 单图 6-10 个节点为宜，过多拆分成多图 |
| 复用公共图 | 常驻架构图放入导入的公共文件（见「导入幻灯片」） |
| 文字带图 | 关键结论同时用文字表述，保证可读性 |
| 配合点击动画 | 复杂图用 v-click 分步呈现，逐层讲解 |

Mermaid 让图表从"画"变成"写"，配合版本管理与代码审查，是技术演示中信息密度最高的表达方式。