Generate Solution Architecture Diagram

ArchGen_ReadMe.md

Specify your architecture

1. Specify as much detail as possible for your architecture, for example:

Design a simple solution architecture for a contact entry page which:
Requires no authentication to access
Collects and stores the name, phone number, address and email address of the contact
Uses ReactJS for the front end
API Gateway and Lambda in C# dotnet 6 for the backend
Stores collected data in Dynamo DB
Serves the SPA from S3 through CloudFront with DNS by Route53
A VPC if necessary
The web front end
DNS
HTTPS/SSL/TLS where necessary
Public and Private networking elements

Acquire Python script for the architecture

1. Open ChatGPT
2. Enter the architecture specification above
3. Tell ChatGPT to generate the python script: Create a high level simple diagram for this architecture based on the Diagrams Python package
4. Copy the script it generates

Install (or update) Python

Reference: https://phoenixnap.com/kb/how-to-install-python-3-windows

1. Open PowerShell
2. (Optional) Check your python version: python --version
3. Download the latest version of python: https://www.python.org/downloads/windows/
4. Run the installer
5. During installation ensure python is added to the PATH variable
6. Close PowerShell
7. Open a new PowerShell window
8. Check your pip version: pip -V

Install GraphViz

Reference: https://graphviz.org/download/#windows

1. Download GraphiViz: https://graphviz.org/download/#windows
2. Install
3. Open a new PowerShell window
4. Check the GraphViz version by entering: dot -V

Create your project directory

1. Open a new PowerShell window
2. Create and navigate into a new folder

Install the Diagrams python library

1. Enter pip install diagrams

Install the Jupyter Notebook

1. Enter pip install notebook

Ensure the import statements are correct

1. In a text editor, create a file named architecture.py and save it to your solution folder
2. Paste in the script from ChatGPT
3. For each line containing from … import … visit the Diagrams docs
4. Search for the name following the import and check the path documented for it
5. You may need to visit multiple sections from the Nodes section in the left nav
6. When you find the name listed, copy the path, trim the name and update the import path
7. Eg: ChatGPT may generate this line from diagrams.aws.integration import APIGateway Replace it with from diagrams.aws.network import APIGateway
8. Eg: ChatGPT may generate this line from diagrams.onprem.client import User, Custom Replace it with: from diagrams.onprem.client import User from diagrams.custom import Custom
9. Save the .py script

Ensure the diagram will open

1. Ensure the line containing with Diagram(" contains show=True
2. Save the .py script

Run the script from the CLI

1. Open a PowerShell window
2. Navigate to the solution folder
3. Enter python .\architecture.py
4. You diagram should open in Windows image viewer

Run the script in Jupyter Notebook

1. Open a new PowerShell window
2. Navigate to the solution folder
3. Enter jupyter notebook
4. In the Jupyter browser which opens, select New > Python 3
5. In the first cell enter !pip install --upgrade --user pip
6. Press the play button OR Type SHIFT + RETURN
7. In the second cell enter !pip install --upgrade --user diagrams
8. Press the play button OR Type SHIFT + RETURN
9. In the third cell enter the script copied from ChatGPT earlier
10. Press the play button OR type SHIFT + RETURN
11. You should see the diagram open up in the Windows image viewer
12. The diagram will also be visible in the first Jupyter Notebook browser tab containing the file list
13. It will also be visible in the Windows Explorer view of the solution folder

References:

• https://youtu.be/b-1OeDJUCTU?si=VABPq0sc2U4kUShH
• https://phoenixnap.com/kb/how-to-install-python-3-windows
• https://www.python.org/downloads/windows/
• https://docs.python.org/3.6/using/windows.html#installing-without-ui
• https://www.geeksforgeeks.org/how-to-update-python-on-windows/
• https://graphviz.org/download/#windows
• https://diagrams.mingrammer.com/docs/getting-started/installation
• https://diagrams.mingrammer.com/docs/nodes/aws