# Mermaid 图表尺寸优化测试

# 🎨 Mermaid 图表尺寸优化测试

本页面用于测试 Mermaid 图表的尺寸优化，确保低内容图表不会显示过大。

## 测试 1: 极简图表（2-3个节点）

### 1.1 简单流程图（2个节点）

✅ 预期：图表高度不超过 600px，居中显示

优化前：可能显示超大，占据整个屏幕

flowchart TD A[开始] --> B[结束]

### 1.2 简单流程图（3个节点）

✅ 预期：图表高度不超过 600px，居中显示

flowchart LR A[输入] --> B[处理] --> C[输出]

### 1.3 简单判断流程

✅ 预期：图表高度不超过 600px，居中显示

flowchart TD A[用户] --> B{登录?} B -->|是| C[首页] B -->|否| D[登录页]

## 测试 2: 中等复杂度图表（5-10个节点）

### 2.1 标准流程图

✅ 预期：图表高度不超过 600px，自适应内容

flowchart TD A[开始] --> B[输入数据] B --> C{数据有效?} C -->|是| D[处理数据] C -->|否| E[显示错误] D --> F[保存结果] E --> G[结束] F --> G

### 2.2 时序图

✅ 预期：图表高度不超过 600px

sequenceDiagram participant U as 用户 participant F as 前端 participant B as 后端 participant D as 数据库 U->>F: 提交表单 F->>B: 发送请求 B->>D: 查询数据 D-->>B: 返回结果 B-->>F: 返回响应 F-->>U: 显示结果

## 测试 3: 复杂图表（10+个节点）

### 3.1 复杂流程图

✅ 预期：图表高度限制在 600px，出现滚动条

优化：超过最大高度时，容器会出现垂直滚动条

flowchart TD A[开始] --> B[初始化] B --> C{检查权限} C -->|有权限| D[加载配置] C -->|无权限| E[显示错误] D --> F{配置有效?} F -->|是| G[连接数据库] F -->|否| H[使用默认配置] G --> I{连接成功?} I -->|是| J[加载数据] I -->|否| K[重试连接] K --> L{重试次数<3?} L -->|是| G L -->|否| M[连接失败] H --> J J --> N[处理数据] N --> O{处理成功?} O -->|是| P[显示结果] O -->|否| Q[显示错误] P --> R[记录日志] Q --> R E --> R M --> R R --> S[结束]

### 3.2 类图

✅ 预期：图表高度限制在 600px

classDiagram class Animal { +String name +int age +makeSound() +eat() } class Dog { +String breed +bark() +fetch() } class Cat { +String color +meow() +scratch() } class Bird { +boolean canFly +sing() +fly() } Animal <|-- Dog Animal <|-- Cat Animal <|-- Bird

## 测试 4: 横向图表（宽度测试）

### 4.1 横向流程图

✅ 预期：宽度自适应，出现横向滚动条

flowchart LR A[步骤1] --> B[步骤2] --> C[步骤3] --> D[步骤4] --> E[步骤5] E --> F[步骤6] --> G[步骤7] --> H[步骤8] --> I[步骤9] --> J[步骤10]

## 测试 5: 响应式适配

### 5.1 移动端适配

✅ 预期：在移动端（<768px）高度限制为 500px

请调整浏览器窗口大小测试

flowchart TD A[移动端] --> B[平板] B --> C[桌面端] A --> D[响应式] B --> D C --> D

## 📋 测试检查清单

- ✅ 极简图表（2-3节点）不会显示过大，高度合理
- ✅ 图表在容器中居中显示
- ✅ 中等复杂度图表显示正常，高度不超过 600px
- ✅ 复杂图表高度限制在 600px，出现滚动条
- ✅ 横向图表宽度自适应，出现横向滚动条
- ✅ 夜间模式下图表显示正常
- ✅ 移动端（<768px）高度限制为 500px
- ✅ 小屏幕（<480px）高度限制为 400px

## 🎯 优化说明

### 主要改进：

1. 最大高度限制：SVG 最大高度设置为 600px（桌面端）
2. 居中显示：使用 flexbox 让图表在容器中居中
3. 宽度自适应：使用 `width: auto !important` 让图表保持原始宽高比
4. 响应式适配：
   - 平板（<768px）：最大高度 500px
   - 手机（<480px）：最大高度 400px
5. 最小高度：容器最小高度 100px，避免空白过小

### CSS 关键属性：

    .mermaid-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100px;
    }

    .mermaid-container svg {
        max-width: 100%;
        max-height: 600px;
        height: auto;
        width: auto !important;
    }