top of page

[ChatGPT] Visualizing Any System Architecture: An AI-Powered Prompt

Updated: Aug 3, 2023

Welcome to my blog. In today article, I will introduce you to a powerful prompt designed to help system architects, solution architects, technical product managers, and developers visualize any system design effortlessly. This prompt combines the capabilities of Chat GPT, a cutting-edge language model, with Mermaid, a powerful diagramming tool, to generate clean and concise system architectures based on given concepts. Let's dive in and explore how this prompt can revolutionize the way you approach system architecture!


Chat GPT

Chat GPT is a state-of-the-art language model powered by OpenAI. Chat GPT is designed to understand and respond to natural language prompts. Its deep understanding of context and ability to generate human-like text makes it an ideal companion for tackling complex tasks. In this task, I use the free version of Chat GPT.


Mermaid

Mermaid is an open-source, Markdown-like language for generating various diagrams, including flowcharts, sequence diagrams, and Gantt charts. It's widely used in technical documentation and allows users to create clear and visually appealing visualizations.


How the Prompt Works

The prompt I've crafted enables system architects to effortlessly visualize their system architecture based on any given concept. The concept name is the variable that the user can alter (ex: AI chatbot, single server setup, payment gateway, etc.) Let's break down the process into two main actions:

Action 1: Generate a Clean and Neat Workflow for a given concept. The generated workflow serves as a foundation for the subsequent steps.

Action 2: Create Mermaid Code for Visualization from the system architecture generated in Action 1, users are instructed to create Mermaid code to visualize their architecture. The resulting diagram should be clear, specific, and strictly follow the description provided in Action 1.


Prompt Engineering - Tips and Tricks

  1. Break Complex Tasks into Actions: Dividing the task into clear and logical actions helps Chat GPT understand the step-by-step process, leading to more coherent responses.

  2. Avoid Hallucination with Cited Sources: By instructing Chat GPT to only include information from cited sources, you can mitigate the risk of hallucination, where the AI may generate fictional or inaccurate details. This helps maintain the reliability and accuracy of the information provided by the language model.

  3. Persona and Intent for GPT: Providing a persona to Chat GPT, such as "You are a skilled system architect," and stating the intent, "You want to visualize the system architecture based on given concept," helps guide the AI's response. It frames the context in which GPT should generate the content, ensuring that the response aligns with the user's needs.

  4. Example Mermaid Code for Clarity: Including an example of the desired Mermaid code in the prompt gives Chat GPT a clear reference point. This ensures that the AI comprehends the specific format and structure required for the visualization, minimizing potential discrepancies or misunderstandings.

The Prompt

Simply replace [Concept] with the system name that you have in mind (ex: AI chatbot, single server setup, payment gateway, etc.), then copy and paste the below prompt to ChatGPT and let the magic do its works.

​Forget all previous requests and prompts. You are a skilled system architect. You want to visualize the system architecture based on a given concept. The concept is [Concept]. Please only include information from cited sources.


You will perform the following actions:

Action 1: Generate a clean and neat workflow for the concept in question. Based on the workflow, generate a well-thought system architecture for the workflow.


Action 2: Please do not include any quotation mark or parentheses in the generated code. From the system architecture at action 1, create mermaid code to visualize the architect. The final visualization should be clear, specific and strictly follow the description at action 1. Instruct user to go to https://mermaid.live to generate final diagram based on the output code. Here is an example of good mermaid code for this task:


flowchart LR

subgraph Azure

s[fa:fa-code Server]

db[(fa:fa-table Database)]

end

subgraph Netlify

c[fa:fa-user Client]

end


subgraph Netlify

end

subgraph Azure

direction LR

end

c -- 1. HTTP GET --> s

s -- 2. SQL Query --> db

db -. 3. Result Set .-> s

s -. 4. JSON .-> c


Examples of Usage

To demonstrate the effectiveness of this prompt, here are some examples of how it can be used in practice:


Input: OAuth 2.0

Prompt Output:


Input: Twitter Hot Trend

Prompt Output:

Input: Book Taxi on Grab App

Prompt Output:


Input: AI Chatbot

Prompt Output:



Conclusion

With the power of Chat GPT and the flexibility of Mermaid, system architects can now easily visualize complex system architectures. This prompt simplifies the process, enabling architects to focus on creative design and efficient communication. Start using the prompt today and unlock a whole new world of possibilities for your projects!



Commentaires


bottom of page