flowchart TB

    style AWS fill:#9f8660,rx:10,ry:10
    style Kubernetes fill:#7083a9,rx:10,ry:10
    style Frontend rx:10,ry:10
    style Backend rx:10,ry:10
    style pod1 fill:#818898,rx:10,ry:10
    style pod2 fill:#818898,rx:10,ry:10
    style pod4 fill:#818898,rx:10,ry:10
    style pod5 fill:#818898,rx:10,ry:10

    %% Frontend
    WebAPI([<a href='https://github.com/Cancer-Classification-UI/Web-API-Service'>Web API</a>])

    %% APIs / Backend
    DatabaseLoginAPI[(Login API\nDatabase)]
    DatabaseCDNAPI[(CDN API\nDatabase)]


    %% Login API
    LoginAPI([<a href='https://github.com/Cancer-Classification-UI/Login-API-Service'>Login API</a>]) 

    DatabaseLoginAPI <--> LoginAPI
    LoginAPI <--> WebAPI

    %% Notification API
    NotificationAPI([<a href='https://github.com/Cancer-Classification-UI/Notification-API-Service'>Notification API</a>])
    NotificationAPI <--> LoginAPI

    %% CDN API
    CDNAPI([<a href='https://github.com/Cancer-Classification-UI/CDN-API-Service'>CDN API</a>]) 

    DatabaseCDNAPI <--> CDNAPI
    CDNAPI <--> WebAPI

    subgraph AWS[fa:fa-cloud AWS]
        subgraph Kubernetes[fa:fa-dharmachakra Kubernetes Cluster]
            %% What is currently backend
            subgraph Backend[fa:fa-server Backend]
                direction TB
                subgraph pod1[fa:fa-box Pod]
                    LoginAPI
                    DatabaseLoginAPI
                end
                subgraph pod2[fa:fa-box Pod]
                    CDNAPI
                    DatabaseCDNAPI
                end
                subgraph pod4[fa:fa-box Pod]
                    NotificationAPI
                end
            end

            %% What is currently frontend
            subgraph Frontend[fa:fa-desktop Frontend]
                subgraph pod5[fa:fa-box Pod]
                    WebAPI
                end
            end
        end
    end