Add Diagrams and the image

README.md

@@ -1,13 +1,22 @@
 # Framingo Armond
 🔥Tinder like Flashcard App. 
 
+![flamingo-armond backend](https://github.com/yasuflatland-lf/flamingo-armond/actions/workflows/backend.yml/badge.svg)
+![flamingo-armond frontend](https://github.com/yasuflatland-lf/flamingo-armond/actions/workflows/frontend.yml/badge.svg)
+
+# Architecture
+- **Render** (Static site for React, GraphQL service)
+- **Superbase** (Database and authentication)
+
+![Architecture](./docs/diagram.png)
+
 # Environment
 This repository is structured as a mono repository. 
 
 | Directroy | Discription |
 |:--|:--|
-|frontend | frontend implementation |
-|backend| backend GraphQL API server |
+|frontend | Frontend implementation |
+|backend| Backend GraphQL API server |
 
 ## frontend
 - Typescript

docs/README.md

@@ -0,0 +1,15 @@
+# Documentations
+This directory 
+# Precondition
+- Python 3.6 >=
+- [Graphviz](https://graphviz.gitlab.io/download/)
+- [Diagrams](https://diagrams.mingrammer.com/docs/getting-started/installation#quick-start)
+
+# Generate the network diagram
+
+## Install Diagram
+1. Install [Graphviz](https://graphviz.gitlab.io/download/)
+1. Install [Diagrams](https://diagrams.mingrammer.com/docs/getting-started/installation#quick-start)
+
+## Generate Image
+2. Run `phthon diagram.py`

docs/diagram.py

@@ -0,0 +1,32 @@
+# diagram.py
+from diagrams import Cluster, Diagram, Edge
+from diagrams.onprem.compute import Server
+from diagrams.onprem.database import Postgresql
+from diagrams.onprem.vcs import Github
+from diagrams.generic.device import Mobile, Tablet
+from diagrams.onprem.client import Users
+from diagrams.aws.iot import IotCertificate
+
+spbase_attr = {
+    "bgcolor": "lightgreen"
+}
+
+with Diagram("Flamingo Service Architecture",  filename="diagram", show=False):
+    tablet = Tablet("Tablet users")
+    mobile = Mobile("Mobile users")
+    github = Github("Repository")
+    with Cluster("Render"):
+        frontend = Server("Frontend (React)")
+        backend = Server("Backend (Go)")
+        render = frontend - backend
+    with Cluster("Superbase", graph_attr=spbase_attr):
+        database = Postgresql("Database")
+        auth = IotCertificate("Auth")
+        sbase = [database, auth]
+
+    backend >> database
+    backend >> Edge(label="Authentication (Google)") >> auth
+    frontend >> Edge(label="Authentication (Google)") >> auth
+    github >> Edge(label="Deploy") >> render
+    tablet >> frontend
+    mobile >> frontend