For years and years now I’ve tried to argue the case for using tools that will generate diagrams from text and never really met with much success. To me it seems like an obvious thing to do: it makes for more maintainable assets, and it can speed up iteration cycles if you are trying to get a the logicial, relational elements of the diagram right. Automated layout engines, and style theming potentally give you a lot of flexibility in how the rendered diagram looks, although custom theming tends not to be explicitly offered in most of the diagramming packages of which I am aware.
As a text generation engine, the ability of ChatGPT to generate code is well known. So if it can generate code, can it also generate diagrams from descriptions by mapping the description onto a text based diagramming package language format? I’ve already posted a couple of demos showing that it can, but here’s a more general post on the topic.
In this post, as well as demonstrating the range of diagram script types that can be generated, I also hope to hint at how we can use ChatGPT as part of an iteractive visual thinking process, getting ChatGPT to generate base diagrams and then using further prompts to iterate on them.
As with my previous “chats”, I am not really looking to deeply at the correctness of the generated responses. In most cases, I naively accept them and use them as the basis of the the nxt prompt.
The initial prompt for each new diagram type is started in a new thread.
Generate a flowchart using valid mermaid.js syntax that shows the process for making a cup of tea. Then explain the process.
Me to ChatGPT
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]
The process for making a cup of tea starts by boiling water in a kettle or pot. Once the water is boiling, a tea bag is added to the hot water. The tea is then steeped for a few minutes to allow the flavor to infuse into the water. After the desired strength of tea is reached, milk and sugar can be added to taste. The final step is to enjoy the cup of tea.
We can render the script in a mermaid.js previewer:
Add a decision step that checks if the tea is sweet enough, and if it isn’t add some sugar.
Me to ChatGPT
In the following example, ChatGPT used a different diagram type to the one I prompted for…
Using mermaid.js user journey daigram syntax, generate a diagram that shows the journey associated with making a cup of tea
Me to ChatGPT
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 tea
How about a Gantt chart?
Using mermaid.js v. 9.2.2 Gantt chart daigram syntax, generate a diagram script that provides a plan for how to make and serve a two course meal featuring a soup starter and a fish an chiips main course. The main course should be served as soon has the starter has been eaten.
Me to ChatGPT
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-04, 2d
Cook fish and chips: task4, 2020-01-06, 2d
Serve fish and chips: task5, 2020-01-08, 1d
It would be better if the main course preparation started earlier so that it could be served sooner after the soup had been eaten.
Me to ChatGPT
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, 1d
Using valid mermaid.js statediagram syntax, generate a description for a coin based vending machine that must wait for at least the minimum amount of coins to be inserted before vending the goods and returning any change.
Me to ChatGPT
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 transaction
The machine needs a loop state that checks if the required amount of money has been given as change.
Me to ChatGPT
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 transaction
Using mermaid.js classdiagram syntax, generate a valid script for a diagram that could be used to model a doctor’s patient list, including prescriptions given to each patient by each doctor
Me to ChaGPT
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 --* Patient
We also need to be able to see which prescriptions were provided to which patient by which doctor
Me to ChatGPT
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 --> Doctor
Using the syntax used by the http://blockdiag.com/ diagram generator, generate a script for a block diagram that shows the process of making a cup of tea or a cup of coffee
Me to ChatGPT
We can preview the result using the blockdiag interactive previewer:
In the following example, I found the prompt effectiveness was dramatically improved by giving an example of the correct syntax copied directly fro the documentation.
Using the seqdiag syntax used by the http://blockdiag.com/ diagram generator, generate a script for a sequence diagram that shows a 2FA process
An example format looks like this:
seqdiag {
browser -> webserver [label = “GET /index.html”];
browser <– webserver;
browser -> webserver [label = “POST /blog/comment”];
webserver -> database [label = “INSERT comment”];
webserver <– database; browser <– webserver;
}
Me to ChatGPT
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 what it looks like in the seqdiag previewer:
Using the actdiag syntax used by the http://blockdiag.com/ diagram generator, generate a valid script for an activity diagram that describes how to make a cup of tea. Lanes might include “cupboard”, “sink”, “kettle” etc. An example format looks like this:
actdiag {
write -> convert -> image
lane user {
label = “User”
write [label = “Writing reST”];
image [label = “Get diagram IMAGE”];
}
lane actdiag {
convert [label = “Convert reST to Image”];
}
}
Me to ChatGPT
actdiag {
fill_kettle -> boil_kettle -> place_teabag -> pour_water -> add_milk -> stir -> drink
lane cupboard {
label = "Cupboard"
tea [label = "Get teabag"];
milk [label = "Get milk"];
}
lane sink {
label = "Sink"
fill_kettle [label = "Fill kettle"];
}
lane kettle {
label = "Kettle"
boil_kettle [label = "Boil water"];
pour_water [label = "Pour water into cup"];
}
lane cup {
label = "Cup"
place_teabag [label = "Place teabag in cup"];
add_milk [label = "Add milk"];
stir [label = "Stir"];
drink [label = "Drink"];
}
}
And previewing that in the actdiag previewer:
Using the nwdiag syntax used by the http://blockdiag.com/ diagram generator, generate a valid script for a network diagram that describes a simple office network with an intranet and a public network which both have access to the public network, and an isolated test area network that is only accessible from the intranet. Display the complete answer in a single preformatted code block.
The syntax looks like this:
{ 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;
}
}
Me to ChatGPT
And here is the result previewed in the nwdiag previewer:
Other diagram types are also available via the blogdiag suite of tools. For example, rack diagrams (generate a valid script for a rack diagram that describes a couple of racks that you might find in a data center running large language model services as well as simple websites. Use whataver height racks (XU, which is to say, X units high) are appropriate):
Please generate a flow chart using the syntax used by the https://flowchart.js.org/ package that describes a quicksort algorithm
Me to ChatGPT
And here is the response in the flowchart.js previewer:
Hmmm…
How about bubble sort?
Me to ChatGPT
Hmm again….
Maybe those prompts need working up to. In a new thread:
Describe the quicksort algorithm.
Me to ChatGPT
Please generate a script for a flow chart describing the algorithm you described that uses the syntax used by the https://flowchart.js.org/ package.
Me to ChatGPT
Where you say “recursively apply”, shouldn’t there be some sort of decision and a loop?
Me to ChatGPT
Generate a wavedrom script to show a timing diagram for a shift register
Me to ChatGPT
Here’s what it looks like [wavedrom previewer]:
That’s enough for now. Next, I wonder if we can use ChatGPT to generate TIkZ scripts, and scripts that generate diagrams using other LaTeX drawing packages?
If you do any of your own experiments with generating diagrams using any of these packages/techniques, or others, and you write them up somewhere, please link back here or add a link in the comments.
PS not pictures, but music… MIDI madness with ChatGPT: the AI-powered tunes that will make you laugh, cry, and dance. The post is syndicated via R-Bloggers but the original link doesn’t resolve?
OUseful.Info, the blog... 