Generating Diagrams with ChatGPT

by

ChatGPT, a large language model trained on diverse content, is capable of generating responses beyond just English text. It can produce code in various programming languages and even create visual content like diagrams. In this article, you will learn:

  • How to instruct ChatGPT to create block diagrams and sequence diagrams.
  • The general guidelines for having ChatGPT generate diagrams for you.

Let’s dive in!

Overview

This article is organized into three main sections:

  1. Building a System Design Block Diagram
  2. Creating a Sequence Diagram
  3. Limitations and Tips for Graphics Generation

Building a System Design Block Diagram

In today’s software landscape, scalability is crucial. Large systems often need to be divided into smaller components running on separate hardware, collaborating over networks to accomplish tasks. This approach is a significant shift from earlier software design, which often involved single-computer installations.

Let’s consider a cloud-based file storage system that interfaces with a mobile app. While you could search online for how such a system is structured to support a vast user base, a visual representation can provide clarity. To generate this diagram with ChatGPT, you can use the following prompt:

“A cloud file storage service consists of:

  1. A mobile client with a local database, an index controller, a chunk controller, and a watcher component.
  2. These components interact with server-side components via a load balancer.
  3. A notification server pushes updates (like file changes) to the client, handled by the watcher component.
  4. File uploads and downloads are managed by a file processing server that indexes and breaks files into chunks, storing them in cloud storage.
  5. Metadata is processed by a metadata server and stored in a metadata database.
  6. All operations are streamlined using a message queue built on Kafka.

Please create a block diagram using the Mermaid syntax.”

This prompt effectively communicates both the components of the system and their interactions, and specifies the desired format.

Expected Response from ChatGPT:

graph TD
    subgraph Mobile Client
      A[Local Database] --> B[Index Controller]
      B --> C[Chunk Controller]
      C --> D[Watcher]
    end

    subgraph Server Side
      E[Load Balancer] --> F[Controllers]
      E --> G[Watcher]
      F --> H[File Processing Server]
      H --> I[Cloud Storage]
      F --> J[Metadata Server]
      J --> K[Metadata Database]
      J --> L[Notification Server]
      L --> G
    end

    subgraph Message Queue
      M[Kafka]
    end

    A -- Notify changes --> D
    D -- Watch events --> G
    G -- Notify events --> D
    F -- Upload/Download files --> H
    H -- Store/Retrieve chunks --> I
    F -- Process metadata --> J
    J -- Store metadata --> K
    F -- Push notifications --> L
    L -- Publish messages --> M
    M -- Subscribe to messages --> G

This diagram outlines the mobile client and server-side interactions clearly. You can further improve the Mermaid code by adding colors or rearranging elements to enhance its visual appeal. Importantly, Mermaid.js is a text-based visualization library that allows for easy rendering of graphics.

Creating a Sequence Diagram

Let’s explore how to create a sequence diagram, another useful graphic in software engineering that depicts how various components interact over time.

For this example, let’s ask ChatGPT to generate a sequence diagram for logging into a web application using OAuth2:

“How does a user interact with a web app to log in using OAuth2? Please generate a sequence diagram in PlantUML syntax.”

Expected Response from ChatGPT:

@startuml
actor User
participant "Web App" as WebApp
participant "OAuth2 Provider" as OAuthProvider

User -> WebApp: Access web app
WebApp -> User: Display login button
User -> WebApp: Clicks login button
WebApp -> OAuthProvider: Redirects user to OAuthProvider
User -> OAuthProvider: Enters credentials
OAuthProvider -> User: Validates credentials
OAuthProvider -> WebApp: Redirects user with authorization code
WebApp -> OAuthProvider: Sends authorization code
OAuthProvider -> WebApp: Sends access token
WebApp -> User: Logs in user
@enduml

This sequence diagram outlines the key steps involved in the OAuth2 login process, including the interactions between the user, the web app, and the OAuth2 provider. You can then run this code on the PlantUML Online Server to visualize the diagram.

Limitations and Tips for Graphics Generation

While ChatGPT is versatile, its training data does limit its ability to generate graphics. Creating diagrams is not its primary focus, and it can struggle with certain graphics, particularly schematic diagrams of electronic circuits.

Furthermore, if you simply request a diagram, ChatGPT may default to producing ASCII art, which may not be visually appealing. Therefore, it’s essential to specify the graphics language you want and to include adequate details in your request. Here are some valuable options:

  • Mermaid: Suitable for flowcharts, sequence diagrams, entity-relationship diagrams, and more.
  • PlantUML: Excellent for various UML diagrams, including sequence and class diagrams.
  • Graphviz (Dot language): Effective for simple diagrams with nodes and connections.
  • TikZ: A LaTeX package for creating high-quality graphics.
  • Circuitikz: A specific version of TikZ designed for circuit diagrams.

Summary

In this article, you learned that ChatGPT is capable of generating not only text but also diagrams using various graphic syntax formats. Specifically, you explored how to:

  • Generate a block diagram depicting the interactions within a cloud storage service.
  • Create a sequence diagram illustrating the OAuth2 login process.

The key to successfully generating graphics with ChatGPT lies in providing detailed descriptions and explicitly stating the desired format for the diagram. With clear instructions, you can effectively utilize ChatGPT to visualize complex systems and processes.

Leave a Comment