graph TD subgraph 用户 用户操作 --> A[前端应用] end
subgraph 服务端 A --> B[负载均衡] B -->|请求| C[服务1] B -->|请求| D[服务2] B -->|请求| E[服务3] end
subgraph 数据存储 C -->|读写| F[数据库1] D -->|读写| G[数据库2] E -->|读写| H[数据库3] end
subgraph 消息队列 C -->|异步通信| I[消息队列1] D -->|异步通信| I E -->|异步通信| I end
成品图：
三、绘制时序图
时序图也是 Mermaid 的一种常见应用场景，通过 sequenceDiagram 关键字来创建。
以下是一个简单的时序图的Mermaid语法示例：
sequenceDiagram participant Alice participant Bob Alice->>Bob: Hello Bob, how are you? Bob-->>Alice: Hi Alice! I'm good, thank you!
成品图：
再举个复杂的例子，下面绘制一张嵌入式系统的架构图：
sequenceDiagram participant A as 用户 participant B as Harmony设备 participant C as 云服务器 participant D as 云数据库 participant E as 嵌入式上层应用 participant F as 开发板 participant G as SQLite
activate A #grey note over A: 用户查看操作 A->>B: 查询事件 deactivate A activate B #lightblue B->>C: 请求数据 deactivate B activate C #orange C->>D: 查询 deactivate C activate D #blue D-->>C: 返回数据 deactivate D activate C #orange C-->>B: 返回数据 deactivate C activate B #lightblue B-->>A: 显示内容 deactivate B
activate A #grey note over A: 用户更改操作 A->>B: 更新事件 deactivate A activate B #lightblue B->>C: 请求更新 deactivate B activate C #orange C->>F: 请求更新 deactivate C activate F #lightgreen F->>G: 请求更新 deactivate F activate G #green G-->>F: 返回结果 deactivate G activate F #lightgreen F->>C: 发送修改请求 deactivate F activate C #orange C->>D: 更新数据 deactivate C activate D #blue D-->>C: 返回结果 deactivate D activate C #orange C-->>B: 返回结果 deactivate C activate B #lightblue B-->>A: 返回结果 deactivate B activate A #grey A->>A: 提示结果 note over A: 操作成功 deactivate A
成品图：
四、绘制甘特图
使用 Mermaid 还可以绘制甘特图，通过 gantt 关键字来创建。
举个例子，下面绘制一张简单的甘特图：
gantt title 甘特图示例
section Section A task :a1, 2022-03-02, 1d Another task :after a1, 1d section Another Task in sec :2022-03-04, 1d
成品图：
五、绘制饼图
使用 Mermaid 还可以绘制饼图，通过 pie 关键字来创建。
例如：
pie title Pie Chart "Category A" : 40 "Category B" : 25 "Category C" : 20 "Category D" : 15
成品图：
六、绘制状态图
状态图用于展示对象的状态和状态间的转移过程。在mermaid中,状态图的语法也是非常简单的。状态图可以用于展示对象的生命周期、状态转移等，通过 stateDiagram 关键字来创建。
例如：
stateDiagram [] --> 暂停 暂停 --> 播放 暂停 --> 停止 播放 --> 暂停 播放 --> 停止 停止 --> []
成品图：
七、绘制类图
使用 Mermaid 还可以绘制类图，通过 classDiagram 关键字来创建。
例如：
classDiagram class User { +username: string +password: string +login(): void +logout(): void }
class Employee { +employeeId: string +position: string +work(): void }
class Customer { +customerId: string +membershipLevel: string
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
