Have you ever considered using tools that can generate diagrams from text? It may not be a widely discussed topic, but it’s a concept that holds immense potential. By transforming text into diagrams, we can create more manageable assets and accelerate the iteration process for refining the logical and relational elements of the diagram.
ChatGPT, well-known for its text generation capabilities, can even generate code. So, can it also create diagrams from descriptions by mapping them onto a text-based diagramming package language format? Previous demos have demonstrated that it can, but let’s delve deeper into this fascinating topic.
In this article, we will explore various diagram script types that can be generated using ChatGPT. Moreover, we will discuss how ChatGPT can be utilized as part of an interactive visual thinking process, allowing us to generate base diagrams and then iterate on them using further prompts.
A Cup of Tea: Flowchart
Let’s start by generating a flowchart that illustrates the process of making a cup of tea. We’ll use the valid syntax of mermaid.js, a popular diagramming package. Here’s how the process unfolds:
graph TD
A[Boil Water] --> B[Add Tea Bag]
B --> C[Steep Tea]
C --> D[Add Milk and Sugar]
D --> E[Enjoy Cup of Tea]To make a cup of tea, begin by boiling water in a kettle or pot. Once the water reaches a boiling point, add a tea bag into the hot water. Allow the tea to steep for a few minutes, enabling the flavor to infuse. Once the desired strength is achieved, add milk and sugar according to your taste. Finally, savor the cup of tea.
Adding Decision Steps: Flowchart Enhancement
Let’s enhance our flowchart by adding a decision step that checks if the tea is sweet enough. If it isn’t, we’ll prompt the addition of some sugar. Here’s the modified flowchart:
graph TD
A[Boil Water] --> B[Add Tea Bag]
B --> C[Steep Tea]
C --> D[Add Milk and Sugar]
D --> E[Enjoy Cup of Tea]
D --> F{Tea Sweet Enough?}
F -- No --> H[Add Sugar]
F -- Yes --> EJourney of Making a Cup of Tea: User Journey Diagram
Now, let’s generate a user journey diagram using the syntax of mermaid.js. This diagram will illustrate the journey associated with making a cup of tea. Here’s how it unfolds:
sequenceDiagram
participant User as "You"
participant Kettle as "Kettle"
participant Tea as "Tea"
participant Cup as "Cup"
User -->> Kettle: Fill with water
Kettle -->> Kettle: Boil water
User -->> Tea: Place tea bag in cup
Kettle -->> Cup: Pour hot water over tea bag
User -->> Cup: Add milk and sugar to taste
Cup -->> Cup: Stir
User -->> Cup: Enjoy cup of teaMeal Plan: Gantt Chart
Let’s create a Gantt chart using the syntax of mermaid.js that outlines a plan for a two-course meal, featuring a soup starter and a fish and chips main course. The main course should be served as soon as the starter has been eaten. Here’s the meal plan:
gantt title Soup and Fish and Chips Meal Plan
dateFormat YYYY-MM-DD
section Soup
Make soup: task1, 2020-01-01, 3d
Serve soup: task2, 2020-01-04, 1d
section Fish and Chips
Prepare fish and chips: task3, 2020-01-01, 2d
Cook fish and chips: task4, 2020-01-03, 2d
Serve fish and chips: task5, 2020-01-05, 1dTo improve the meal plan, we can adjust the timing of the main course preparation. This way, it can be served sooner after the soup has been eaten:
gantt title Soup and Fish and Chips Meal Plan
dateFormat YYYY-MM-DD
section Soup
Make soup: task1, 2020-01-01, 3d
Serve soup: task2, 2020-01-04, 1d
section Fish and Chips
Prepare fish and chips: task3, 2020-01-01, 2d
Cook fish and chips: task4, 2020-01-03, 2d
Serve fish and chips: task5, 2020-01-04, 1dVending Machine: State Diagram
Let’s create a state diagram using the valid syntax of mermaid.js to describe a coin-based vending machine. This vending machine must wait for at least the minimum amount of coins to be inserted before vending the goods and returning any change. Here’s the description:
stateDiagram
state "Idle" as idle
state "Coin Inserted" as coin
state "Vending" as vending
state "Change Returned" as change
idle --> coin: minimum amount of coins inserted
coin --> vending: vending button pressed
vending --> change: goods dispensed and change returned
change --> idle: end of transactionTo enhance the vending machine’s functionality, we need to add a loop state that checks if the required amount of money has been given as change. Here’s the updated state diagram:
stateDiagram
state "Idle" as idle
state "Coin Inserted" as coin
state "Vending" as vending
state "Change Returned" as change
state "Checking Change" as checking
idle --> coin: minimum amount of coins inserted
coin --> vending: vending button pressed
vending --> change: goods dispensed and change returned
change --> checking: start checking change
checking --> change: required change given
checking --> idle: end of transactionDoctor’s Patient List: Class Diagram
Let’s generate a class diagram using the syntax of mermaid.js that models a doctor’s patient list, including prescriptions given to each patient by each doctor. Here’s the script:
classDiagram
class Patient {
+firstName: String
+lastName: String
+birthdate: Date
-prescriptions: Prescription[]
}
class Doctor {
+firstName: String
+lastName: String
+specialty: String
-patients: Patient[]
}
class Prescription {
+name: String
+dosage: String
+startDate: Date
+endDate: Date
}
Patient -* Prescription
Doctor -* PatientTo further enhance the class diagram, let’s display the relationship between prescriptions, patients, and doctors:
classDiagram
class Patient {
+firstName: String
+lastName: String
+birthdate: Date
-prescriptions: Prescription[]
}
class Doctor {
+firstName: String
+lastName: String
+specialty: String
-patients: Patient[]
}
class Prescription {
+name: String
+dosage: String
+startDate: Date
+endDate: Date
-doctor: Doctor
}
Patient -* Prescription
Doctor -* Patient
Prescription --> DoctorMaking a Cup of Tea: Block Diagram
Let’s create a block diagram using the syntax provided by the blockdiag.com diagram generator. This diagram will illustrate the process of making either a cup of tea or a cup of coffee. Here’s the script:
{
A -> B -> C -> D -> E -> F -> G
A -> H -> I -> J -> G
}Preview the result using the blockdiag interactive previewer.
2FA Process: Sequence Diagram
Now, let’s generate a sequence diagram using the seqdiag syntax provided by the blockdiag.com diagram generator. This diagram will depict a 2FA process. Here’s a sample format:
seqdiag {
user -> webserver [label = "Enter username"]
webserver -> user [label = "Prompt for password"]
user -> webserver [label = "Enter password"]
webserver -> 2FA_provider [label = "Verify password"]
2FA_provider -> webserver [label = "Send 2FA code"]
webserver -> user [label = "Prompt for 2FA code"]
user -> webserver [label = "Enter 2FA code"]
webserver -> 2FA_provider [label = "Verify 2FA code"]
2FA_provider -> webserver [label = "Access granted"]
webserver <- user
}Here’s the 2FA process illustrated in the seqdiag previewer.
Making a Cup of Tea: Activity Diagram
Let’s generate an activity diagram that describes how to make a cup of tea. We’ll use the actdiag syntax provided by the blockdiag.com diagram generator. The lanes might include “cupboard,” “sink,” “kettle,” and more. Here’s an example format:
actdiag {
fill_kettle -> boil_kettle -> place_teabag -> pour_water -> add_milk -> stir -> drink
cupboard {
label = "Cupboard"
tea [label = "Get teabag"]
milk [label = "Get milk"]
}
sink {
label = "Sink"
fill_kettle [label = "Fill kettle"]
}
kettle {
label = "Kettle"
boil_kettle [label = "Boil water"]
pour_water [label = "Pour water into cup"]
}
cup {
label = "Cup"
place_teabag [label = "Place teabag in cup"]
add_milk [label = "Add milk"]
stir [label = "Stir"]
drink [label = "Drink"]
}
}And here’s the activity diagram previewed in the actdiag previewer.
Office Network: Network Diagram
Let’s generate a network diagram using the nwdiag syntax provided by the blockdiag.com diagram generator. This diagram will describe a simple office network with an intranet and a public network, both having access to the public network, and an isolated test area network only accessible from the intranet. Here’s the complete script:
nwdiag {
network dmz {
address = "210.x.x.x/24"
web01 [address = "210.x.x.1"]
web02 [address = "210.x.x.2"]
}
network internal {
address = "172.x.x.x/24"
web01 [address = "172.x.x.1"]
db01
app01
}
}Preview the result in the nwdiag previewer.
These are just a few examples of the various types of diagrams you can generate using ChatGPT. Experiment with different packages and techniques, and feel free to share your experiences and creations. If you write about them elsewhere, don’t forget to link back to this article or mention it in the comments section. Happy diagramming!
PS: If you’re interested in exploring other AI-powered creations, check out our article on MIDI madness with ChatGPT via the R-Bloggers syndication.
