Diagrams with ChatGPT and mermaid.js

    31/05/23 - #chatgpt #mermaidjs #diagrams

ChatGPT + mermaid.js

What would happen if ChatGPT had an illegitimate child from mermaid-js?

That ChatGPT knows the standard markdown syntax is already a known fact, but in addition to text formatting, AI can do much more by taking advantage of mermaid-js syntax. If you want to understand how to create complex diagrams with ChatGPT and mermaid-js you have found the right article. I proceed directly by examples, showing prompts and results to create some diagrams.

FlowChart Diagram

Prompt:

create a flowchart diagram in markdown using mermaid-js syntax to show the process of choice a dress

Output:

graph TD

A[Select Event] --> B[Choose Dress Style]
B --> C[Select Color]
B --> D1[Formal]
B --> D2[Semi-Formal]
B --> D3[Casual]
B --> D4[Themed]
C --> E1[Black]
C --> E2[White]
C --> E3[Red]
C --> E4[Blue]
C --> E5[Green]
C --> E6[Yellow]
C --> E7[Other]
D1 --> F1[Long Gown]
D1 --> F2[Midi Dress]
D1 --> F3[Two-pieces]
D2 --> G1[Cocktail Dress]
D2 --> G2[Skater Dress]
D2 --> G3[Short Gown]
D3 --> H1[Maxi Dress]
D3 --> H2[Wrap Dress]
D3 --> H3[Shift Dress]
D4 --> I1[Costume]
D4 --> I2[Vintage]
D4 --> I3[Character-inspired]
E1 --> J1[Black Style]
E2 --> J2[White Style]
E3 --> J3[Red Style]
E4 --> J4[Blue Style]
E5 --> J5[Green Style]
E6 --> J6[Yellow Style]
E7 --> J7[Other Color Style]

F1 --> J8[Formal - Long Gown]
F2 --> J9[Formal - Midi Dress]
F3 --> J10[Formal - Two-pieces]
G1 --> J11[Semi-Formal - Cocktail Dress]
G2 --> J12[Semi-Formal - Skater Dress]
G3 --> J13[Semi-Formal - Short Gown]
H1 --> J14[Casual - Maxi Dress]
H2 --> J15[Casual - Wrap Dress]
H3 --> J16[Casual - Shift Dress]
I1 --> J17[Themed - Costume]
I2 --> J18[Themed - Vintage]
I3 --> J19[Themed - Character-inspired]

J1 --> K1[Selected Dress in Black]
J2 --> K2[Selected Dress in White]
J3 --> K3[Selected Dress in Red]
J4 --> K4[Selected Dress in Blue]
J5 --> K5[Selected Dress in Green]
J6 --> K6[Selected Dress in Yellow]
J7 --> K7[Selected Dress in Other Color]
J8 --> K8[Selected Long Gown]
J9 --> K9[Selected Midi Dress]
J10 --> K10[Selected Two-pieces]
J11 --> K11[Selected Cocktail Dress]
J12 --> K12[Selected Skater Dress]
J13 --> K13[Selected Short Gown]
J14 --> K14[Selected Maxi Dress]
J15 --> K15[Selected Wrap Dress]
J16 --> K16[Selected Shift Dress]
J17 --> K17[Selected Costume]
J18 --> K18[Selected Vintage]
J19 --> K19[Selected Character-inspired]

K1 --> L[Try Selected Dress]
K2 --> L
K3 --> L
K4 --> L
K5 --> L
K6 --> L
K7 --> L
K8 --> L
K9 --> L
K10 --> L
K11 --> L
K12 --> L
K13 --> L
K14 --> L
K15 --> L
K16 --> L
K17 --> L
K18 --> L
K19 --> L

L --> M[Check Fit and Comfort]
M --> N1[Dress Fits and is Comfortable]
M --> N2[Dress Needs Alterations]
M --> N3[Dress Doesn't Fit Well]

N1 --> O[Complete Purchase]
N2 --> P[Request Alterations]
N3 --> Q[Return to Dress Selection]

P --> O
Q --> Am

GANTT Diagram

Prompt:

Create a GANTT markdown diagram using mermaid-js syntax to show how to a developer can organize a day

Output:

gantt
dateFormat  HH:mm
axisFormat  %H:%m
title Developer's Daily Schedule

section Morning Routine
Wake up             : 07:00, 30min
Breakfast           : 07:30, 30min
Exercise            : 08:00, 1h
Shower              : 09:00, 30min

section Work Tasks
Check Emails        : 09:30, 30min
Morning Standup     : 10:00, 15min
Coding Session 1    : 10:15, 2h
Review Code         : 12:15, 45min
Lunch               : 13:00, 1h
Coding Session 2    : 14:00, 2h
Research & Learning : 16:00, 1h

section Breaks
Morning Break       : 12:00, 15min
Afternoon Break     : 15:00, 15min
Evening Break       : 17:00, 15min

section Evening
Dinner              : 17:15, 
    45min
Relax & Hobbies     : 18:00, 2h
Review & Plan       : 20:00, 30min
Socialize           : 20:30, 1h
Wind Down           : 21:30, 1h
Sleep               : 22:30, 8h5m 

Git Graph

Prompt:

Create a sample git graph markdown diagram using mermaid-js syntax 

Output:

graph LR
A[Initial commit] --> B[Feature 1]
B --> C[Feature 2]
C --> D{Release 1}
D --> E[Feature 3]
D --> F("Hotfix 1")
F --> G{Release 2}
E --> H{Release 3}

Entity Relationship Diagram

Prompt:

Create an Entity Relationship Diagram markdown diagram using mermaid-js syntax to describe a database for customers and orders

Output:

erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER { 
    int id
    string first_name
    string last_name
    string email
    string phone_number
}
ORDER {
    int id
    string order_number
    date order_date
    string status
    float total_price
}

Starting from these examples you can customize the prompt to create diagrams for data visualization in no time. And that's probably how AI will take over the world 😎.