Featured image of post Mermaid 图表测试

Mermaid 图表测试

测试博客的 Mermaid 图表支持功能

这篇文章用于测试博客的 Mermaid 图表支持功能。

流程图 (Flowchart)

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

序列图 (Sequence Diagram)

图表
服务器浏览器用户服务器浏览器用户访问网站发送请求返回数据展示页面
sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    
    用户->>浏览器: 访问网站
    浏览器->>服务器: 发送请求
    服务器-->>浏览器: 返回数据
    浏览器-->>用户: 展示页面

甘特图 (Gantt Chart)

图表
2024-01-072024-01-142024-01-212024-01-282024-02-042024-02-112024-02-182024-02-25需求分析 UI设计 原型制作 前端开发 后端开发 测试阶段 设计阶段开发阶段项目开发计划
gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    section 设计阶段
        需求分析    :done, des1, 2024-01-01, 2024-01-05
        UI设计      :done, des2, 2024-01-06, 2024-01-12
        原型制作    :active, des3, 2024-01-13, 2024-01-20
    section 开发阶段
        前端开发    :dev1, 2024-01-21, 2024-02-10
        后端开发    :dev2, 2024-01-25, 2024-02-15
        测试阶段    :test, 2024-02-16, 2024-02-25

状态图 (State Diagram)

图表
开始
暂停
继续
结束
空闲
运行
暂停
完成
stateDiagram-v2
    [*] --> 空闲
    空闲 --> 运行: 开始
    运行 --> 暂停: 暂停
    暂停 --> 运行: 继续
    运行 --> 完成: 结束
    完成 --> [*]

类图 (Class Diagram)

图表
Animal
+String name
+int age
+makeSound()
+move()
Dog
+String breed
+bark()
+wagTail()
Cat
+boolean indoor
+meow()
+purr()
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
        +move()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +boolean indoor
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat

饼图 (Pie Chart)

图表
35%25%20%10%10%编程语言使用比例JavaScriptPythonJavaGo其他
pie title 编程语言使用比例
    "JavaScript" : 35
    "Python" : 25
    "Java" : 20
    "Go" : 10
    "其他" : 10

ER图 (Entity Relationship Diagram)

图表
USERintidstringnamestringemailORDERintiddateorder_dateintuser_idLINE-ITEMintidintquantityintproduct_idintorder_idPRODUCTintidstringnamedecimalpriceplacescontainsordered in
erDiagram
    USER ||--o{ ORDER : places
    USER {
        int id
        string name
        string email
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int id
        date order_date
        int user_id
    }
    LINE-ITEM {
        int id
        int quantity
        int product_id
        int order_id
    }
    PRODUCT ||--o{ LINE-ITEM : "ordered in"
    PRODUCT {
        int id
        string name
        decimal price
    }

用户旅程图 (User Journey)

图表
用户
发现产品
发现产品
用户
浏览商品
浏览商品
用户
比较价格
比较价格
用户
阅读评价
阅读评价
购买决策
购买决策
用户
添加到购物车
添加到购物车
用户
查看购物车
查看购物车
用户
结算付款
结算付款
收货体验
收货体验
用户
等待发货
等待发货
用户
收到商品
收到商品
用户
使用体验
使用体验
用户购买流程
journey
    title 用户购买流程
    section 发现产品
        浏览商品: 5: 用户
        比较价格: 3: 用户
        阅读评价: 4: 用户
    section 购买决策
        添加到购物车: 5: 用户
        查看购物车: 3: 用户
        结算付款: 2: 用户
    section 收货体验
        等待发货: 2: 用户
        收到商品: 5: 用户
        使用体验: 5: 用户

以上就是各种类型的 Mermaid 图表示例。每个图表都应该可以在"图表"和"源码"之间切换显示。

评论
  • 按正序
  • 按倒序
  • 按热度
来发评论吧~
Powered by Waline v2.15.8