Mermaid 图表示例

流程图

流程图用于展示算法或业务流程的步骤和决策逻辑。

flowchart TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作]
    B -->|否| D[执行其他操作]
    C --> E[结束]
    D --> E

时序图

时序图用于展示对象之间的消息交互顺序。

sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    participant 数据库

    用户->>前端: 点击登录
    前端->>后端: 发送登录请求
    后端->>数据库: 查询用户信息
    数据库-->>后端: 返回用户数据
    后端-->>前端: 返回登录结果
    前端-->>用户: 显示登录状态

类图

类图用于展示系统中的类结构及其关系。

classDiagram
    class 动物 {
        +String 名称
        +int 年龄
        +吃()
        +睡()
    }

    class 狗 {
        +String 品种
        +吠叫()
        +接飞盘()
    }

    class 猫 {
        +String 毛色
        +喵喵叫()
        +抓老鼠()
    }

    动物 <|-- 狗
    动物 <|-- 猫

状态图

状态图用于展示对象在其生命周期中的状态变化。

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 用户支付
    待支付 --> 已取消: 用户取消
    已支付 --> 已发货: 商家发货
    已发货 --> 已签收: 用户签收
    已签收 --> 已完成: 确认收货
    已取消 --> [*]
    已完成 --> [*]

饼图

饼图用于展示各部分占总体的比例关系。

pie title 编程语言使用比例
    "JavaScript" : 35
    "Python" : 25
    "Java" : 20
    "Go" : 12
    "其他" : 8