# UML 图表查看指南

本文档包含三个专业的 Mermaid UML 图表，用于描述 AI 模型能力配置与适配器架构。

## 📊 图表列表

### 1. 三层架构设计图 (Graph)
- **类型**: Flowchart (TB - Top to Bottom)
- **位置**: 文档第 23 行开始
- **内容**: 展示前端→API→Service→Provider→Database 的完整数据流
- **特点**: 
  - 6 个子图（前端、API、Service、Provider、数据库、外部服务）
  - 双模式流程（简单模式 + 高级模式）
  - 7 个适配器展示
  - 颜色分类标注

### 2. 时序图 (Sequence Diagram)
- **类型**: Sequence Diagram
- **位置**: 数据流转章节
- **内容**: 完整请求处理时序
- **参与者**: 
  - 前端 → API 层 → 适配器工厂 → 模型适配器
  - → AIService → AIHubMixProvider → PostgreSQL → AIHubMix API
- **特点**: 
  - 区分简单模式和高级模式
  - 彩色背景区域标注
  - 详细的方法调用和参数

### 3. 适配器类图 (Class Diagram)
- **类型**: Class Diagram
- **位置**: 适配器层章节
- **内容**: 适配器模式 UML 类图
- **包含**: 
  - 1 个抽象基类 (BaseAIAdapter)
  - 7 个具体适配器
  - 2 个参数类 (UnifiedVideoParams, UnifiedImageParams)
  - 1 个工厂类 (AIAdapterFactory)
- **特点**: 
  - 继承关系标注
  - 依赖关系标注
  - 方法签名详细

## 🖥️ 查看方式

### 方式 1: GitHub / GitLab
直接在 GitHub 或 GitLab 上查看 Markdown 文件，这两个平台都原生支持 Mermaid 渲染。

### 方式 2: VS Code
安装以下插件之一：
- **Markdown Preview Mermaid Support**
- **Mermaid Markdown Syntax Highlighting**
- **Markdown Preview Enhanced**

### 方式 3: 在线编辑器
访问 [Mermaid Live Editor](https://mermaid.live/)，复制粘贴 Mermaid 代码块内容。

### 方式 4: Obsidian / Notion
这些笔记软件原生支持 Mermaid 图表渲染。

### 方式 5: Typora
商业 Markdown 编辑器，内置 Mermaid 支持。

## 📝 Mermaid 语法概览

### Graph (流程图)
```mermaid
graph TB
    A[开始] --> B{判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
```

### Sequence Diagram (时序图)
```mermaid
sequenceDiagram
    Alice->>Bob: 请求
    Bob-->>Alice: 响应
```

### Class Diagram (类图)
```mermaid
classDiagram
    class Animal {
        +name: string
        +makeSound()
    }
    Animal <|-- Dog
```

## 🎨 颜色说明

架构图中使用的颜色分类：
- 🔵 **蓝色** (e1f5ff): 前端层
- 🟡 **黄色** (fff9c4): API 层
- 🟣 **紫色** (f3e5f5): Service 层
- 🟢 **绿色** (e8f5e9): Provider 层
- 🔴 **粉色** (fce4ec): 数据库层
- ⚪ **灰色** (f5f5f5): 外部服务
- 🟠 **橙色** (fff3e0): 适配器

## 🔧 修改建议

如需修改 UML 图：
1. 找到对应的 `\`\`\`mermaid` 代码块
2. 使用 [Mermaid Live Editor](https://mermaid.live/) 在线编辑
3. 验证语法正确后再更新到文档
4. 保持一致的样式和颜色规范

## 📚 参考资源

- [Mermaid 官方文档](https://mermaid.js.org/)
- [Mermaid 语法速查](https://mermaid.js.org/intro/syntax-reference.html)
- [Mermaid 示例库](https://mermaid.js.org/ecosystem/integrations-community.html)

---

**维护人**: Claude  
**最后更新**: 2026-02-13  
**文档版本**: v1.1