Turn Everyday Tasks into Clear Diagrams with Mermaid

In the previous article I introduced how to draw flowcharts with Mermaid. Mermaid is a text‑based diagramming tool that helps users quickly generate various charts, widely used in software development, project management, data visualization, and beyond.

Mermaid can also be applied to everyday life to visualise complex concepts, processes, and relationships. The following real‑life examples show how to use Mermaid to create different types of diagrams.

1. Flowchart: Making Breakfast

A flowchart represents a process or workflow, helping us understand each step needed to complete a task. The example below models the steps for preparing a fried egg.

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

Explanation: This flowchart shows each step of making a fried egg and clearly indicates the decision based on whether eggs are available.

2. Sequence Diagram: Family Communication Process

A sequence diagram displays how participants interact and the order of events. The example models a family planning a weekend gathering.

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

Explanation: The diagram shows how information flows among family members from proposal to confirmation, helping to understand interaction order.

3. Class Diagram: Home‑Goods Management System

A class diagram depicts classes and their relationships. Here we model household items and their attributes.

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

Explanation: This diagram shows basic attributes of furniture items such as sofas and tables, illustrating their classification.

4. State Diagram: Elevator Operation

A state diagram describes system states and transitions. The example visualises an elevator’s states.

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

Explanation: The diagram shows how the elevator moves between idle, moving, and fault states, clarifying behaviour under different conditions.

5. ER Diagram: Library Management System

An entity‑relationship diagram describes entities and their relationships. This example models books, users, and borrowing records.

<code>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
</code>

Explanation: The ER diagram helps understand how users, books, and borrowing records relate, which is valuable for database design.

6. Gantt Chart: Family Vacation Plan

A Gantt chart is used for project scheduling. The example arranges tasks for a family holiday.

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

Explanation: The Gantt chart clearly shows start and end dates for each holiday activity, aiding efficient time management.

7. User Journey Diagram: Shopping Website Experience

A user journey diagram maps a user’s interaction with a product or service. This example follows a shopper from browsing to purchase.

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

Explanation: The diagram helps identify pain points and key touchpoints, enabling optimisation of the shopping experience.

8. Git Branch Diagram: Team Collaboration Workflow

A Git branch diagram visualises version‑control branching structures, assisting developers in understanding merges and workflows.

<code>gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
</code>

Explanation: The diagram shows how branches are created, merged, and deleted, helping team members avoid conflicts and keep the project tidy.

9. Pie Chart: Family Budget Allocation

A pie chart displays the proportion of each part to the whole. Here it visualises a household budget.

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

Explanation: The chart helps family members understand spending ratios and allocate funds responsibly.

10. Mindmap: Family Planning

A mindmap shows relationships among ideas, tasks, or concepts. This example organises family activities and goals.

<code>mindmap
  root
    子任务1
      子任务1.1
      子任务1.2
    子任务2
      子任务2.1
</code>

Explanation: The mindmap clarifies tasks and priorities, ensuring smooth execution of family plans.

13. Quadrant Chart: Goal Setting

A quadrant chart divides data points into four areas to quickly analyse performance. The example evaluates marketing campaigns by reach and engagement.

<code>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]
</code>

Explanation: The chart positions each campaign in four quadrants, helping decide which actions to take.

13. XY Chart: Family Financial Tracking

An XY chart shows the relationship between two variables. This example tracks monthly sales revenue.

<code>xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)"
    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]
</code>

Explanation: The combined bar and line chart visualises monthly revenue trends, aiding analysis of performance and strategy.

14. Block Diagram: Home Appliance Connections

A block diagram shows modules and their relationships. This example illustrates how various home devices connect in an automation system.

<code>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
</code>

Explanation: The diagram visualises how devices such as lights, air‑conditioners, and smart locks interact through a central controller.

15. Packet Diagram: Home Network Architecture

A packet diagram depicts the structure of a data packet and its transmission path, helping understand network communication details.

<code>---
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)"
</code>

Explanation: The diagram clarifies each field of a TCP packet and its role in ensuring correct ordering, acknowledgement, and error handling during transmission.

Mermaid is a highly flexible and practical visualisation tool that can be used not only in professional domains but also to solve everyday visualisation challenges. Give it a try!