Using ChatGPT to build system diagrams — Part II

Interested in Mindmaps — read our blog post on using plantUML with ChatGPT to create awesome Mindmaps

Continuing from my previous post, I wanted to focus on C4 diagramming model. To keep ChatGPT from deviating from the intention, I started with a prompt below

Prompt: Going forward, I want you to act as a software architect and build C4 diagrams using mermaid.js. Keep the answers to markdown syntax and always keep in mind software functional and non-functional aspects including but not limited to scalability, availability, redundancy, containerization, security and disaster recovery. ChatGPT: Sure, as a software architect, I can help you create C4 diagrams using Mermaid.js that take into account functional and non-functional aspects such as scalability, availability, redundancy, containerization, security, and disaster recovery.

C4 diagrams are a way to represent the architecture of a software system, and it is divided into four main levels:

• Context level, which represents the external factors that interact with the system
• Container level, which represents the deployment units and their dependencies
• Component level, which represents the different components of the system
• Code level, which represents the implementation details of the system

Okay, let’s get started

The Context Diagram

Prompt: Let’s start by creating a context diagram of the services in Wealth Management ChatGPT: Sure, here’s an example of a context diagram in Mermaid format for a Wealth Management System:

and in the markdown editor

This diagram shows the main actors that interact with the Wealth Management System and the main services provided by the system.

• The User interacts with the Account Management Service, Portfolio Management Service, Asset Management Service, and Transaction Management Service.
• The Financial Institution also interacts with the Account Management Service, Portfolio Management Service, Asset Management Service, and Transaction Management Service.
• The Market interacts with the Market Data Service.

This diagram gives an overview of the main interactions between actors and services, and it could be useful for understanding the high-level architecture of the system.

The Container Diagram

Looks good so far. Next, let’s build a container-level diagram for one of the services

Prompt: Let’s take the Portfolio service and break it down by creating a container diagram for its sub-functionalities ChatGPT: Sure, here’s an example of a container diagram in Mermaid format for the Portfolio Management Service of a Wealth Management System:

and markdown diagram

This diagram shows the containers that comprise the Portfolio Management Service and their dependencies.

• The Portfolio Management API is the entry point for the users and other systems to interact with the service.
• The Portfolio Management Worker is responsible for performing background tasks, like updating the portfolio according to market changes.
• The Portfolio Management Database stores the data related to the portfolios, like the assets held in each portfolio, their current value, etc.
• The Load Balancer distributes the incoming traffic among the instances of the Portfolio Management API running in the Kubernetes Cluster.
• The Kubernetes Cluster is responsible for managing the scaling, availability, and deployment of the containers.

The Component Diagram

Prompt: Next lets create the component level diagram for portfolio management api with all relevant details ChatGPT: Here’s an example of a component diagram in Mermaid format for the Portfolio Management API

and the corresponding mermaid diagram

and here’s the description

This diagram shows the different components that make up the Portfolio Management API and their dependencies.

• The API Gateway component of the Portfolio Management API is the entry point for incoming requests.
• The Authentication component is responsible for authenticating the users.
• The Authorization component is responsible for checking the access rights of the users.
• The Request Validator component is responsible for validating incoming requests.
• The Business Logic component is responsible for processing the requests and performing the business logic.
• The Response Formatter component is responsible for formatting the responses before sending them back to the clients.
• The Portfolio Service component is responsible for performing portfolio management-related operations like creating, reading, updating, and deleting the portfolios, and it communicates with the Portfolio Management Database to persist the data related to the portfolios.

This looks awesome. Most of the details are aligned to my understanding. Let’s try to build the same for Portfolio Management Worker

Prompt: can we do the same for portfolio management worker container ChatGPT: Sure, here’s an example of a component diagram in Mermaid format for the Portfolio Management Worker container of a Wealth Management System:

and the mermaid diagram

This diagram shows the components that make up the Portfolio Management Worker container and their dependencies.

• The Task Scheduler component is responsible for scheduling the background tasks of updating the portfolios.
• The Portfolio Updater component is responsible for updating the portfolios according to the market changes, it communicates with the Market Data Service to get the latest market data.
• The Market Data Service component is responsible for providing the market data for the portfolio updater.
• The Portfolio Service component is responsible for performing the portfolio management-related operations like creating, reading, updating, and deleting the portfolios, and it communicates with the Portfolio Management Database to persist the data related to the portfolios.

The Code Diagram

Let’s do the last bit and create the code diagram as well for Portfolio Management API

Prompt: Can you also do the code diagram for Portfolio Management API ChatGPT: Sure, here’s an example of a code diagram in Mermaid format for the Portfolio Management API of a Wealth Management System:

However, when I try to create this in the markdown editor with Mermaid.js, it fails to indicate the cyclical dependencies. All we need to do here remove these, as stated below

and the mermaid diagram

This diagram shows the different packages that make up the Portfolio Management API and their dependencies.

• The api package is the entry point of the application, it defines the routes, and the middleware.
• The auth package is responsible for the authentication and authorization of the requests.
• The config package is responsible for loading the configuration files.
• The controllers package is responsible for handling the requests and calling the services.
• The errors package defines the custom errors.
• The middleware package is responsible for providing middleware for the requests like handling CORS, request validation, etc.
• The models package defines the ORM models for the database entities.
• The services package is responsible for performing the business logic and communicating with the database.
• The utils package provides utility functions

Awesome, This was a blog post to depict the capabilities of ChatGPT especially on the C4 Diagramming model.

Thanks for reading!

Please subscribe here never to miss our new posts, and don’t forget to clap if you enjoyed reading this post