该文档使用 ChatGPT 演示，文档生成代码请自行适配软件导出图片。
提示词生成流程图对繁琐工作进行快速可视化总结，让生成文章加入更多友好的图片元素。

相关工具:

1. Mermaid 是一种用于创建流程图、时序图、类图等的 JavaScript 库。

2. Mindmap 是一种用于构建概念性图表的工具，通常用于思维导图、思维图和脑图等场景。

3. GraphvizDOT 是一种用于创建流程图、状态转换图、组织结构图、时序图等的工具，它使用节点和边缘来表示关系，并使用更丰富的布局选项来控制图表的外观。

生成流程图

提示词

mermaid

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

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

序列图：使用sequenceDiagram关键字

甘特图：使用gantt关键字

类图：使用classDiagram关键字

状态图：使用stateDiagram关键字

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

入门示例

#### 如何使用chatGPT生成Mermaid绘图表达式
核心是两个步骤，一是通过提示生成你需要的流程说明，二是通过提示生成流程的mermaid表达式。
通用提示：
角色：你是`***`方面的专家
任务1：`***`场景，整个流程经历了哪些环节，给出具体的交互流程
任务2：用Mermaid语法再写一遍上面的流程

#### 如使用Diagrams绘制流程图
打开diagrams.net（https://app.diagrams.net/） 将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;
“`

如何按场景快速绘图

1. 浏览器URL交互流程的序列图，把mermaid表达式导入diagrams.net

“`mermaid
sequenceDiagram
participant 浏览器
participant DNS服务器
participant 网站服务器

浏览器->>DNS服务器: DNS查询网站域名对应的IP地址
DNS服务器–>>浏览器: 返回IP地址

浏览器->>网站服务器: 发起HTTP请求
网站服务器–>>浏览器: 返回HTTP响应(HTML内容)

浏览器->>网站服务器: 请求HTML内嵌资源(图片,样式,JS等)
网站服务器–>>浏览器: 返回资源内容

浏览器–>>浏览器: 解析HTML和资源,渲染网页
浏览器–>>用户: 显示网页

用户->>浏览器: 与网页交互,产生新的请求
浏览器->>网站服务器: 发起HTTP请求
网站服务器–>>浏览器: 返回HTTP响应
“`

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

“`mermaid
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的交互流程图，把mermaid表达式导入diagrams.net
当前文本环境中Mermaid语法无法正常解析，可以更改为兼容markdown格式。

“`mermaid
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向微信服务器发起进一步请求和交互]
“`

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

生成思维导图

提示词

Mindmap

入门示例

提示词：
八大处游玩过程，用思维导图梳理，生成Mindmap标记语言

输出代码：

八大处游玩过程

– 准备
– 确定游玩日期
– 购买门票
– 查看天气预报
– 准备水、零食、防晒用品等

– 到达八大处
– 乘坐公交车/驾车到达
– 寻找停车位/购买停车券
– 进入景区

– 游览景点
– 参观玉佛寺
– 参观十三陵
– 走进青龙湖
– 爬上千尺岩
– 感受狼谷风光
– 游览植物园
– 游玩冰雪世界
– 迎接刺激的碰碰车

– 用餐
– 选择餐厅
– 点餐
– 用餐

– 休息
– 休息片刻
– 喝水补充能量

– 继续游玩
– 挑战高空滑索
– 尝试攀岩
– 感受刺激的漂流
– 迎接旋转木马

– 购买纪念品
– 选择纪念品店
– 选购纪念品
– 付款

– 离开八大处
– 步行/乘坐公交车回家
– 整理个人物品
– 结束愉快的一天

代码示例：

八大处游玩过程

– 准备
– 确定游玩日期
– 购买门票
– 查看天气预报
– 准备水、零食、防晒用品等

– 到达八大处
– 乘坐公交车/驾车到达
– 寻找停车位/购买停车券
– 进入景区

– 游览景点
– 参观玉佛寺
– 参观十三陵
– 走进青龙湖
– 爬上千尺岩
– 感受狼谷风光
– 游览植物园
– 游玩冰雪世界
– 迎接刺激的碰碰车

– 用餐
– 选择餐厅
– 点餐
– 用餐

– 休息
– 休息片刻
– 喝水补充能量

– 继续游玩
– 挑战高空滑索
– 尝试攀岩
– 感受刺激的漂流
– 迎接旋转木马

– 购买纪念品
– 选择纪念品店
– 选购纪念品
– 付款

– 离开八大处
– 步行/乘坐公交车回家
– 整理个人物品
– 结束愉快的一天

>以上代码无法在笔记中直接运行，点击[生成思维导图](https://markmap.js.org/repl) ，代码复制进去，可以直接下载原图。

生成复杂流程图

提示词

GraphvizDOT

入门示例

提示词：
我希望您充当 Graphviz DOT 生成器，创建有意义的图表的专家。帮我生成一个水循环图表。代码内容使用中文。

输出代码：

digraph G {
rankdir=LR;
node[shape=circle, fontname=”Arial”];
edge[fontname=”Arial”, fontsize=12];

// 定义节点
地球 [label=”地球”];
湖泊 [label=”湖泊”];
海洋 [label=”海洋”];
太阳 [label=”太阳”];
大气 [label=”大气”];
云 [label=”云”];
雨水 [label=”雨水”];
冰雪 [label=”冰雪”];
河流 [label=”河流”];
植被 [label=”植被”];

// 定义边
太阳 -> 大气 [label=”辐射”];
大气 -> 地球 [label=”辐射”];
地球 -> 湖泊 [label=”地下水补给”];
地球 -> 海洋 [label=”河流补给”];
湖泊 -> 河流 [label=”水流”];
海洋 -> 大气 [label=”蒸发”];
大气 -> 云 [label=”凝结”];
云 -> 雨水 [label=”降水”];
雨水 -> 湖泊 [label=”径流”];
雨水 -> 河流 [label=”径流”];
冰雪 -> 湖泊 [label=”融化”];
冰雪 -> 河流 [label=”融化”];
植被 -> 大气 [label=”蒸腾”];
植被 -> 地球 [label=”土壤水分”];
}

高级示例

提示词：
我希望您充当 Graphviz DOT 生成器，创建有意义的图表的专家。该图应该至少有 n 个节点（我在我的输入中通过写入 [n] 来指定 n，10 是默认值）并且是给定输入的准确和复杂的表示。每个节点都由一个数字索引以减少输出的大小，不应包含任何样式，并以 layout=neato、overlap=false、node [shape=rectangle] 作为参数。代码应该是有效的、无错误的并且在一行中返回，没有任何解释。提供清晰且有组织的图表，节点之间的关系必须对该输入的专家有意义。我的第一个图表是：“水循环 [8]”。
>这个例子中，强化了角色、带入n为变量、抽象代码、样式需求、参数命名、提升代码有效性、降低冗余代码。这个例子提供了更多的可能性。

输出代码：

digraph {
layout=neato; overlap=false; node [shape=rectangle];
0[label=”蒸发”];
1[label=”大气层”];
2[label=”凝结”];
3[label=”降水”];
4[label=”陆地”];
5[label=”地下水”];
6[label=”地表径流”];
7[label=”海洋”];
0 -> 1;
1 -> 2;
2 -> 3;
3 -> 4;
3 -> 5;
3 -> 6;
3 -> 7;
}

erDiagram
USERS ||–o{ USER_ROLES }o–|| ROLES : “用户-角色”

MAPS }o–|| LEVELS : level
LEVELS ||–o{ OBJECTIVES } : objective

users {
uuid user_id
text email
text date
int requests_count
user_id *–1 user
}

chats {
uuid chat_id
uuid user_id
timestamp creation_time
json history
text chat_name
}

chat_history {
uuid message_id
uuid chat_id
text user_message
text assistant
timestamp message_time
}

vectors {
uuid id
text content
jsonb metadata
vector(1536) embedding
}

stats {
timestamp time
boolean chat
boolean embedding
text details
jsonb metadata
serial id
}

summaries {
bigserial id
uuid document_id
text content
jsonb metadata
vector(1536) embedding
}

api_keys {
uuid key_id
uuid user_id
text api_key
timestamp creation_time
timestamp deleted_time
boolean is_active
}

brains {
uuid brain_id
text name
text status
text model
text max_tokens
float temperature
}

brains_users {
uuid brain_id
uuid user_id
varchar rights
boolean default_brain
}

brains_vectors {
uuid brain_id
uuid vector_id
text file_sha1
}

brain_subscription_invitations {
uuid brain_id
varchar email
varchar rights
}

migrations {
varchar name
timestamptz executed_at
}