说明

当前博客已经 启用 Mermaid 图表功能，可以直接在 Markdown 中绘制流程图、时序图、状态图、甘特图等可视化内容。

✅ Mermaid 是一个支持用纯文本描述流程的图表语言，非常适合在 Hexo + Obsidian 环境中做技术笔记和架构图展示。

基本语法示例

流程图

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

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

时序图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: 你好，Bob！
    Bob-->>Alice: 你好，Alice！

状态图


stateDiagram-v2
    [*] --> 初始化
    初始化 --> 运行中
    运行中 --> 完成
    完成 --> [*]

饼图

pie title 我最喜爱的编程语言
    "Python" : 45
    "JavaScript" : 25
    "Java" : 15
    "C++" : 10
    "其他" : 5

象限图

quadrantChart
title 促销活动效果分析
x-axis "低覆盖宣传" --> "高覆盖宣传"
y-axis "低参与度" --> "高参与度"
quadrant-1 "明星活动：保持投入"
quadrant-2 "潜力活动：需加大曝光"
quadrant-3 "待优化活动：重新评估"
quadrant-4 "高效活动：可稳健扩张"
"活动A": [0.75, 0.85]
"活动B": [0.45, 0.70]
"活动C": [0.25, 0.40]
"活动D": [0.80, 0.35]

甘特图


关键语法解读：

  • dateFormat：定义日期格式。
  • section**​：将任务分组，如“需求阶段”、“开发阶段”。
  • ​任务定义​：格式为 任务名称 : [状态, ] 别名, 开始时间, 持续时间。
    • 状态​：done（已完成），active（进行中），crit（关键任务）。​
    • 别名​：任务的标识符，可用于后续任务引用，如 after des1表示该任务在 des1之后开始。
    • 时间​：可以是绝对日期（2024-12-01），也可以是相对时间（after 某任务, 3d）。
      gantt
    title 项目开发时间线
    dateFormat  YYYY-MM-DD
    section 需求阶段
        需求分析       :done,    des1, 2024-12-01, 2024-12-07
        需求评审       :active,  des2, after des1, 3d
    section 开发阶段
        技术方案设计   :         des3, after des2, 5d
        编码实现       :         des4, after des3, 10d
    section 测试阶段
        功能测试       :         des5, after des4, 7d
        上线部署       :         des6, after des5, 2d

类图

关键语法解读：​

  • ​定义类​：使用 class关键字。类成员可用 {}包裹。
  • 成员可见性​：+表示公有（Public），-表示私有（Private），#表示受保护（Protected）。
  • ​类关系​：
    • ​继承​：<|--（如 Dog继承自 Animal）。
    • ​组合​：*--（强的拥有关系，部分与整体共存亡）。
    • 聚合​：o--（弱的拥有关系，部分可独立于整体）。
    • 关联​：-->（一个类知道另一个类）。
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +String color
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

实体关系（ER图）

关键语法解读：​

  • ​定义实体和属性​：实体名称通常首字母大写。属性可以在实体下方的 {}块中定义，PK表示主键（Primary Key）。

  • ​关系语法​：实体A 基数A--基数B 实体B : "关系描述"。

    • ​基数符号​：表示实体间的数量关系。

      • ||表示“一且只有一个”（恰好一个）。
      • o|表示“零或一个”。
      • }o表示“零或多个”。
      • }|表示“一或多个”。

    • 例如，CUSTOMER ||--o{ ORDER : "places"表示一个客户（CUSTOMER）可以下多个订单（ORDER）（“零或多个”），而一个订单只属于一个客户（“恰好一个”）。

erDiagram
    CUSTOMER ||--o{ ORDER : "places"
    ORDER ||--|{ ORDER_ITEM : "contains"
    PRODUCT ||--|{ ORDER_ITEM : "included_in"

    CUSTOMER {
        string customer_id PK
        string name
        string email
    }
    ORDER {
        string order_id PK
        string customer_id FK
        date order_date
    }
    PRODUCT {
        string product_id PK
        string product_name
        decimal price
    }
    ORDER_ITEM {
        string order_id FK
        string product_id FK
        int quantity
    }