def frontend(
graph_attr: dict = GRAPH_ATTR,
output_format: str = OUTPUT_FORMAT,
output_path: str = OUTPUT_PATH,
) -> str:
""" Generates frontend diagrams """
output = f"{output_path}/frontend"
with Diagram(
"Frontend",
show=False,
outformat=output_format,
# graph_attr=graph_attr,
filename=output,
):
client = Client("client")
with Cluster("Serverless"):
with Cluster("UI"):
with Cluster("cache"):
web_cdn = CloudFront("CDN\nUI")
with Cluster("static"):
web_host = S3("web")
react = React("app")
with Cluster("Static Assets"):
with Cluster("cache"):
assets_cdn = CloudFront("CDN\nassets")
assets_apigw = APIGateway("API Gateway")
assets = S3("assets\nimages")
with Cluster("media processing"):
assets_gen = Lambda("generate image")
layers = Layer("layer\nImageMagick")
web_cdn << react << web_host
assets_cdn << assets_apigw << assets_gen << layers << assets
client - Edge(color="orange") << assets_cdn
client - Edge(color="orange") << web_cdn
assets_apigw >> assets_gen
assets_cdn >> assets_apigw
return f"{output}.{output_format}"
from diagrams.onprem.network import Istio
from diagrams.onprem.tracing import Jaeger
from diagrams.programming.framework import React
def kube_svc(name, replica_count, db):
svc = Service(name)
apps = []
for _ in range(replica_count):
pod = Pod("pod")
apps.append(svc >> pod >> db)
return svc
with Diagram("Lorem Ipsum Cloud Native", show=True, filename='lorem_ipsum_cloud_native'):
ui = React("UI")
with Cluster("Kube"):
net = Istio("loremipsum.com")
with Cluster('Logging'):
logging = Fluentd('logging')
es = ElasticSearch('index')
kibana = Kibana('Log View')
logging >> es >> kibana
with Cluster('Monitoring'):
metrics = Prometheus('metrics')
monitoring = Grafana('monitoring')
tracing = Jaeger('tracing')
with Cluster("DB") as cluster:
db_books = PostgreSQL("books")
with Diagram("Data project3:Bitcoin"):
pubsub = PubSub("Pub Sub")
with Cluster("Source data"):
yfsd = Functions("yahoo finance")
yfsd >> pubsub
with Cluster("Artificial Intelligence - Bitcoin"):
flow = Functions("ETL process")
with Cluster("Data base"):
db = BigQuery("Big Query")
flow >> db
predict = Functions("Calculate Prediction")
with Cluster("Update model"):
CTF = Functions("Control Training")
train = Functions("Training")
with Cluster("Web"):
webpage = React("React.App")
pubsub >> flow
#db >> train
db >> predict
db >> CTF #
train >> predict
CTF >> train #
predict >> db
db >> webpage
webpage >> db
def draw():
with Diagram("Example Microservice for EBA", show=False, graph_attr=graph_attr, direction="LR"):
staff = Client('EBA Staff')
organinzer = User("EBA Organinzer")
users = Users("EBA Users")
mobileApp = Flutter("EBA Mobile")
dns = DNS('Cloud DNS')
loadbalance = LoadBalancing('Cloud Loadbalancing')
auth = Authentication("Firebase Auth")
users >> Edge(color="darkgreen") >> mobileApp << Edge(
color="darkgreen") >> auth
[organinzer, staff] << Edge(color="darkgreen") >> dns
dns << Edge(color="darkgreen") >> loadbalance
with Cluster("Google Cloud Platform", graph_attr=graph_attr2):
with Cluster("WEB Frontend", graph_attr=graph_attr2):
with Cluster("Web Container1", graph_attr=graph_attr2):
web1 = Hosting("Firebase Hosting")
react1 = React("Frontend")
web1 - react1
with Cluster("Web Container2", graph_attr=graph_attr2):
web2 = Hosting("Firebase Hosting")
react2 = React("Frontend")
web2 - react2
with Cluster("WEB Backend", graph_attr=graph_attr2):
with Cluster("Web Backend Container"):
web3 = Hosting("Firebase Hosting")
react3 = React("Backend")
web3 - react3
loadbalance << Edge(color="darkgreen") >> [web1, web2, web3]
with Cluster("APIs", graph_attr=graph_attr2):
func = Functions("Cloud Functions")
remoteCnf = RemoteConfig("RemoteConfig")
[react1, react2, react3] << Edge(
color="darkgreen") >> remoteCnf << Edge(
color="darkgreen") >> func
with Cluster("Feeds", graph_attr=graph_attr2):
apiFeeds = NodeJS("Express")
with Cluster("Tournaments", graph_attr=graph_attr2):
apiTournament = NodeJS("Express")
with Cluster("Badges", graph_attr=graph_attr2):
apiBadges = NodeJS("Express")
with Cluster("User", graph_attr=graph_attr2):
apiUser = NodeJS("Express")
with Cluster("Games", graph_attr=graph_attr2):
apiGames = NodeJS("Express")
with Cluster("Notifications", graph_attr=graph_attr2):
apiNotifications = NodeJS("Express")
auth << Edge(color="darkgreen") >> func >> Edge(color="darkorange") >> [apiBadges, apiUser, apiFeeds,
apiGames, apiNotifications, apiTournament]
with Cluster("Database", graph_attr=graph_attr2):
badgesSQL = SQL("Badges")
userSQL = SQL("User")
notificationSQL = SQL("Notifications")
tournamentsSQL = SQL("Tournaments")
gamesSQL = SQL("Games")
feedsSQL = SQL("Feeds")
apiBadges - Edge(color="darkorange") - badgesSQL
apiUser - Edge(color="darkorange") - userSQL
apiFeeds - Edge(color="darkorange") - feedsSQL
apiGames - Edge(color="darkorange") - gamesSQL
apiNotifications - Edge(color="darkorange") - notificationSQL
apiTournament - Edge(color="darkorange") - tournamentsSQL
firestore = Firestore("Firestore")
with Cluster("Message Queue", graph_attr=graph_attr2):
messageQueue = Pubsub("Pubsub")
[badgesSQL, userSQL, notificationSQL, tournamentsSQL,
gamesSQL, feedsSQL] >> Edge(color="darkorange") >> messageQueue
messageQueue >> Edge(color="darkred") >> firestore >> Edge(color="darkred", style="dotted") >> [apiBadges, apiUser, apiFeeds,
apiGames, apiNotifications, apiTournament]
with Cluster("Storage", graph_attr=graph_attr2):
badgesStorage = Storage("Badges")
userStorage = Storage("User")
gameStorage = Storage("Games")
tournamentsStorage = Storage("Tournaments")
apiBadges - Edge(color="blue") - badgesStorage
apiUser - Edge(color="blue") - userStorage
apiGames - Edge(color="blue") - gameStorage
apiTournament - Edge(color="blue") - tournamentsStorage
fcm = Messaging("Cloud Messaging")
apiNotifications >> \
Edge(color="darkorange") >> \
fcm >> Edge(color="darkgreen") >> auth
from diagrams.elastic.elasticsearch import Elasticsearch
outdir = "./slack_stack.assets/"
files = ["{}{}".format(outdir, f'step_{x}') for x in range(1, 6)]
steps = [
"Step 1 - Webapp and Database", "Step 2 - Scaling Messages",
"Step 3 - Searching Messages", "Step 4 -Client-side Caching",
"Step 5 - Logging and Metrics"
]
with Diagram(show=False) as d:
# Step 1
with d, Diagram(show=True, filename=files[0]):
with Cluster("Web"):
web_clients = [React("Client 1"), React("Client 2")]
with Cluster("API and Database"):
with Cluster("Heroku"):
hasura = Server("GraphQL")
with Cluster("Aiven"):
pg = PostgreSQL("DB")
web_clients << Edge(color="green") >> hasura >> Edge(
color="green") << pg
# Step 2
with Diagram(show=True, filename=files[1]):
with Cluster("Web"):
web_clients = [React("Client 1"), React("Client 2")]
with Cluster("API and Database"):
with Cluster("Heroku"):
hasura = Server("GraphQL")
from diagrams import Cluster, Diagram, Edge
from diagrams.programming.framework import React
from diagrams.programming.language import Rust
from diagrams.programming.language import TypeScript
from diagrams.onprem.database import MariaDB
from diagrams.onprem.inmemory import Redis
with Diagram("Architecture", show=False):
storages = [MariaDB("MariaDB"), Redis("Redis")]
with Cluster("Client"):
index = React("index.html")
with Cluster("Pages"):
pages_index = React("App.tsx")
pages = pages_index - [React("timeline"), React("post")]
index >> pages_index
with Cluster("Components"):
components_index = TypeScript("index.ts")
components = components_index - [
React("TextField"), React("Section")
]
for i in range(len(pages)):
pages[i] >> components_index
with Cluster("Models"):
models_index = TypeScript("index.ts")
models = models_index - [TypeScript("post"), TypeScript("session")]
with Cluster("API Fetchers"):
"fontsize": "20",
"bgcolor": "white" #transparent
}
with Diagram("Application Architecture",
graph_attr=graph_attr,
outformat="png",
filename="application_architecture"):
ELB("lb") >> EC2("web") >> RDS("userdb") >> S3("store")
ELB("lb") >> EC2("web") >> RDS("userdb") << EC2("stat")
(ELB("lb") >> EC2("web")) - EC2("web") >> RDS("userdb")
with Cluster("Application Context"):
app = EC2("Spring Boot")
ELB("lb") >> app
metrics = Prometheus("metric")
metrics << Edge(color="firebrick", style="dashed") << Grafana("monitoring")
Jenkins("CI")
client = Client("A")
client >> User("B") >> Users("S")
client >> PostgreSQL("Database")
client >> Internet("Remote API")
client >> Docker("Docker")
client >> Server("Server")
client >> SQS("Sync Books")
client >> Spring("Backend")
client >> React("React")
from diagrams import Cluster, Diagram, Edge
from diagrams.onprem.compute import Server
from diagrams.onprem.network import Nginx, Gunicorn
from diagrams.programming.framework import React, Django
from diagrams.programming.language import Python
from diagrams.generic.database import SQL
from diagrams.generic.storage import Storage
with Diagram("Adpkd Service with On-Premise", show=True):
with Cluster("Front-End"):
frontend = React("React")
with Cluster("Web Server"):
ingress = Nginx("Nginx")
with Cluster("WSGI server"):
wsgi = Gunicorn("Gunicorn")
with Cluster("Service Cluster"):
with Cluster("Application"):
grpcsvc = Server("adpkd_service")
# grpcsvc - Edge(color="brown", style="dashed") - Django("Django")
with Cluster("Database"):
master1 = SQL("sqlite3")
grpcsvc >> master1
with Cluster("Storage Server"):
master2 = Storage("minio")
grpcsvc >> master2
with Cluster("Inferencer"):
with Cluster("Raspberry PI"):
# with Cluster("Docker1"):
with Cluster("Nodejs"):
nodeJs = NodeJS("Pirate-Bridge")
with Cluster("Docker1"):
Janus = Custom("Pirate-Spyglass",
"./customImages/janus-logo.png")
with Cluster("Docker2"):
Gstreamer = Custom("Gstreamer",
"./customImages/gstreamer-logo.png")
Janus << Edge(label="RTSP Stream", color="firebrick") << Gstreamer
with Cluster("ReactJs"):
react = React("Pirate-Flag")
caddy = Caddy("Pirate-Map")
caddy << Edge(color="firebrick") >> Janus
caddy << Edge(color="firebrick") >> react
caddy << Edge(color="firebrick") >> nodeJs
with Cluster("Arduino Project"):
piCamera = IotCamera("Camera")
with Cluster("Arduino"):
arduino = Custom("Pirate-Hook",
"./customImages/720px-Arduino_Logo.png")
pid = Custom("PID Controller",
"./customImages/720px-Arduino_Logo.png")
# Data from Arduino to Pi
nodeJs << Edge(label="Pirate Serial", color="firebrick") >> arduino
from diagrams import Cluster, Diagram
from diagrams.programming.framework import React
from diagrams.programming.language import Csharp
from diagrams.azure.database import SQLDatabases
graph_attr = {"fontsize": "45", "bgcolor": "transparent"}
with Diagram("Stack", show=True, graph_attr=graph_attr):
mobileApps = React("Android/IOS Apps")
with Cluster("Azure"):
apiRestFul = Csharp("ApiRestFul")
sqlServerDataBase = SQLDatabases("Database")
mobileApps - apiRestFul - sqlServerDataBase
from diagrams.onprem.database import PostgreSQL
from diagrams.onprem.network import Internet
from diagrams.programming.framework import Spring, React
graph_attr = {
"fontsize": "20",
"bgcolor": "white" # transparent
}
with Diagram("",
direction="LR",
graph_attr=graph_attr,
outformat="png",
filename="book-reviewr-application-architecture"):
with Cluster("Book Reviewr"):
frontend = React("Frontend")
backend = Spring("Backend")
queue = SQS("SQS (Messaging Queue)")
users = Users("Users")
database = PostgreSQL("PostgreSQL (Database)")
keycloak = Server("Keycloak (Identity Provider)")
api = Internet("Open Library (REST API)")
keycloak << [frontend, backend]
users >> frontend
frontend >> backend >> database
backend >> api
backend << queue
}
node_attr = {
"fontsize": "10.0",
}
with Diagram(
"Token management",
show=False,
filename="architecture",
outformat="png",
graph_attr=graph_attr,
node_attr=node_attr,
):
user = User("End User")
frontend = React("Web UI")
with Cluster("Kubernetes"):
ingress = LoadBalancing("NGINX Ingress")
kafka = KubernetesEngine("Kafka")
with Cluster("Gafaelfawr"):
server = KubernetesEngine("Server")
postgresql = SQL("PostgreSQL")
redis = Datastore("Redis")
redis_storage = PersistentDisk("Redis Storage")
user >> frontend >> ingress >> server >> redis >> redis_storage
server >> postgresql
kafka_listener = KubernetesEngine("Kafka Listener")
from diagrams import Diagram
from diagrams import Cluster, Diagram
from diagrams.aws.network import ELB
from diagrams.programming.framework import React
from diagrams.onprem.database import Mongodb
from diagrams.programming.language import Nodejs
with Diagram("Microservices", show=False):
with Cluster("Service"):
external_api = ELB("ExternalApi")
with Cluster("Database\nMongoDB"):
mongo = Mongodb("Contenedor-a")
with Cluster("Service\nMongoExpress"):
mongo_express = Nodejs("Contenedor-b")
mongo_express >> mongo
mongo >> mongo_express
with Cluster("Service\nNodeJS\nScrapper"):
scrapper = Nodejs("Contenedor-c")
scrapper >> external_api
external_api >> scrapper
scrapper >> mongo
with Cluster("Service\nNodeJS\nExpress\nAPI"):
express_api = Nodejs("Contenedor-d")
with Cluster("Service\nReactJS\nApacheServer"):
react = React("Contenedor-f")
react >> express_api
express_api >> mongo
mongo >> express_api
express_api >> react
with Diagram("Architecture", show=True, graph_attr=graph_attr):
# windows = Windows("OS")
router1 = Router("localhost:3000")
router2 = Router("localhost:5000")
with Cluster("Model", ):
mongo = MongoDB("MongoDB")
with Cluster("Controller"):
flask = Flask()
python = Python()
python - flask
with Cluster("View"):
react = React("React")
js = Javascript()
js - react
mongo >> Edge() >> flask
flask >> Edge() >> mongo
react >> Edge(label="AJAX", color="darkgreen") >> flask
flask >> Edge(label="REST API", color="darkgreen") >> react
router2 - mongo
router2 - flask
router1 - react
# windows - mongo
# windows - flask