Code
from diagrams import Diagram, Edge, Cluster
from diagrams.aws.compute import ECS, Fargate
from diagrams.aws.network import CloudFront
from diagrams.aws.storage import S3
from diagrams.firebase import _Firebase
from diagrams.gcp.storage import GCS
# from diagrams.gcp.identity import Iam
from diagrams.aws.database import Dynamodb
# from diagrams.gcp.devtools import LLMs
from diagrams.programming.language import Nodejs
from diagrams.onprem.client import Client
# Create diagram
with Diagram("System Architecture", show=False):
client = Client("User")
with Cluster("Frontend"):
s3 = S3("S3 - React SPA")
cloudfront = CloudFront("CloudFront Distribution")
react_spa = Nodejs("React SPA")
client >> Edge(label="accesses") >> react_spa
s3 >> cloudfront >> react_spa
with Cluster("Backend"):
load_balancer = ECS("Load Balancer")
api = ECS("FastAPI (Docker)")
ecs_fargate = Fargate("ECS Fargate")
api - ecs_fargate
load_balancer >> api
with Cluster("VPC"):
google_drive = GCS("Google Drive")
# google_oauth = Iam("Google OAuth")
firebase = _Firebase("Firebase w/GCP")
mongo_db = Dynamodb("MongoDB")
# llms = LLMs("LLMs (OpenAI, Anthropic)")
api >> Edge(label="connects to") >> google_drive
# api >> Edge(label="authenticates with") >> google_oauth
api >> Edge(label="uses") >> firebase
api >> Edge(label="stores data in") >> mongo_db
# api >> Edge(label="queries") >> llms