Mermaid图解工具入门指南：使用Mermaid快速创建流程图、饼状图、序列图等

01

—

Mermaid是什么

Mermaid 是一种基于 Javascript 的工具。它可用于图解和制图。它基于 markdown 语法，能简化并加速生成流程图的过程。它不止能生成流程图，还能做其他相关事情。千言万语不如一张图，用图形展示事物处理流程的这种图形被称作流程图。

Mermaid能绘制哪些图？

饼状图：使用pie关键字，具体用法后文将详细介绍

[id_984150236]

序列图：使用sequenceDiagram关键字

甘特图：使用gantt关键字

类图：使用classDiagram关键字

状态图：使用stateDiagram关键字

用户旅程图：使用journey关键字

Mermaid快手入门可以参考：

此链接为 https://snowdreams1006.github.io/write/mermaid-flow-chart.html 。它指向一个特定的网页，可能是关于绘制流程图的相关内容，用户可以通过该链接访问并查看相关的流程图或相关信息。

02

—

如何使用chatGPT生成Mermaid绘图表达式

核心包含两个步骤，其一为通过提示来生成你所需要的流程说明；其二为通过提示生成流程的 mermaid 表达式。

通用提示：

角色：你是***方面的专家‍‍‍‍‍‍‍‍‍‍

任务 1：在该场景下，整个流程所经历的环节有哪些呢？请给出具体的交互流程。

任务2：用Mermaid语法再写一遍上面的流程

示例：‍

一个网站的 URL 通过浏览器请求到返回网页数据，经历了以下环节：首先，浏览器根据输入的 URL 向服务器发送请求。接着，服务器接收到请求后进行处理。然后，服务器查找与该 URL 对应的网页文件或数据。之后，服务器将找到的网页文件或数据进行封装。最后，服务器将封装好的网页数据返回给浏览器，浏览器再将这些数据渲染成我们看到的网页页面。

用Mermaid语法再写一遍上面的流程

和chatGPT交互如下：‍‍‍‍‍‍‍‍‍‍‍‍‍

03‍

—

如使用Diagrams绘制流程图

打开 diagrams.net ，把 Mermaid 语法流程图代码复制进去，然后就可以生成流程图。

1、打开：diagrams.net

2、导入mermaid流程图表达式‍‍‍‍‍‍‍

mermaid流程图表达式：

graph TD;A[用户] --> B[浏览器];B --> C[DNS服务器];C --> D[本地缓存];D --> |缓存未命中| E[DNS解析];E --> F[DNS服务器];F --> G[获取IP地址];B --> H[Web服务器];H --> I[TCP连接请求];I --> J[Web服务器];J --> K[HTTP请求];K --> L[请求方法,请求头,请求体];J --> M[处理请求];M --> |存在资源| N[返回响应报文];N --> O[响应状态码,响应头,响应体];B --> P[浏览器解析渲染页面];O --> P;M --> |不存在资源| Q[返回404状态码];Q --> O;P --> R[下载资源];R --> S[获取资源];H --> T[处理资源请求];T --> |存在资源| U[返回资源响应报文];U --> V[资源的状态码,响应头,响应体];R --> P;T --> |不存在资源| W[返回404状态码];W --> U;

导入表达式：

3、生成流程图

diagrams工具生成流程图如下：

‍‍‍‍‍

04‍

—

如何按场景快速绘图

下面给几个例子，流程图和序列图。

浏览器 URL 交互流程的序列图，将 mermaid 表达式导入到 diagrams.net 中。

mermaid 表达式是由 chatGPT 生成的。

sequenceDiagram    participant 浏览器    participant DNS服务器    participant 网站服务器
浏览器向 DNS 服务器进行查询，目的是获取网站域名所对应的 IP 地址。    DNS服务器-->>浏览器: 返回IP地址
    浏览器->>网站服务器: 发起HTTP请求网站服务器向浏览器返回 HTTP 响应，这个响应包含 HTML 内容。
浏览器向网站服务器发出请求，以获取 HTML 内嵌的资源，这些资源包括图片、样式以及 JS 等。    网站服务器-->>浏览器: 返回资源内容
    浏览器-->>浏览器: 解析HTML和资源,渲染网页    浏览器-->>用户: 显示网页
    用户->>浏览器: 与网页交互,产生新的请求    浏览器->>网站服务器: 发起HTTP请求    网站服务器-->>浏览器: 返回HTTP响应

用户访问微信 APP 时的交互序列，会将 mermaid 表达式导入到 diagrams.net 中。

mermaid表达式（由chatGPT生成）：

sequenceDiagram    participant 用户    participant 微信APP    participant 本地虚拟专用网络服务器    participant 微信服务器
    用户->>微信APP: 点击微信APP图标    微信APP->>微信服务器: 发送HTTPS请求    微信服务器-->>微信APP: 返回HTTP响应    微信APP->>微信服务器: 解析响应报文
关于建立虚拟专用网络连接的流程情况如下。    alt 网络不在微信服务范围内微信 APP 向本地虚拟专用网络服务器发送虚拟专用网络连接请求。本地虚拟专用网络服务器与微信服务器建立虚拟专用网络连接。end

用户访问微信 APP 时的交互流程，将 mermaid 表达式导入到 diagrams.net 中。

mermaid表达式（由chatGPT生成）：

    subgraph 用户端点击微信 APP 的图标，接着微信 APP 会向微信服务器发送 HTTPS 请求。end
    subgraph 本地虚拟专用网络服务器判断网络是否在微信服务范围内，若不在，微信 APP 会向本地虚拟专用网络服务器发送连接请求，以建立虚拟专用网络连接。end
    subgraph 微信服务器端微信服务器对请求进行身份验证和认证。请求进行合法验证；微信服务器将 HTTP 响应报文返回给微信 APP。微信 APP 对响应报文进行解析。end
微信 APP 需要向微信服务器发起进一步的请求和交互。

注意在 Mermaid 表达式中：描述内容不能有圆括弧（）；标点表达符需为英文格式，如冒号、逗号。

本文主要介绍了将 chatGPT、Mermaid 语法以及 Diagrams 绘图工具组合使用，以便在快手生成流程图或序列图，同时也能够生成其他常见的绘图。若要画出理想的业务流程图，就需要对业务有透彻的理解，这样画出的图才能反映业务交互的本质。需要持续在“心上练，事上磨”，多进行思考和实践，才能够达到预期的效果。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍