图表支持

MkDocs Material 通过 Mermaid.js 提供了强大的图表绘制功能。

流程图

基础流程图

graph TD
    A[开始] --> B{条件判断}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E

带样式的流程图

graph LR
    A[用户登录] --> B{验证成功?}
    B -->|是| C[进入首页]
    B -->|否| D[显示错误]
    D --> A
    C --> E[浏览内容]
    E --> F[退出登录]

    style A fill:#4CAF50,stroke:#333,stroke-width:2px
    style C fill:#2196F3,stroke:#333,stroke-width:2px
    style D fill:#f44336,stroke:#333,stroke-width:2px

复杂流程图

graph TB
    subgraph 客户端
        A[用户请求] --> B[前端处理]
    end

    subgraph 服务端
        B --> C[API Gateway]
        C --> D{路由}
        D -->|/users| E[用户服务]
        D -->|/orders| F[订单服务]
        D -->|/products| G[商品服务]
    end

    subgraph 数据层
        E --> H[(用户数据库)]
        F --> I[(订单数据库)]
        G --> J[(商品数据库)]
    end

    E --> K[返回数据]
    F --> K
    G --> K
    K --> L[前端渲染]

时序图

基础时序图

sequenceDiagram
    participant U as 用户
    participant W as 浏览器
    participant S as 服务器
    participant D as 数据库

    U->>W: 输入用户名密码
    W->>S: POST /login
    S->>D: 查询用户信息
    D-->>S: 返回用户数据
    S-->>W: 返回登录结果
    W-->>U: 显示登录成功

带激活框的时序图

sequenceDiagram
    autonumber
    participant C as Client
    participant A as API
    participant S as Service
    participant DB as Database

    C->>+A: 发送请求
    A->>+S: 调用服务
    S->>+DB: 查询数据
    DB-->>-S: 返回结果
    S-->>-A: 处理结果
    A-->>-C: 响应请求

类图

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
        +move()
    }

    class Dog {
        +String breed
        +bark()
        +fetch()
    }

    class Cat {
        +String color
        +meow()
        +climb()
    }

    class Bird {
        +double wingspan
        +fly()
        +sing()
    }

    Animal <|-- Dog
    Animal <|-- Cat
    Animal <|-- Bird

状态图

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

    note right of 处理中
        可能需要
        较长时间
    end note

甘特图

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :a1, 2024-01-01, 7d
    原型设计           :a2, after a1, 5d
    设计评审           :a3, after a2, 2d

    section 开发阶段
    前端开发           :b1, after a3, 14d
    后端开发           :b2, after a3, 14d
    接口联调           :b3, after b1, 5d

    section 测试阶段
    单元测试           :c1, after b3, 5d
    集成测试           :c2, after c1, 5d
    用户验收           :c3, after c2, 3d

饼图

pie title 技术栈使用比例
    "React" : 35
    "Vue" : 25
    "Angular" : 15
    "Svelte" : 10
    "其他" : 15

用户旅程图

journey
    title 用户购物体验
    section 浏览商品
      访问网站: 5: 用户
      搜索商品: 4: 用户
      查看详情: 5: 用户
    section 购买流程
      加入购物车: 4: 用户
      结算: 3: 用户
      支付: 5: 用户
    section 售后服务
      查看订单: 4: 用户
      申请退换: 3: 用户
      客服沟通: 4: 用户, 客服

ER 图

erDiagram
    USER ||--o{ ORDER : places
    USER {
        int id PK
        string username
        string email
        string password
        datetime created_at
    }

    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int id PK
        int user_id FK
        decimal total_amount
        string status
        datetime order_date
    }

    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal price
    }

    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    PRODUCT {
        int id PK
        string name
        string description
        decimal price
        int stock
    }

思维导图

mindmap
  root((网站架构))
    前端
      React
      Vue
      Angular
    后端
      Node.js
      Python
      Java
      Go
    数据库
      关系型
        MySQL
        PostgreSQL
      非关系型
        MongoDB
        Redis
    部署
      Docker
      Kubernetes
      CI/CD

架构图

flowchart TB
    subgraph CDN层
        CF[Cloudflare]
    end

    subgraph 负载均衡
        LB[Nginx Load Balancer]
    end

    subgraph 应用层
        APP1[App Server 1]
        APP2[App Server 2]
        APP3[App Server 3]
    end

    subgraph 缓存层
        REDIS[Redis Cluster]
    end

    subgraph 数据库层
        MASTER[(MySQL Master)]
        SLAVE1[(MySQL Slave 1)]
        SLAVE2[(MySQL Slave 2)]
    end

    CF --> LB
    LB --> APP1
    LB --> APP2
    LB --> APP3
    APP1 --> REDIS
    APP2 --> REDIS
    APP3 --> REDIS
    APP1 --> MASTER
    APP2 --> MASTER
    APP3 --> MASTER
    MASTER --> SLAVE1
    MASTER --> SLAVE2