🎨 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

📋 测试检查清单

🎯 优化说明

主要改进：

  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;
}