3.2 KiB

Raw Blame History

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，复制粘贴 Mermaid 代码块内容。

方式 4: Obsidian / Notion

这些笔记软件原生支持 Mermaid 图表渲染。

方式 5: Typora

商业 Markdown 编辑器，内置 Mermaid 支持。

📝 Mermaid 语法概览

Graph (流程图)

graph TB
    A[开始] --> B{判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]

Sequence Diagram (时序图)

sequenceDiagram
    Alice->>Bob: 请求
    Bob-->>Alice: 响应

Class Diagram (类图)

classDiagram
    class Animal {
        +name: string
        +makeSound()
    }
    Animal <|-- Dog

🎨 颜色说明

架构图中使用的颜色分类：

🔵 蓝色 (e1f5ff): 前端层
🟡 黄色 (fff9c4): API 层
🟣 紫色 (f3e5f5): Service 层
🟢 绿色 (e8f5e9): Provider 层
🔴 粉色 (fce4ec): 数据库层
⚪ 灰色 (f5f5f5): 外部服务
🟠 橙色 (fff3e0): 适配器

🔧 修改建议

如需修改 UML 图：

找到对应的 \``mermaid` 代码块
使用 Mermaid Live Editor 在线编辑
验证语法正确后再更新到文档
保持一致的样式和颜色规范

📚 参考资源

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

3.2 KiB Raw Blame History