开发人员必备工具！mermaid的详细教学

最新推荐文章于 2025-04-15 11:54:54 发布

yolililjin

最新推荐文章于 2025-04-15 11:54:54 发布

阅读量7.7k

点赞数 4

文章标签： uml 软件工程系统架构开发语言

本文链接：https://blog.csdn.net/zhangqinhang1/article/details/133872861

版权

一、Mermaid简介

Mermaid 是一个基于 JavaScript 的图表绘制库，它可以用于创建流程图、状态图、时序图以及甘特图等各种类型的图表。它以 HTML 形式渲染图表，而不是生成静态图片，这使得它更加灵活和安全。

项目地址：Mermaid 官方项目地址
项目应用：Mermaid 用于在 web 环境中创建各种类型的图表。它可以用于文档、技术博客、项目文档等等，特别适合于与 Markdown 结合使用。Mermaid 可以帮助用户以直观的方式展示各种流程、状态、时序等信息，从而提高文档的可读性和可理解性。

二、mermaid的使用方法

1、流程图

当使用Mermaid创建流程图时，我们可以按照以下步骤进行操作。

步骤	语法示例	说明
1. 定义流程图方向	`graph 方向描述`	方向描述可以是：`TB`（从上到下）、`BT`（从下到上）、`RL`（从右到左）、`LR`（从左到右）
2. 定义节点	`id[文字]` `id(文字)` `id((文字))` `id>文字]` `id{文字}`	用于定义不同类型的节点，如矩形、圆角矩形、圆形、旗帜状节点、菱形节点等
3. 连接节点	`id1-->id2` `id1-.->id3` `id1-.text.->id4` `id1==text==>id5`	通过箭头连接节点，可以选择添加箭头类型和文字
4. 添加子图表	`subgraph 子图表名称` `子图表中的描述语句...` `end`	可以在图表中添加子图表以组织复杂信息

下面是一个示例，演示如何使用Mermaid创建一个简单的流程图：

graph TB
    A[开始] --> B[处理]
    B --> C[判断]
    C --是--> D[结束]
    C --否--> E[处理]
    E --> B

这个流程图的语法解释如下：

第一步，定义了一个从上到下（Top to Bottom）的流程图。
接着定义了四个节点：A、B、C、D，分别代表开始、处理、判断和结束。
使用箭头连接了这些节点，箭头表示流程的方向。
判断节点C的两个分支，如果是，流程走向结束节点D，如果否，流程回到处理节点B。

2、序列图

当使用Mermaid创建序列图时，我们可以按照以下步骤进行操作。

步骤	语法示例	说明
1. 开始序列图	`sequenceDiagram`	用于开始一个序列图
2. 定义参与者	`participant 参与者1` `participant 参与者2`	用于定义参与者，可以为其指定简称
3. 描述消息传递	`[参与者1][消息线][参与者2]:消息体`	用于描述消息的发送者、接收者以及消息内容
4. 处理中状态	`[参与者]+` 或 `[参与者]-`	在消息线末尾添加`+`表示消息接收者进入“处理中”状态，添加`-`表示离开“处理中”状态
5. 标注	`Note 位置表述参与者: 标注文字`	用于在图中添加标注信息
6. 循环	`loop 循环的条件` `循环体描述语句` `end`	用于创建循环结构
7. 判断	`alt 条件 1 描述` `分支 1 描述语句` `else 条件 2 描述` `分支 2 描述语句` `end`	用于创建条件分支结构

下面是一个示例，演示如何使用Mermaid创建一个简单的序列图：

sequenceDiagram
    participant A as 张三
    participant B as 李四
    A->>B: 吃了吗？
    B->>A: 吃了

这个序列图的语法解释如下：

第一步，开始一个序列图。
定义了两个参与者，分别为张三（A）和李四（B）。
通过A->>B: 吃了吗？描述了张三向李四发送了一个消息：“吃了吗？”。
紧接着，通过B->>A: 吃了描述了李四的回复：“吃了”。
整个序列图结束。

3、ER图

当使用Mermaid创建架构图时，我们可以按照以下步骤进行操作。以下是一个简单的表格，用于展示Mermaid架构图的基本教学：

步骤	语法示例	说明
1. 开始架构图	`graph LR` `子图表中的描述语句...` `end`	用于开始一个架构图
2. 定义节点	`id1(节点1)` `id2(节点2)`	用于定义节点，可以带有文字描述
3. 连接节点	`id1 --> id2` `id1 --- id2` `id1 ==> id2`	用于连接节点，可以选择箭头类型
4. 添加子图表	`subgraph 子图表名称` `子图表中的描述语句...` `end`	可以在图表中添加子图表以组织复杂信息

下面是一个示例，演示如何使用Mermaid创建一个简单的架构图：

graph LR
    A(用户界面) --> B(服务器)
    B --> C(数据库)
    C --> B
    B --> A

这个架构图的语法解释如下：

第一步，开始一个架构图。
定义了三个节点：用户界面（A）、服务器（B）和数据库（C）。
通过箭头连接了这些节点，表示了它们之间的关系。

三、Mermaid的应用实例

以下是一个智能家居系统的架构图也是通过mermaid语法进行的生成

graph TD;
    subgraph 用户界面
        A[智能手机] -->|MQTT消息| B[消息代理器]
        B -->|App控制| C[树莓派1]
        B -->|App控制| D[树莓派2]
    end
 subgraph 树莓派设备
        C -->|设备控制| E[智能灯1]
        C -->|设备控制| F[智能插座1]
        D -->|设备控制| G[智能灯2]
        D -->|设备控制| H[智能插座2]
        E -->|实时状态| B
        F -->|实时状态| B
        G -->|实时状态| B
        H -->|实时状态| B
    end
subgraph MQTT服务器
        I[MQTT服务器] -.->|消息传递| B
    end