How ChatGPT Can Help Design System Architecture for Your Applications👷‍♂️
Tags: webdev, chatgpt, architecture, ai
Published: 2023-04-18 15:29:00

---
title: How ChatGPT Can Help Design System Architecture for Your Applications👷‍♂️
published: true
description: Designing system architecture can be challenging for new developers. ChatGPT's language model can simplify the process, highlighting pros and cons of your approach, suggesting alternatives and generating sequence diagrams using PlantUML. Make software development a breeze!
tags: webdev,chatgpt,architecture,ai
cover_image: https://antonshubin.com/img/blog/how-chatgpt-can-help-you-design-system-architecture/devto.webp
canonical_url: https://antonshubin.com/blog/how-chatgpt-can-help-you-design-system-architecture
published_at: 2023-04-18 15:29 +0000
---
`Disclaimer`: This is my first post on Dev.to. I was a reader for some time and decided to start posting something, hopefully useful! Please feel free to share any feedback - I'd love to make my content more informative and well structured!

<hr>

Designing system architecture for your applications can be a daunting task, especially if you are new to software development or if you are not sure if the approach you are taking is the right one. Fortunately, with the help of ChatGPT, you can simplify and streamline the process of designing system architecture. In this article, we will explore how ChatGPT can assist you in designing system architecture and highlight its key features.

If you prefer video format: 

{% embed https://youtu.be/Ri3TLTKvSYQ %}

Understanding System Architecture
---------------------------------

Before we delve into ChatGPT stuff, it is important to understand what system architecture is. System architecture is the process of designing and building a software system by breaking it down into smaller components and then defining how these components will interact with one another. It involves decisions concerning the structure and behavior of the system and how the individual components will work together to deliver the desired outcome.

I Asked ChatGPT to Help
-----------------------

When it comes to system architecture, I usually have an idea of how it should work. Recently, I started to develop my first browser extension, so I decided to validate my idea of an architecture for it with ChatGPT. I decided to start designing a communication between frontend, backend, and database. With real-time sync of data with other devices of same user. 

I was surprised to see that, first, ChatGPT understood my idea and architecture in detail, second it highlighted the pros and cons my approach, like additional complexity of scaling WebSocket servers and increased resource usage, as well as potential data synchronization issues between Postgres and IndexedDB.

![Pros and Cons](https://antonshubin.com/img/blog/how-chatgpt-can-help-you-design-system-architecture/recommendations.webp "Pros and Cons")

Also, ChatGPT helped me generate various diagrams that represent the system architecture, such as sequence diagrams using PlantUML (diagram as a code). A sequence diagram is a diagram that shows the sequence of actions that occur when a user makes a request, from the front-end to the back-end and back again. 

Just check it out:
```
@startuml
!define AWSPUML https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v14.0/Legacy/

actor User
participant "Frontend\n(Svelte)" as Frontend
database "IndexedDB\n(Dexie.js)" as IndexedDB
participant "Backend\n(Node.js, Prisma)" as Backend
database "PostgreSQL" as PostgreSQL

User -> Frontend: Update user data
Frontend -> IndexedDB: Save updated data
Frontend -> Backend: Send WebSocket message with updated data

Backend -> PostgreSQL: Validate and save updated data
Backend -> Backend: Broadcast updates to other devices

loop Other Connected Devices
    Backend -> Frontend: Send WebSocket message with updates
    Frontend -> IndexedDB: Update data
    Frontend -> User: Update UI
end

@enduml
```

And here is the image generated by PlantUML:
![Sequence Diagram](https://antonshubin.com/img/blog/how-chatgpt-can-help-you-design-sysytem-architecture/sequence-diagram.webp "Isn't it beautiful?")
Isn't it beautiful?

Prompting Best Practices
------------------------

Using ChatGPT to assist you in designing system architecture is easy. Simply describe your architecture and request to ChatGPT in detail, and it will provide you with insights, recommendations, and alternative options. It is important to provide as much detail as possible to get the most accurate feedback and suggestions from ChatGPT.

When generating diagrams, such as sequence diagrams, provide ChatGPT with the necessary information to accurately represent the system architecture. For example, if you are using WebSockets to synchronize data across multiple devices, make sure to mention this when describing the architecture to ChatGPT.

Pro tip: Use GPT-4 as a smarter brother of GPT-3.5-turbo for better results! Your Captain Obvious :)

Conclusion
----------

ChatGPT helped me to avoid unnecessary complexity at MVP stage of my extension by highlighting potential drawbacks of my ideas. I believe if you are new to software development or not sure if your approach is the right one, ChatGPT can be a valuable resource in guiding you through the process.