Target readers: software engineers, architects, IT professionals, designers, etc.
Article goal: to improve our work efficiency
Construct system design frame diagram
Graphics Generation Limitations and Tricks
Large language models trained with appropriate content can generate responses beyond English text. For example, ChatGPT is known to be able to generate code in several programming languages. In fact, you can also ask ChatGPT to generate other content, such as pictures, diagrams, etc.
let's start.
overview
This article is divided into three parts; they are
- Construct system design frame diagram
- Build a sequence diagram
- Graphics Generation Limitations and Tricks
Construct system design frame diagram
In today's software industry, scalability is an inevitable consideration. This means that a rather large system must be broken down into smaller pieces and run on isolated hardware. These parts will cooperate 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's consider a cloud-based file storage system that can interact with a mobile application. If you search the Internet, it is not difficult to understand 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 a picture. Prompts can be as follows:
A cloud file storage service has the following components:
1. A mobile client that includes a local database, an index controller, a block controller, and an observer component
2. The controller and observer components interact with the server side through a load balancer
3. There is a notification server on the server to update files, etc. Messages are pushed to the client, and the client's watcher component processes the messages.
4. The upload and download of the file is handled by the file processing server, and the file is indexed and broken into chunks. These blocks are stored in cloud storage.
5. The metadata of the file is processed by the metadata server and stored in the metadata database.
6. All these operations are simplified using a message queue built on top of Kafka.Please create a block diagram for this using Mermaid syntax.
Building such hints has two key properties:
- Clearly notes system components and how they interact
- Request to use Mermaid syntax for diagrams
A detailed description of 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 get graphs, you need a graph generation language that can be rendered in plain text . Mermaid.js is an example.
ChatGPT responds as follows:
certainly! The following is a block diagram representing the components and their interactions in a 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 --> GThe mobile client consists of local database, index controller, block controller and watcher components. These components interact with server-side components through load balancers. The server side consists of a controller, a file processing server, a metadata server, and a notification server. The file processing server handles the upload and download of files, breaks them down into chunks and stores them in cloud storage. A metadata server processes metadata for files and stores it in a metadata database. Notification servers push messages (such as file updates) to clients, which are handled by watcher 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 responses are diagrams in Mermaid.js syntax. If you copy them to the online Mermaid Live Editor , you'll get something like this:
Mermaid is a Javascript library that can render various graphics on the web. You can further refine the code to add color or move blocks to different positions on the canvas. However, if you need visualization of the system, ChatGPT is already a great help.
In fact, you can combine this technique with others, such as giving ChatGPT a high-level view of your system and asking it to tell you about the system components. Then in a follow-up prompt, ask ChatGPT to convert it into a graph.
You can try the following tips as examples:
What are the system components behind social media like Twitter? How do they interact?
Then in a subsequent prompt,
Please provide a block diagram of the above Mermaid grammar.
Build a sequence diagram
As another example, let's ask ChatGPT to generate a sequence graph. It is another commonly used graph in software engineering, depicting how different components interact in a timeline.
Contrary to the above, let ChatGPT figure out the components and interactions and generate the picture in the same prompt:
How do users interact with the web application and log in using OAuth2? Please use PlantUML syntax to generate sequence diagrams to explain.
OAuth2 is a common authentication method on web applications. The web application server does not require you to create an account, but uses an account from another platform instead. For example, you can log into ChatGPT with your Google account. Google checks your passwords, but the application (ChatGPT) is not owned by Google. There are many parties involved in this process.
Here's how ChatGPT explains the process to you:
certainly! I can help you generate sequence diagrams using PlantUML syntax to illustrate how users interact with your web application and log 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 @endumlIn this diagram, the steps are as follows:1. A user accesses a web application.
2. The web application presents 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 verifies the user's credentials.
7. The OAuth2 provider redirects the user back to the web application with an authorization code.
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 logs in the user using the access token.Note that this diagram provides a high-level overview of the OAuth2 login process and may not include all complexities of the protocol or specific implementation details. It serves as a simplified representation of the general process.
Here, you need a different graphical 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 occur and how access tokens are created.
Note that this works because ChatGPT clarifies exactly how this process works. If your process is too complex or ChatGPT doesn't know, you should provide details of how the different components interact in the hint and ask ChatGPT to translate your description into graphical language.
Graphics Generation Limitations and Tricks
As a language model, its training data largely limits its capabilities. Generating graphs may not be the main interest in building ChatGPT. ChatGPT is known to be weak in some graphics, such as electronic circuit schematics.
Also note that if you ask ChatGPT to give you a diagram, by default it will assume that you are referring to some kind of "ASCII art", which usually doesn't look right. Therefore, one must specify some graphics language to use, and then render the output as graphics. Here are some examples:
- As you can see in the first example above, Mermaid can make flowcharts, sequence diagrams, entity relationship diagrams, Gantt charts and mind maps
- PlantUML, as used in another example above, can make many UML diagrams, including sequence diagrams, state diagrams, class diagrams
- For other simple graphs (e.g. graphs with only nodes and arrows), you can ask Graphviz syntax, also known as "dot language"
- For general graphics you can ask for the TikZ syntax, which is a package in LaTeX
- For circuits, there's Circuitikz, which is a specialized version of TikZ
summarize
In this post, you learned that ChatGPT can generate not only text, but also graphics, albeit in the form of some graphical language. Specifically, you saw how ChatGPT
- Generate a block diagram depicting the interaction of the 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 graphs is to give enough details about how the graphs were generated. You should specify the format (for example, in Mermaid syntax) and provide sufficient detail about the content of the visualization.