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

相关工具:

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

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

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

生成流程图

pista

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表达式中：描述内容中不能有圆括弧（）；标点表达符，需要是英文格式，如冒号，逗号。

生成思维导图

pista

Mindmap

入门示例

Palabra clave:
八大处游玩过程，用思维导图梳理，生成Mindmap标记语言

输出代码：

八大处游玩过程

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

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

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

- 用餐
- 选择餐厅
- 点餐
- 用餐

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

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

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

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

代码示例：

八大处游玩过程

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

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

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

- 用餐
- 选择餐厅
- 点餐
- 用餐

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

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

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

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

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

生成复杂流程图

pista

GraphvizDOT

入门示例

Palabra clave:
我希望您充当 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="土壤水分"];
}

高级示例

Palabra clave:
我希望您充当 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
}