Learn to use AI to generate system framework diagrams and sequence diagrams

For readers:Software engineers, architects, IT professionals, designers, etc.

Article goal: Improve our work efficiency

Overview

Build system design framework diagram

Build sequence diagram

Limitations and tips for graph generation

generalize

Large language models trained with appropriate content can generate responses beyond just English text. For example, ChatGPT is known to be able to generate code in multiple programming languages. In fact, you can also ask ChatGPT to generate other content such as images, charts, and more.
let’s start.

Overview

This article is divided into three parts; they are

  • Build system design framework diagram
  • Build sequence diagram
  • Limitations and tips for graph generation

Build system design framework diagram

In today’s software industry, scalability is unavoidable. This means that a fairly large system must be broken into smaller parts and run on isolated hardware. These parts will collaborate through the network to complete the task. This is in stark contrast to the pre-Internet era, when software was designed to be installed and run on a single computer.

Let us consider a cloud-based file storage system that can interact with mobile applications. If you search online, it’s not hard to see how such a system is built to support a large number of users. But a picture is worth a thousand words. You can describe such a system to ChatGPT and ask it to generate an image. Tips can be as follows:

The cloud file storage service has the following components:

1. A mobile client, including local database, index controller, block controller and observer components
2. The controller and observer components interact with the server side through the load balancer
3. There is a notification server on the server that pushes messages such as file updates to the client, and the client’s watcher component will process these messages.
4. Uploading and downloading of files is handled by the file processing server, and the files are indexed and broken into chunks. These blocks are stored in cloud storage.
5. The file’s metadata is processed by the metadata server and stored in the metadata database.
6. All these operations are simplified using message queues built on top of Kafka.

Please create a block diagram for this using Mermaid syntax.

There are two key properties for building such prompts:

  • Clearly note down system components and how they interact
  • Request to use Mermaid syntax for charts

Detailing what components should be included and how they should interact is important to correctly display the elements in the diagram. However, ChatGPT can generate text but not graphics. In order to obtain graphs, you need agraph generation language that can be rendered as plain text. Mermaid.js is an example.

ChatGPT’s response is as follows:

certainly! The following is a block diagram representing the components and their interactions in the cloud file storage service:

mermaid
Copy code
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

The mobile client consists of local database, index controller, block controller and observer components. These components interact with server-side components through load balancers. The server side consists of the controller, file processing server, metadata server and notification server. File processing servers handle the uploading and downloading of files, breaking them into chunks and storing them in cloud storage. The metadata server processes a file’s metadata and stores it in a metadata database. Notification servers push messages (such as file updates) to clients, and these messages are handled by observer components. All of these operations are simplified using message queues built on top of Kafka.

Note that this is a simplified representation and there may be additional components or interactions depending on the specific implementation of the cloud file storage service.

The code blocks in the response are diagrams in Mermaid.js syntax. If you copy them to the online Mermaid Live Editor you will get the following:

Mermaid is a Javascript library that can render various graphics on web pages. You can further refine the code to add color or move blocks to different locations on the canvas. However, if you need visualization of your system, ChatGPT is already a great help.

In fact, you can combine this technique with other techniques, such as providing ChatGPT with high-level targets for your system and asking it to tell you about its components. Then in a subsequent prompt, ask ChatGPT to convert it into a chart.

You can try the following tips as examples:

What are the system components behind social media like Twitter? How do they interact?

Then in subsequent prompts,

Please provide a block diagram of the above Mermaid syntax.

Build sequence diagram

As another example, let’s ask ChatGPT to generate a sequence diagram. It is another commonly used diagram in software engineering to describe how different components interact in a timeline.

Contrary to the above, let ChatGPT figure out the components and interactions and generate the image in the same prompt:

How do users interact with the web application and log in using OAuth2? Please generate sequence diagram using PlantUML syntax to explain.

OAuth2 is a common authentication method on web applications, where the web application server does not require you to create an account, instead using accounts from other platforms instead. For example, you can log in to ChatGPT using your Google account. Google checks your password, but the application (ChatGPT) does not belong to Google. There are many parties involved in this process.

Here’s how ChatGPT explains the process to you:

certainly! I can help you generate a sequence diagram using PlantUML syntax to illustrate how a user interacts with a web application and logs in using OAuth2. The indication is as follows:

plantuml
Copy code
@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

In this diagram, the steps are as follows:

1. User accesses a web application.
2. The web application displays a login button to the user.
3. The user clicks the login button.
4. The web application redirects the user to the OAuth2 provider.
5. The user enters their credentials on the OAuth2 provider’s login page.
6. The OAuth2 provider validates the user’s credentials.
7. The OAuth2 provider uses the authorization code to redirect the user back to the web application.
8. The Web App sends the authorization code to the OAuth2 Provider.
9. The OAuth2 Provider exchanges the authorization code for an access token.
10. The OAuth2 provider sends the access token back to the web application.
11. The web application uses the access token to log in the user.

Note that this diagram provides a high-level overview of the OAuth2 login process and may not include all of the protocol’s complexities or specific implementation details. It serves as a simplified representation of a general process.

Here you need a different graphics syntax “language”: PlantUML. You can copy the above code and run it on PlantUML Online Server. The picture you get is as follows:

This sequence diagram explains how login and authentication happen and how the access token is created.

Note that this works because ChatGPT can illustrate exactly how this process works. If your process is too complex or unknown to ChatGPT, you should provide details in the prompt about how the different components interact and ask ChatGPT to convert your description into a graphical language.

Limitations and techniques of graphics generation

As a language model, its training data limits its capabilities to a great extent. Generating graphs may not be the primary interest in building ChatGPT. ChatGPT is known to be weak in certain graphics areas, such as electronic circuit schematics.

Also note that if you ask ChatGPT to give you a chart, by default it will assume you mean some kind of “ASCII art”, which often doesn’t seem right. Therefore, you must specify some graphics language to use and then render the output as a graphic. Here are some examples:

  • As you can see in the first example above, Mermaid can create flowcharts, sequence diagrams, entity relationship diagrams, Gantt charts, and mind maps
  • PlantUML, as used in another example above, can produce many UML diagrams, including sequence diagrams, state diagrams, and class diagrams
  • For other simple graphs (e.g. graphs with just nodes and arrows) you can ask for the Graphviz syntax, also known as the “dot language”
  • For general graphics you can ask for the TikZ syntax, which is a package in LaTeX
  • For circuits, there’s Circuitikz, a specialized version of TikZ

Summary

In this article, you learned that ChatGPT can generate not only text but also graphics, albeit in the form of a graphical language. Specifically, you saw how ChatGPT

  • Generate a block diagram describing the interactions between parties based on your description
  • Generate a sequence diagram to explain complex logic to answer your questions

Most importantly, the key to getting ChatGPT to generate a graph is to give enough details about how to generate the graph. You should specify the format (for example, using Mermaid syntax) and provide sufficient details about the content of the visualization.

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Python entry skill treeHomepageOverview 340443 people are learning the system