Pullout | How to Use ChatGPT to Draw Diagrams in Just a Few Seconds

Step 1: Record Your Process

• Narrate your process or journey out loud and record it using a video or a dictaphone.

<aside> 📢

I like to use Wispr Flow for dictation especially for technical work.

👉🏼 Click the link here 👈🏼 to get a FREE MONTH of Wispr Flow Pro

</aside>

• Example: “How to Sign Up, Request Pricing, and Complete a Purchase”
  • List the key steps verbally:
    • Sign up for an account on the website.
    • Request pricing by filling out a form.
    • Receive pricing details from an account manager.
    • Log back in to make a purchase.
    • Add items to your basket, checkout, and complete payment.

Step 2: Convert to Steps for ChatGPT

Upload the key steps to ChatGPT and ask for a Mermaid or PlantUML diagram.

• Example Prompt to ChatGPT:
  • “Turn these steps into a Mermaid sequence diagram for process visualisation:
  1. Customer signs up for an account.
  2. Website sends an email for verification.
  3. Customer logs in to request pricing.
  4. Account manager sends pricing details.
  5. Customer logs back in, adds items to the basket, and checks out.”*

Step 3: Generate the Mermaid Diagram

Here’s an example of what ChatGPT will generate:

sequenceDiagram
    participant Customer
    participant Website
    participant AccountManager
    participant PaymentGateway

    Customer->>Website: Sign Up
    Website->>Customer: Verify Email
    Customer->>Website: Log In
    Customer->>Website: Request Pricing
    Website->>AccountManager: Forward Pricing Request
    AccountManager->>Customer: Send Pricing Details
    Customer->>Website: Log In
    Customer->>Website: Add Items to Basket
    Customer->>Website: Checkout

    alt Pay on Account
        Customer->>Website: Select "Pay on Account"
        Website->>Customer: Confirm Order
    else Pay by Credit Card
        Customer->>PaymentGateway: Enter Credit Card Details
        PaymentGateway->>Website: Confirm Payment
        Website->>Customer: Confirm Order
    end

    Website->>Customer: Send Order Confirmation

<aside> 🐞

Getting errors when you paste your mermaid code?

Claude, ChatGPT, Grok they all make mistakes with mermaid when you start to get a little complex.

Checkout this Mermaid Prompt to help your LLM draw better diagrams. You will have less errors but LLMS will still make mistakes.

</aside>

Step 4: Import to Draw.io or Mermaid

You have two choices right here depending on your preference. Draw.io or Mermaid