01

—

是什么

是一个基于的图解和制图工具。它基于语法来简化和加速生成流程图的过程，也不止于生成流程图。千言万语不如一张图，使用图形展示事物处理流程的图形称之为流程图。‍

能绘制哪些图？

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

流程图：使用graph关键字，具体用法后文将详细介绍

序列图：使用关键字

甘特图：使用gantt关键字

类图：使用关键字

状态图：使用关键字

用户旅程图：使用关键字

快手入门可以参考：

https://snowdreams1006.github.io/write/mermaid-flow-chart.html

02

—

如何使用生成绘图表达式

核心是两个步骤，一是通过提示生成你需要的流程说明，二是通过提示生成流程的表达式。‍‍‍‍‍

通用提示：

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

任务1：***场景，整个流程经历了哪些环节，给出具体的交互流程

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

示例：‍

你是一资深的互联网专家，请说明一个网站URL通过浏览器请求到返回网页数据，整个流程经历了哪些环节，给出具体的交互流程

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

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

03‍

—

生成流程图的软件_用chatgpt生成流程图_根据流程图生成代码

如使用绘制流程图

打开（）将语法流程图代码复制进去，生成流程图。操作如下：

1、打开：

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

流程图表达式：

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、生成流程图

工具生成流程图如下：

‍‍‍‍‍

04‍

—

如何按场景快速绘图

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

1、浏览器URL交互流程的序列图，把表达式导入‍‍‍‍‍‍‍‍‍‍

表达式（由生成）：‍‍‍‍‍‍‍

sequenceDiagram    participant 浏览器    participant DNS服务器    participant 网站服务器
    浏览器->>DNS服务器: DNS查询网站域名对应的IP地址    DNS服务器-->>浏览器: 返回IP地址
    浏览器->>网站服务器: 发起HTTP请求    网站服务器-->>浏览器: 返回HTTP响应(HTML内容)
    浏览器->>网站服务器: 请求HTML内嵌资源(图片,样式,JS等)    网站服务器-->>浏览器: 返回资源内容
    浏览器-->>浏览器: 解析HTML和资源,渲染网页    浏览器-->>用户: 显示网页
    用户->>浏览器: 与网页交互,产生新的请求    浏览器->>网站服务器: 发起HTTP请求    网站服务器-->>浏览器: 返回HTTP响应

2、用户访问微信APP的交互序列，把表达式导入

表达式（由生成）：

sequenceDiagram    participant 用户    participant 微信APP    participant 本地VPN服务器    participant 微信服务器
    用户->>微信APP: 点击微信APP图标    微信APP->>微信服务器: 发送HTTPS请求    微信服务器-->>微信APP: 返回HTTP响应    微信APP->>微信服务器: 解析响应报文
    Note over 用户: 以下是建立VPN连接的流程    alt 网络不在微信服务范围内        微信APP->>本地VPN服务器: 发送VPN连接请求        本地VPN服务器->>微信服务器: 建立VPN连接end

3、用户访问微信APP的交互流程图，把表达式导入

表达式（由生成）：

    subgraph 用户端        click[点击微信APP图标] --> request[微信APP向微信服务器发送HTTPS请求]end
    subgraph 本地VPN服务器        judge[判断网络是否在微信服务范围内] -->|不在| establish[微信APP向本地VPN服务器发送连接请求,建立VPN连接]end
    subgraph 微信服务器端        request --> authenticate[微信服务器对请求身份验证和认证]        authenticate -->|请求合法| response[微信服务器返回HTTP响应报文给微信APP]        response --> parse[微信APP解析响应报文]end
parse -->|需要| request_more[微信APP向微信服务器发起进一步请求和交互]

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

本文主要介绍了组合使用，语法，绘图工具来快手生成流程图或序列图，当然也可以生成其他常见的绘图。如果要画出理想的业务流程图，还是需要对业务理解的透彻，画出的图才能反映业务交互的本质。需要不断在“心上练，事上磨”，多思考，多实践，才能达到预期效果。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍