The document uses the ChatGPT Demo, document generation code please adapt the software to export the image by yourself.
The prompt word generation flowchart provides a quick visual summary of the tedious work and allows the generation of articles to include more user-friendly graphical elements.

Related tools.

1. Mermaid is a JavaScript library for creating flowcharts, timing diagrams, class diagrams and so on.

2. Mindmap is a tool for constructing conceptual diagrams that are commonly used in mind mapping, mind mapping and brain mapping scenarios.

3. GraphvizDOT is a tool for creating flowcharts, state-transition diagrams, organizational charts, timing diagrams and more, using nodes and edges to represent relationships and richer layout options to control the appearance of the diagram.

Generate a flowchart

clue

mermaid

Pie charts: use the pie keyword, which will be used in more detail later on

Flowchart: Use the graph keyword, which will be described in more detail later.

Sequence diagrams: using the sequenceDiagram keyword

Gantt chart: using the gantt keyword

Class diagrams: use the classDiagram keyword

State diagrams: using the stateDiagram keyword

User journey mapping: using the journey keyword

Getting Started Example

#### How to Generate Mermaid Plotting Expressions with chatGPT
The core is a two-step process, one is to generate the process description you need from the prompt, and the other is to generate the process mermaid expression from the prompt.
Generic Tip:
Role: you are an expert in `***'
Task 1: `***` scenario, what is the whole process going through, give the specific interaction flow
Task 2: Write the above process again using Mermaid syntax

#### If you use Diagrams to draw a flowchart
Open diagrams.net (https://app.diagrams.net/) Copy the Mermaid syntax flowchart code in Advanced to generate the flowchart.

Generate a flowchart

``Mermaid
graph TD.
A[user] --> B[browser].
B --> C [DNS server].
C --> D [local cache].
D --> |cache misses| E[DNS resolution].
E --> F [DNS server].
F --> G [get IP address].
B --> H [Web server].
H --> I[TCP connection request].
I --> J [Web server].
J --> K [HTTP request].
K --> L[request method, request header, request body].
J --> M [processing request].
M --> |existing resource| N [return response message].
N --> O[response status code, response header, response body].
B --> P[browser parses rendered page];
O --> P.
M --> |No resource exists| Q [return 404 status code].
Q --> O.
P --> R [download resources].
R --> S [access to resources].
H --> T [Processing Resource Requests].
T --> |Existing Resource| U [return resource response message].
U --> V[status code of the resource, response header, response body].
R --> P.
T --> |No resource exists| W [return 404 status code].
W --> U.
```

How to draw quickly by scene

1. Sequence diagram of the browser URL interaction flow, importing mermaid expressions into diagrams.net

``Mermaid
sequenceDiagram
participant Browser
participant DNS server
participant Web server

Browser->>DNS Server: DNS queries the IP address of the domain name of the website.
DNS server -->> Browser: Return IP address

Browser->>Webserver: Initiates HTTP request
Web Server -->> Browser: Return HTTP response (HTML content)

Browser->>Webserver: request HTML embedded resources (images, styles, JS, etc.)
Web Server -->> Browser: Return to Resource Content

Browser -->> Browser: Parses HTML and resources, renders web pages.
Browser-->>User: Show Page

User->>Browser: interacts with web page, generates new requests
Browser->>Webserver: Initiates HTTP request
Web Server -->> Browser: Return HTTP Response
```

2. Interaction sequence of a user accessing the WeChat App, importing mermaid expressions into diagrams.net

``Mermaid
sequenceDiagram
participant user
participant wechat app
participant Local VPN server
participant wechat server

User->>WeChat APP: Click WeChat APP icon
WeChat APP->>WeChat Server: Send HTTPS request
WeChat Server-->>WeChat APP: return HTTP response
WeChat APP->>WeChat Server: Parsing Response Message

Note over User: The following is the procedure for establishing a VPN connection
alt network is not covered by microsoft services
WeChat APP->>Local VPN Server: Send VPN connection request
Local VPN Server->>WeChat Server: Establish VPN Connection
end
```

3. Interaction flowchart of a user accessing the WeChat App, importing mermaid expressions into diagrams.net
Mermaid syntax in the current text environment can not be parsed properly, can be changed to be compatible with markdown format.

``Mermaid
subgraph Client
click[click WeChat APP icon] --> request[WeChat APP sends HTTPS request to WeChat server]
end

subgraph Local VPN server
judge[Determine if the network is within WeChat's service range] -->|not in| establish[WeChat APP sends connection request to local VPN server to establish VPN connection]
end

subgraph wechat server side
request --> authenticate [microsoft server authentication and authentication of request]
authenticate -->|request is legitimate| response[WeChat server returns HTTP response message to WeChat APP]
response --> parse[microsoft app parse response message]
end

parse -->|required| request_more [WeChat APP to initiate further requests and interactions with WeChat server]
```

Note that in Mermaid expressions: there can be no parentheses () in the description; punctuation expressions, which need to be in English format, e.g., colons, commas.

Generate a mind map

clue

Mindmap

Getting Started Example

Cue word:
The process of visiting the Eight Great Places, combing it with a mind map, generating Mindmap markup language

Output Code:

The process of playing in Badaqi

- intend
- Determine the date of the excursion
- Purchase of tickets
- Check the weather forecast
- Pack water, snacks, sunscreen, etc.

- Arrive at Badaqi
- Arriving by bus/driving
- Finding a parking space/purchasing a parking ticket
- Entering the Scenic Area

- Sightseeing
- Visit to Jade Buddha Temple
- Visit the Thirteen Tombs
- Entering Qinglong Lake
- Climb the thousand-foot rock.
- Enjoy the scenery of the Valley of the Wolves
- Tour of the Botanical Gardens
- Play Ice World
- Meet the Exciting Bumper Cars

- dining
- Choosing a restaurant
- order food
- dining

- resting
- break
- Drinking water for energy

- Continuing the tour
- Challenging the zipline
- Try rock climbing.
- Feel the thrill of rafting
- Meet the Carousel

- Purchase of souvenirs
- Selection of souvenir stores
- Selection of souvenirs
- payment

- Leave Badaqi.
- Walking/taking the bus home
- Organize your personal belongings.
- End of a pleasant day

Code Example:

The process of playing in Badaqi

- intend
- Determine the date of the excursion
- Purchase of tickets
- Check the weather forecast
- Pack water, snacks, sunscreen, etc.

- Arrive at Badaqi
- Arriving by bus/driving
- Finding a parking space/purchasing a parking ticket
- Entering the Scenic Area

- Sightseeing
- Visit to Jade Buddha Temple
- Visit the Thirteen Tombs
- Entering Qinglong Lake
- Climb the thousand-foot rock.
- Enjoy the scenery of the Valley of the Wolves
- Tour of the Botanical Gardens
- Play Ice World
- Meet the Exciting Bumper Cars

- dining
- Choosing a restaurant
- order food
- dining

- resting
- break
- Drinking water for energy

- Continuing the tour
- Challenging the zipline
- Try rock climbing.
- Feel the thrill of rafting
- Meet the Carousel

- Purchase of souvenirs
- Selection of souvenir stores
- Selection of souvenirs
- payment

- Leave Badaqi.
- Walking/taking the bus home
- Organize your personal belongings.
- End of a pleasant day

>The above code can't run directly in the notes, click [Generate Mind Map](https://markmap.js.org/repl) , the code is copied in, you can download the original image directly.

Generate complex flowcharts

clue

GraphvizDOT

Getting Started Example

Cue word:
I want you to act as Graphviz DOT generator, expert in creating meaningful charts. Help me generate a water cycle chart. The code content is in Chinese.

Output Code:

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

// Define the node
Earth [label="Earth"].
Lakes [label="Lakes"].
Ocean [label="Ocean"].
Sun [label="Sun"].
Atmosphere [label="Atmosphere"].
Cloud [label="Cloud"].
Rain [label="Rain"].
Ice [label="Ice"].
Rivers [label="Rivers"].
Vegetation [label="Vegetation"].

// Define the edges
Sun -> Atmosphere [label="Radiation"].
Atmosphere -> Earth [label="Radiation"].
Earth -> Lakes [label="Groundwater Recharge"].
Earth -> Ocean [label="River Replenishment"].
Lakes -> Rivers [label="Streams"].
Ocean -> Atmosphere [label="Evaporation"].
Atmosphere -> Clouds [label="Condensation"].
Clouds -> Rain [label="Precipitation"].
Stormwater -> Lakes [label="Runoff"].
Stormwater -> River [label="Runoff"].
Ice -> Lakes [label="Melting"];;
Ice and snow -> river [label="melting"].
Vegetation -> Atmosphere [label="Transpiration"].
Vegetation -> Earth [label="Soil Moisture"].
}

Advanced Examples

Cue word:
I would like you to act as Graphviz DOT generator, expert in creating meaningful graphs. The graph should have at least n nodes (I specify n in my input by writing [n], 10 is the default) and be an accurate and complex representation of the given input. Each node is indexed by a number to reduce the size of the output, should not contain any styles, and be parameterized with layout=neato, overlap=false, and node [shape=rectangle]. The code should be valid, error-free and returned in one line without any explanation. Provide clear and organized diagrams, the relationships between nodes must make sense to an expert on that input. My first diagram is: "Water Cycle [8]".
> This example reinforces roles, brings in n as a variable, abstracts code, style requirements, parameter naming, improves code validity, and reduces redundant code. This example offers more possibilities.

Output Code:

digraph {
layout=neato; overlap=false; node [shape=rectangle].
0[label="Vaporization"];
1[label="Atmosphere"].
2[label="Condensation"].
3[label="Precipitation"].
4[label="Land"].
5 [label="Groundwater"].
6[label="Surface runoff"].
7 [label="Oceans"].
0 -> 1;
1 -> 2;
2 -> 3;
3 -> 4;
3 -> 5.
3 -> 6.
3 -> 7.
}

erDiagram
USERS ||--o{ USER_ROLES }o--|| ROLES : "User-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
}

The layman's guide to getting started with AI

Help you learn how to utilize AI tools at a low cost and from a zero base.AI, like office software, is an essential skill for everyone. Mastering AI will give you an edge in your job search and half the effort in your future work and studies.

View Details>