@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml

title 某在线商城销售系统容器图

Person(customer, "买家")
Person(operator, "产品运营人员")

System_Ext(alipay, "支付宝")

System_Boundary(mall, "销售系统"){
    Container(spa, "Single Page Application", "JavaScript / Vue.js")
    Container(web, "Web Application", "JavaScript / Node.js")
    Container(ios, "iOS App", "Swift / iOS SDK")
    Container(android, "Android App", "Kotlin / Android SDK")
    Container(spa_admin, "Admin Single Page Application", "JavaScript / Vue.js")
    Container(web_admin, "Admin Web Application", "JavaScript / Node.js")

    Container(bff_web, "BFF for Web Application", "JavaScript / Node.js / Express")
    Container(bff_web_admin, "BFF for Admin Web Application", "JavaScript / Node.js / Express")
    Container(bff_ios, "BFF for iOS App", "JavaScript / Node.js / Express")
    Container(bff_android, "BFF for Android App", "JavaScript / Node.js / Express")

    Container(mall_api, "API Application", "Java / Spring MVC / Spring Cloud")
    ContainerDb(mall_db, "Database", "Relational Database Schema")
}

System_Ext(goods_info, "商品信息系统")
System_Ext(warhouse, "库管系统")
System_Ext(logistics, "物流系统")

Rel(customer, spa, "使用")
Rel(customer, web, "使用", "浏览器 / HTTPS")
Rel(customer, ios, "使用")
Rel(customer, android, "使用")

Rel(operator, spa_admin, "使用")
Rel(operator, web_admin, "使用", "浏览器 / HTTPS")

Rel_Back_Neighbor(spa, web, "托管", "浏览器 / HTTPS")
Rel(spa, bff_web, "使用", "JSON / HTTPS / GraphQL")

Rel_Back_Neighbor(spa_admin, web_admin, "托管", "浏览器 / HTTPS")
Rel(spa_admin, bff_web_admin, "使用", "JSON / HTTPS / GraphQL")

Rel(ios, bff_ios, "使用", "JSON / HTTPS / GraphQL")
Rel(android, bff_android, "使用", "JSON / HTTPS / GraphQL")

Rel(bff_web, mall_api, "使用", "JSON / HTTPS / REST / API Gateway")
Rel(bff_web_admin, mall_api, "使用", "JSON / HTTPS / REST / API Gateway")
Rel(bff_ios, mall_api, "使用", "JSON / HTTPS / REST / API Gateway")
Rel(bff_android, mall_api, "使用", "JSON / HTTPS / REST / API Gateway")

Rel_Neighbor(mall_api, alipay, "使用", "JSON / HTTPS")
Rel(mall_api, goods_info, "使用", "JSON / HTTPS / REST / API Gateway")
Rel(mall_api, warhouse, "使用", "JSON / HTTPS / REST / API Gateway")
Rel(mall_api, logistics, "使用", "JSON / HTTPS / REST / API Gateway")

Rel_Back_Neighbor(mall_db, mall_api, "读写", "JDBC")

@enduml