Mermaid图表教程：图表应用实例分析

1- Mermaid 图表教程：图表应用实例分析

1.1- 前言

上一篇文章 我介绍了如何通过 Mermaid 代码绘制流程图。其实 Mermaid 是一个基于文本的图形绘制工具，能够帮助用户通过简单的文本代码，快速生成各种类型的图表。它广泛应用于软件开发、项目管理、数据可视化等领域，但它的应用场景远远不止于此。

在日常生活中，我们也可以利用 Mermaid 来帮助我们可视化各种复杂的概念、流程和关系。本文将通过多个实际生活中的案例，展示如何使用 Mermaid 绘制不同类型的图表。

1.2- 流程图（Flowchart）：制作早餐

流程图是用来表示一个过程或工作流的图表。它帮助我们理解如何一步步完成任务。在日常生活中，制作早餐是一个常见的例子。

flowchart TD
    A[开始] --> B{是否有鸡蛋?}
    B -->|是| C[准备鸡蛋]
    B -->|否| D[去买鸡蛋]
    C --> E[加热平底锅]
    D --> E
    E --> F[打蛋入锅]
    F --> G[翻面]
    G --> H[完成]

说明： 这个流程图展示了制作煎蛋的每个步骤，清晰地表示了如何根据是否有鸡蛋来做决定。流程图帮助我们理清每个环节的执行顺序，避免遗漏。

1.3- 时序图（Sequence Diagram）：家庭成员的沟通流程

时序图展示了系统中各参与者之间如何相互作用，以及事件的发生顺序。举个例子，假设我们想要安排一次家庭聚会。

sequenceDiagram
    participant A as 爸爸
    participant B as 妈妈
    participant C as 孩子
    A->>B: 提议周末家庭聚会
    B->>C: 向孩子询问意见
    C->>B: 孩子表示同意
    B->>A: 妈妈确认计划
    A->>B: 预定场地
    A->>C: 告知孩子聚会详情

说明： 时序图展示了家庭成员之间如何传递信息，展示了从提议到确认的沟通过程。通过时序图，我们可以理解参与者之间的互动顺序，帮助协调工作。

1.4- 类图（Class Diagram）：家居用品管理系统

类图用于展示系统中的类及其相互关系。例如，在家庭中，我们可能需要管理家居用品，通过类图来描述家居物品及其属性。

classDiagram
    class Furniture {
        +String name
        +String material
        +int price
    }
    class Sofa {
        +int seats
    }
    class Table {
        +String shape
    }
    Furniture <|-- Sofa
    Furniture <|-- Table

说明： 这个类图展示了家居物品（如沙发和桌子）的基本属性。类图帮助我们组织物品的不同类型，清晰地展示它们的分类和属性。

1.5- 状态图（State Diagram）：电梯运行状态

状态图用于描述系统中的不同状态及状态之间的转换。假设我们家里有一部电梯，可以通过状态图展示电梯的工作状态。

stateDiagram-v2
    [*] --> 待机
    待机 --> [*]
    待机 --> 运动
    运动 --> 待机
    运动 --> 故障
    故障 --> [*]

说明： 状态图展示了电梯如何在不同状态之间转换，如待机、运动、故障等。这种图有助于理解电梯在不同情况下的行为和反应。例如，电梯从待机状态进入运动状态，或在运动过程中发生故障后进入故障状态，最后可能返回待机状态。通过这种图表，我们能够清晰地了解电梯各个工作状态的转换过程。

1.6- 实体关系图（ER Diagram）：图书馆管理系统

实体关系图用于描述系统中的实体及它们之间的关系。例如，在家庭图书馆管理系统中，可以使用 ER 图来展示图书、用户和借阅记录之间的关系。

erDiagram
    BOOK {
        string title
        string author
        int isbn
    }
    USER {
        string name
        int id
    }
    BORROW {
        string borrowDate
        string returnDate
    }
    USER ||--o{ BORROW : borrows
    BOOK ||--o{ BORROW : is_borrowed

说明： ER 图帮助我们理解图书馆中数据实体之间的关系，例如用户借书的过程。这种图对于设计和管理数据库系统非常有帮助。

1.7- 甘特图（Gantt Chart）：家庭假期计划

甘特图广泛用于项目管理，它能够帮助我们管理项目任务的时间安排。假设我们计划一个家庭假期，甘特图可以帮助我们安排不同的活动和任务。

gantt
    title 家庭假期计划
    dateFormat  YYYY-MM-DD
    section 准备阶段
    预定机票  :a1, 2025-07-01, 2d
    安排住宿  :after a1, 3d
    section 旅行阶段
    旅游景点  :2025-07-10, 5d
    休闲活动  :2025-07-15, 3d

说明： 甘特图清晰展示了各个任务的开始和结束时间，帮助我们确保假期活动的顺利进行。它能够帮助我们合理安排时间，提高效率。

1.8- 用户旅程图（User Journey Diagram）：购物网站的用户体验

用户旅程图帮助我们理解用户与产品或服务的互动过程。在购物网站的例子中，我们可以用它来展示用户从浏览商品到完成购买的过程。

journey
    title 用户购物旅程
    section 购物开始
      用户浏览商品: 5: 选择商品并查看详情
    section 添加购物车
      用户加入购物车: 4: 添加商品到购物车
    section 付款流程
      用户填写地址: 3: 填写收货地址
      用户付款: 5: 完成付款
    section 订单完成
      用户确认收货: 5: 完成收货并评价商品

说明： 用户旅程图帮助我们识别用户的痛点和关键触点，优化购物体验。通过分析用户旅程，我们可以提高产品的易用性和用户满意度。

1.9- Git 分支图（Git Branch Diagram）：团队协作流程

Git 分支图是用于展示版本控制中的分支结构。在团队开发项目中，Git 分支图帮助开发人员理解不同分支的合并和工作流。

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

说明： Git 分支图展示了如何创建、合并和删除分支，帮助团队成员理解代码的演变过程。它帮助团队成员避免冲突，保持项目的整洁。

1.10- 饼图（Pie Chart）：家庭预算分配

饼图用于展示不同部分占整体的比例。在家庭预算的管理中，我们可以使用饼图展示各项开支的比例。

pie
    title 家庭预算
    " 食品 " : 30
    " 住房 " : 40
    " 教育 " : 20
    " 娱乐 " : 10

说明：饼图帮助我们了解不同支出项的比例，例如食品、住房、教育和娱乐等。通过饼图，家庭成员可以合理分配资金，避免过度消费。

1.11- 思维导图（Mindmap）：家庭计划

思维导图用于展示想法、任务或概念之间的关系。在家庭计划中，我们可以使用思维导图来整理活动、任务和目标。

mindmap
  root
    子任务 1
      子任务 1.1
      子任务 1.2
    子任务 2
      子任务 2.1

说明：思维导图展示了家庭计划中的各项任务及其优先级。它帮助家庭成员理清思路，确保计划的顺利执行。

1.12- 象限图（Quadrant Chart）：目标设定

象限图（Quadrant Chart）是一种通过将数据点分布在四个象限中，帮助我们快速分析数据的工具。它非常适合用来展示和比较不同项目或活动在两个变量（如影响力、参与度等）上的表现。在营销活动分析中，象限图可以帮助我们根据活动的覆盖率（Reach）和参与度（Engagement）来做出战略决策。

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

说明：在这个象限图中，我们展示了不同营销活动在覆盖率和参与度两个维度上的位置。象限图将图表分为四个区域，帮助我们更好地理解每个活动的表现。

1.13- 坐标轴图（XY Chart）：家庭财务跟踪

坐标轴图（XY Chart）适用于展示两个变量之间的关系。我们可以使用坐标轴图来跟踪月度销售收入的变化趋势。

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

说明：坐标轴图展示了每个月销售收入的变化趋势。通过该图表，我们可以清晰地看到每个月的收入情况，并分析收入波动的原因。图中的柱状图和折线图共同展示了销售收入的月度表现，从而帮助我们评估年度销售目标的达成情况，并优化销售策略。

1.14- 块图（Block Diagram）：家居电器连接

块图用于表示系统中的各个模块和它们之间的关系。在家居自动化系统中，块图可以帮助我们展示不同家居电器的连接方式。

block-beta
    columns 3
    doc>"Document"]:3
    space down1<[" "]>(down) space

  block:e:3
          l["left"]
          m("A wide one in the middle")
          r["right"]
  end
    space down2<[" "]>(down) space
    db[("DB")]:3
    space:3
    D space C
    db --> D
    C --> db
    D --> C
    style m fill:#d6d,stroke:#333,stroke-width:4px

说明：块图展示了系统中不同模块之间的关系和交互。在家居自动化系统中，通过块图，我们可以直观地看到各个家居设备（如电灯、空调、智能门锁等）如何通过中央控制系统连接和协同工作。

1.15- 数据包图（Packet Diagram）：家庭网络架构

数据包图用于表示数据包的结构以及数据在网络中的传输过程。在家庭网络管理中，数据包图可以帮助我们深入理解网络通信的细节，特别是数据如何通过不同设备、路由器和互联网进行传输。

---
title: "TCP Packet"
---
packet-beta
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106: "URG"
  107: "ACK"
  108: "PSH"
  109: "RST"
  110: "SYN"
  111: "FIN"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent Pointer"
  160-191: "(Options and Padding)"
  192-255: "Data (variable length)"

说明：数据包图帮助我们理解每个数据包的组成部分及其在网络传输中的作用。图中的各个字段代表了 TCP 协议中的关键参数，例如源端口、目标端口、序列号、确认号等。这些字段用于确保数据在传输过程中正确排序、确认接收、并处理网络中的不同状态。

1.16- Mermaid 图表在线工具

很多在线网站都支持 Mermaid 图的直接绘制，比如：

注意：有些图暂时不支持中文，如果出现报错，可以适当调整。

1.17- 结语

Mermaid 是一个极具灵活性和实用性的可视化工具，不仅可以用于专业领域的图表绘制，还能帮助我们在日常生活中解决各种可视化问题。快去试试吧~