开发 网站 团队营销推广方案模板

Mermaid学习第二部

Mermaid简介

Mermaid 是一种基于文本的图表生成工具，支持多种类型的图表，包括流程图（flowchart）、时序图（sequence diagram）、甘特图（gantt）等。它广泛用于文档、博客、Wiki、笔记系统中（如 Typora、VS Code、Obsidian 等）。
Mermaid 使用简单的 Markdown 风格语法来定义图形，并通过 JavaScript 引擎渲染为 SVG 图像。

基本结构

Mermaid 图表以 graph 开头，后跟方向（如 TD 表示 Top Down），然后是节点和连接线。

graph TDA[开始] --> B{条件判断}B -- 是 --> C[执行操作1]B -- 否 --> D[执行操作2]

常见图表类型

1. 流程图（Flowchart）

方向标识

• TB：Top to Bottom（默认）
• TD：Top Down
• LR：Left to Right
• RL：Right to Left

节点类型

类型	语法	示例
圆角矩形	(text)	A(Start)
矩形	[text]	B[Process]
圆形	((text))	C((Decision))
子流程	{text}	D{Subroutine}
六边形	[[text]]	E[[Database]]

连接线：

类型	语法	示例
箭头	–>	A --> B
带文字箭头	– text -->	A – Yes --> B
实线	—	A — B
虚线	-.-	A -.- B
粗线	===	A === B

示例

graph LRA[开始] --> B{是否继续?}B -- 是 --> C[继续执行]B -- 否 --> D[结束]C --> E[下一步]D --> F((结束))

2. 时序图（Sequence Diagram）

用于表示对象之间的交互顺序。

关键元素：

• 参与者（Actor）
• 激活条（Activation）
• 消息（Message）

sequenceDiagramparticipant Aliceparticipant BobAlice->>Bob: Hello Bob, how are you?Bob-->>Alice: I am fine, thanks!Alice->>Bob: Want to go for lunch?Bob-->>Alice: Sure!

3. 甘特图（Gantt Chart）

用于项目管理和时间安排。

gantttitle Project TimelinedateFormat  YYYY-MM-DDsection Phase 1Task A        :a1, 2025-04-01, 30dTask B        :a2, after a1, 20dsection Phase 2Task C        :a3, after a2, 15dTask D        :a4, 2025-05-01, 10d

4. 饼图（Pie Chart）

用于展示比例关系。

示例：

pietitle Tasks Distribution"Task A" : 30"Task B" : 20"Task C" : 50

5. 用户旅程图（User Journey）

用于描述用户与系统的交互路径。

journeytitle My Working Daysection MorningWake up : 5Eat breakfast : 3section WorkCode : 6Meeting : 2section EveningDinner : 2Sleep : 6

6. 实体关系图（Entity Relationship Diagram）

用于数据库设计。

erDiagramCUSTOMER ||--o{ ORDER : placesORDER ||--|{ LINE_ITEM : containsCUSTOMER }|..|{ DELIVERY : delivers

7. 需求图（Requirement Diagram）

用于需求管理。

requirementDiagramrequirement test_req {id: 1text: the test shall passrisk: highverifymethod: test}element test_entity {type: simulation}test_entity - satisfies -> test_req

四、复杂案例实战

案例一：多分支逻辑流程图

graph TDA[开始] --> B{登录验证}B -- 成功 --> C[进入主页]B -- 失败 --> D[显示错误信息]D --> E[重新登录]C --> F[选择功能]F --> G{是否有权限?}G -- 是 --> H[执行操作]G -- 否 --> I[提示无权限]

案例二：系统架构图

graph TDA[前端] -->|API调用| B(后端)B -->|数据库查询| C[MySQL]B -->|缓存| D[Redis]B -->|消息队列| E[Kafka]E --> F[异步处理服务]

案例三：微服务架构图

graph LRA[网关] --> B[认证服务]A --> C[订单服务]A --> D[支付服务]B --> E[用户中心]C --> F[库存服务]D --> G[银行接口]F --> H[仓储系统]

📝 五、高级技巧与最佳实践

1. 使用子图（Subgraphs）

graph TDsubgraph FrontendA[React] --> B[Redux]endsubgraph BackendC[Node.js] --> D[MongoDB]endB --> C

2. 自定义样式

classDef default fill:#f9f9f9,stroke:#333;
classDef highlight fill:#ffddbb,stroke:#f00;graph TDA[开始] --> B[处理]class A,B highlight;

3. 注释与分组

graph TD%% This is a commentA[开始] --> B[步骤1]B --> C[步骤2]style C fill:#f00,color:#fff;

复杂图

graph TD%% 定义节点A[Client]H[Session]C[Leader]D[Follower 1]E[Follower 2]F[Observer]B[ZooKeeper<br>Ensemble]G[(ZNode<br>树形数据模型)]%% 客户端与集群连接A --> HH --> CH --> DH --> EH --> F%% 集群节点关系B --> CB --> DB --> EB --> F%% 节点通信C -->|事务同步| DC -->|事务同步| ED -->|心跳响应| CE -->|心跳响应| C%% 子图定义subgraph "ZooKeeper集群"direction TBCDEFend%% 数据模型关联C -.-> GD -.-> GE -.-> GF -.-> G%% 样式定义style A fill:#f9f,stroke:#333,stroke-width:1pxstyle C fill:#0f0,stroke:#333,stroke-width:1pxstyle D fill:#0f0,stroke:#333,stroke-width:1pxstyle E fill:#0f0,stroke:#333,stroke-width:1pxstyle F fill:#ff0,stroke:#333,stroke-width:1pxstyle G fill:#88f,stroke:#333,stroke-width:1pxstyle H fill:#fff5b4,stroke:#333,stroke-width:1pxstyle B fill:#e6e6e6,stroke:#999,stroke-width:1px,font-weight:bold%% 注释标签（优化版）classDef noteStyle fill:#f8f8f8,stroke:#aaa,stroke-width:1px,font-size:12pxnote1([客户端通过Session连接集群，\n发送读写请求]):::noteStylenote2([主节点处理所有写请求，\n协调集群状态]):::noteStylenote3([从节点同步事务，参与选举]):::noteStylenote4([观察节点扩展读性能，\n不参与投票]):::noteStylenote5([树形数据结构，支持临时/持久节点，\n版本号保证数据一致性]):::noteStyle%% 注释定位note1 -->|1cm| Anote2 -->|1cm| Cnote3 -->|1cm| Dnote4 -->|1cm| Fnote5 -->|1cm| G

graph TD%% 定义节点A[Client]H[Session]C[Leader]D[Follower 1]E[Follower 2]F[Observer]B[ZooKeeper<br>Ensemble]G[(ZNode<br>树形数据模型)]%% 客户端与集群连接A --> HH --> CH --> DH --> EH --> F%% 集群节点关系B --> CB --> DB --> EB --> F%% 节点通信C -->|事务同步| DC -->|事务同步| ED -->|心跳响应| CE -->|心跳响应| C%% 子图定义subgraph "ZooKeeper集群"direction TBCDEFend%% 数据模型关联C -.-> GD -.-> GE -.-> GF -.-> G%% 样式定义style A fill:#f9f,stroke:#333,stroke-width:1pxstyle C fill:#0f0,stroke:#333,stroke-width:1pxstyle D fill:#0f0,stroke:#333,stroke-width:1pxstyle E fill:#0f0,stroke:#333,stroke-width:1pxstyle F fill:#ff0,stroke:#333,stroke-width:1pxstyle G fill:#88f,stroke:#333,stroke-width:1pxstyle H fill:#fff5b4,stroke:#333,stroke-width:1pxstyle B fill:#e6e6e6,stroke:#999,stroke-width:1px,font-weight:bold%% 注释标签（优化版）classDef noteStyle fill:#f8f8f8,stroke:#aaa,stroke-width:1px,font-size:12pxnote1([客户端通过Session连接集群，\n发送读写请求]):::noteStylenote2([主节点处理所有写请求，\n协调集群状态]):::noteStylenote3([从节点同步事务，参与选举]):::noteStylenote4([观察节点扩展读性能，\n不参与投票]):::noteStylenote5([树形数据结构，支持临时/持久节点，\n版本号保证数据一致性]):::noteStyle%% 注释定位note1 -->|1cm| Anote2 -->|1cm| Cnote3 -->|1cm| Dnote4 -->|1cm| Fnote5 -->|1cm| G

ZooKeeper 架构 Mermaid 图解详解

以下是对提供的 Mermaid 流程图代码的详细解析，帮助你逐步理解其结构、逻辑和可视化效果。

---

🧱 一、整体结构概览

该 Mermaid 图描述了一个 ZooKeeper 集群架构，包括客户端连接、集群节点角色（Leader、Follower、Observer）、数据模型（ZNode）以及各组件之间的交互关系。

---

🔁 二、流程图组成详解

1. 节点定义（Nodes）

节点	含义
A[Client]	客户端，发起读写请求
H[Session]	会话，表示客户端与集群之间的连接
C[Leader]	主节点，负责处理写请求并协调事务同步
D[Follower 1], E[Follower 2]	从节点，参与投票和事务同步
F[Observer]	观察者节点，不参与投票，仅用于扩展读性能
B[ZooKeeper<br>Ensemble]	集群容器，包含所有节点
G[(ZNode<br>树形数据模型)]	数据模型，存储 ZooKeeper 的层次化数据

---

2. 连接关系（Edges）

客户端与集群连接：

A --> H
H --> C
H --> D
H --> E
H --> F

• 客户端通过 Session 建立连接。
• Session 可以连接到 Leader、Follower 或 Observer。
• 实际上，客户端通常只连接一个节点，由该节点转发请求。

集群节点关系：

B --> C
B --> D
B --> E
B --> F

• 表示这些节点属于同一个 ZooKeeper 集群（Ensemble）。

节点通信：

C -->|事务同步| D
C -->|事务同步| E
D -->|心跳响应| C
E -->|心跳响应| C

• Leader 向 Follower 推送事务日志（Proposal）。
• Follower 向 Leader 发送心跳和事务确认（Ack）。

---

3. 子图（Subgraphs）

subgraph "ZooKeeper集群"direction TBCDEF
end

• 使用子图将 Leader、Follower 和 Observer 归类为一个“ZooKeeper集群”模块。
• direction TB 表示子图内的布局方向为 Top to Bottom。

---

4. ZNode 数据模型关联

C -.-> G
D -.-> G
E -.-> G
F -.-> G

• 所有节点都访问共享的数据模型 ZNode。
• 虚线表示这是一种数据访问或引用关系。

---

5. 样式设置（Style）

使用 style 指令为不同节点设置颜色、边框等样式，增强可读性：

节点	样式说明
A（Client）	粉色背景
C~E（Leader/Follower）	绿色背景
F（Observer）	黄色背景
G（ZNode）	蓝紫色背景
H（Session）	浅黄色背景
B（Ensemble）	灰色背景，加粗字体

---

6. 注释标签（Notes）

定义了多个注释标签，解释每个节点的功能：

classDef noteStyle fill:#f8f8f8,stroke:#aaa,stroke-width:1px,font-size:12px
note1([客户端通过Session连接集群，\n发送读写请求]):::noteStyle
...
note1 -->|1cm| A

• 使用 classDef 自定义注释样式。
• 每个注释通过虚线连接到对应的节点，帮助快速定位和理解。

---

🧪 三、运行效果预览

你可以将此 Mermaid 代码粘贴到 Mermaid Live Editor 中查看图形化效果。

生成的图表将清晰展示：

• 客户端如何通过 Session 与集群建立连接；
• 集群中各个角色（Leader、Follower、Observer）的关系；
• 节点之间的事务同步和心跳机制；
• 数据模型 ZNode 的共享访问；
• 每个节点功能的简要说明（通过注释）。

---

📌 四、关键知识点总结

模块	功能
Client	发起请求，与集群建立 Session
Session	维护客户端与服务端的连接状态
Leader	处理所有写请求，协调事务同步
Follower	参与选举和事务同步，提供读服务
Observer	提供额外读能力，不参与投票
ZNode	层次化数据模型，支持临时/持久节点
Ensemble	ZooKeeper 集群的整体视图
Heartbeat	保持节点间连接活跃
Transaction Sync	保证集群数据一致性

---

📚 五、学习建议

1. 动手实践：在 Mermaid Live Editor 中修改节点、连线或样式，观察变化。
2. 结合文档：查阅 Mermaid 官方文档 了解更高级用法。
3. 模拟真实场景：尝试绘制 Kafka、Kubernetes 等系统的架构图，提升绘图能力。
4. 加入注释和分组：提高图表可读性和专业度。

---

✅ 六、结语

通过本教程，你已经掌握了如何使用 Mermaid 描述复杂的系统架构图，并能理解 ZooKeeper 的基本工作原理。继续练习更多图表类型（如时序图、甘特图等），你将成为熟练的 Mermaid 编码高手！

如果你有任何问题，欢迎随时提问！🚀

Follower* | 参与选举和事务同步，提供读服务 |
| Observer | 提供额外读能力，不参与投票 |
| ZNode | 层次化数据模型，支持临时/持久节点 |
| Ensemble | ZooKeeper 集群的整体视图 |
| Heartbeat | 保持节点间连接活跃 |
| Transaction Sync | 保证集群数据一致性 |

---

📚 五、学习建议

1. 动手实践：在 Mermaid Live Editor 中修改节点、连线或样式，观察变化。
2. 结合文档：查阅 Mermaid 官方文档 了解更高级用法。
3. 模拟真实场景：尝试绘制 Kafka、Kubernetes 等系统的架构图，提升绘图能力。
4. 加入注释和分组：提高图表可读性和专业度。

---

✅ 六、结语

通过本教程，你已经掌握了如何使用 Mermaid 描述复杂的系统架构图，并能理解 ZooKeeper 的基本工作原理。继续练习更多图表类型（如时序图、甘特图等），你将成为熟练的 Mermaid 编码高手！

如果你有任何问题，欢迎随时提问！🚀