Automated Diagram Creation with ChatGPT

Introduction

Imagine constructing a house without a blueprint.

Sounds chaotic, right?

Similarly, diving into software coding without a UML or sequence diagram is like building that house blindly.

Just as architects rely on blueprints, developers can rely on diagrams to build a clear project architecture that guides during the coding phase.

• It paints a clear roadmap of what needs to be developed.
• It ensures everyone is on the same page.
• It saves time during the execution phase.

Unfortunately, this phase is often overlooked.

It takes time, and you quickly get overwhelmed with so many tools and ways to sketch out diagrams.

Now, imagine you can quickly draft diagrams, even during team meetings, so you can visualize complex workflows on the fly.

This is what we will cover today.

I will share a step-by-step guide on the Little-Known secret of automating diagram creation with ChatGPT (and it can be done all with a free version)

Here's how step-by-step:

Step 1: Create a sample application

The first thing we need is an application.

For this example, I will use the following prompt to generate a Java Rest application for borrowing technical books.

Create a Java rest application based on Spring Boot that allows borrowing technical books to users
admins have dedicated role that are able to add books, remove books
users and admins can log in by using Google OAuth as an authentication provider
 
As the first step, show me the directory structure

Since I am not interested in code but still curious about how the project would look, I have added.

As the first step, show me the directory structure.

ChatGPT will also give an explanation for each class.

If this is something you are not interested in, just add the word "only".

As the first step, show me only the directory structure.

Using ASCII art, ChatGPT will present a directory structure.

Hint: Sometimes chatGPT will "glitch" meaning it won't give you the full result, so just hit "continue" to get the entire output.

Step 2: Quick and dirty way to create a diagram in ChatGPT

Now, it's time to visualize the UML diagram.

Ask ChatGpt to create a UML and sequence diagram.

Prompt:

*Create a UML and Sequence diagram using ASCII*

You will get an ASCII representation.

Do you see the problem?

First, there is the limitation of using text to visualize.

Second, good luck with maintaining these.

Step 3: Using the right tools to create UML

To get things further, let's use the proper tools.

There are many tools on the market you can use to create UML. However, not all can be represented as text.

PlantUML and MermaId are both tools that use specific diagram notations in which we can render our final diagram.

Personally, I prefer MermaId as it is simpler to use

Now we can use the same prompt, but this time, ask for output for Mermaid

Using generated directory structure, generate UML diagram for MermaId tool

Now copy the output to the MermaId tool: https://mermaid.live/

classDiagram
    class Application {
        + main(args: String[]): void
    }
    class WebSecurityConfig {
        <<configuration>>
    }
    class OAuth2Config {
        <<configuration>>
    }
    class BookController {
        + addBook(bookDTO: BookDTO): ResponseEntity<?>
        + removeBook(bookId: Long): ResponseEntity<?>
    }
    class UserController {
        + addUser(userDTO: UserDTO): ResponseEntity<?>
        + removeUser(userId: Long): ResponseEntity<?>
    }
    class AuthController {
        + loginUser(): ResponseEntity<?>
    }
    class Book {
        - id: Long
        - title: String
        - author: String
        - available: boolean
    }
    class User {
        - id: Long
        - username: String
        - password: String
        - email: String
        - roles: Set<UserRole>
    }
    class UserRole {
        <<enumeration>>
        - USER
        - ADMIN
    }
    class BookRepository {
        <<interface>>
    }
    class UserRepository {
        <<interface>>
    }
    class BookService {
        + addBook(bookDTO: BookDTO): Book
        + removeBook(bookId: Long): void
    }
    class UserService {
        + addUser(userDTO: UserDTO): User
        + removeUser(userId: Long): void
    }
    class UserDetailsServiceImpl {
        <<service>>
    }
    class BookDTO {
        - title: String
        - author: String
    }
    class UserDTO {
        - username: String
        - password: String
        - email: String
    }
 
    Application --|> WebSecurityConfig
    Application --|> OAuth2Config
    BookController --|> Book
    UserController --|> User
    AuthController --|> User
    Book -- BookRepository
    User -- UserRepository
    BookController --|> BookService
    UserController --|> UserService
    UserService -- UserDetailsServiceImpl
    BookController --> BookDTO
    UserController --> UserDTO

And here is the final result.

Step 4: Create sequence diagram

A sequence diagram, also known as a swimlane diagram, is a type of diagram that visually shows request flow.

Imagine an actual swimming pool divided into lanes. Each lane is dedicated to a specific swimmer (e..g class file)

Now, use the following prompt to get the swimlane diagram.

Create a sequence diagram for Mermaid.

Copy the output to Mermaid.

Here is the output:

sequenceDiagram
    participant User as User
    participant AuthController as "Auth Controller"
    participant OAuth2Config as "OAuth2 Config"
    participant UserDetailsServiceImpl as "User Details Service"
    participant GoogleOAuth as "Google OAuth Provider"
    participant UserDatabase as "User Database"
 
    User ->> AuthController: Initiate Login
    AuthController ->> OAuth2Config: Forward to OAuth2 Provider
    OAuth2Config ->> GoogleOAuth: Send OAuth Request
    GoogleOAuth -->> OAuth2Config: Receive OAuth Response
    OAuth2Config -->> AuthController: Receive OAuth Response
    AuthController ->> UserDetailsServiceImpl: Load User Details
    UserDetailsServiceImpl ->> UserDatabase: Retrieve User Info
    UserDatabase -->> UserDetailsServiceImpl: User Info
    UserDetailsServiceImpl -->> AuthController: User Details
    AuthController -->> User: Authentication Successful

Here is the full conversation with ChatGPT 3.5:

https://chat.openai.com/share/70157733-da64-4a12-b15b-3607f4d1afe9

Step 5: Making things even more faster

Everything we have done can now be compiled into a Mega prompt, compile all the inputs into a 1 mega prompt, and just replace the content under App descriptions.

For a given app description
 
APP DESCRIPTION START
Spring boot rest application that stores reservations
APP DESCRIPTION END
 
Create directory structure, then create UML and sequence diagram for Mermaid tool using it's own syntax

Bonus: ChatGPT Plus users only

If you are on a ChatGTP Plus subscription, you get several benefits apart from the obvious GPT4.

First, ChatGPT4 itself gives you a nice text output, including some nice emojis.

Prompt:

Create a Java rest application based on Spring Boot that allows borrowing technical books to users
admins have dedicated role that are able to add books, remove books
users and admins can log in by using Google OAuth as an authentication provider
 
As the first step, show me the directory structure with file names, use emojis to represent different content type

Second, to speed up chart creation, you can use 2 plugins:

1. GitHub plugin “AskTheCode” (which lets you scan the GitHub repository)
2. Draw plugin “Mermaid Chart” -> generates diagrams for you and displays images directly as part of the chat.

Conclusion

Pretty powerful, huh?

Traditional methods of creating UML and sequence diagrams are much more time-consuming.

Imagine how much time we just saved.

By using this approach, you'll not only save time but get valuable insight into your architecture.

Feel free to use these prompts, tweak them, and make them your own.

If you want to get systems like these, please connect and reach out to me over Linkedin.

Author bio

Jakov Semenski is an IT Architect working at IBMiX with almost 20 years of experience.

He is also a ChatGPT Speaker at WeAreDevelopers conference and shares valuable tech stories on LinkedIn