停止拖動方塊：透過 VPasCode 與 AI 聊天機器人產生 C4 圖表

@startuml OnlineBanking_Context
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title 系統情境：線上銀行平台

Person(customer, "銀行客戶", "檢視帳戶、轉帳、繳費")
Person(admin, "後台管理員", "管理使用者、監控交易")

System(banking, "線上銀行平台", "透過網頁與行動裝置提供網路銀行服務")

System_Ext(coreLegacy, "核心銀行主機", "處理交易、維護總帳")
System_Ext(email, "電子郵件服務", "發送通知與報表")
System_Ext(oauth, "OAuth2 提供者", "處理身分與驗證")

Rel(customer, banking, "使用", "HTTPS/WebSocket")
Rel(admin, banking, "管理", "HTTPS")
Rel(banking, coreLegacy, "讀取/寫入", "REST/SOAP")
Rel(banking, email, "發送警示", "SMTP/API")
Rel(banking, oauth, "驗證", "OIDC")

@enduml

@startuml OnlineBanking_Containers
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title 容器圖：線上銀行平台

Person(customer, "銀行客戶")

System_Boundary(banking, "線上銀行平台") {
    Container(webapp, "Web 應用程式", "React + Node.js", "用於瀏覽器端銀行的單頁應用程式")
    Container(mobile, "行動應用程式", "Flutter", "iOS/Android 原生體驗")
    Container(api, "API 閘道", "Kong", "路由請求、限流、驗證")
    Container(service, "帳戶服務", ".NET 8", "帳戶與餘額的業務邏輯")
    Container(cache, "Session 快取", "Redis", "儲存 JWT 權杖與 Session 狀態")
    ContainerDb(db, "帳戶資料庫", "PostgreSQL", "客戶帳戶、餘額、交易")
    ContainerQueue(events, "事件匯流排", "RabbitMQ", "非同步交易通知")
}

System_Ext(oauth, "OAuth2 提供者")
System_Ext(legacy, "核心銀行主機")

Rel(customer, webapp, "使用", "HTTPS")
Rel(customer, mobile, "使用", "HTTPS")
Rel(webapp, api, "呼叫", "REST/JSON")
Rel(mobile, api, "呼叫", "REST/JSON")
Rel(api, oauth, "驗證權杖", "OIDC")
Rel(api, service, "路由至", "gRPC")
Rel(service, cache, "讀取/寫入 Session", "TCP")
Rel(service, db, "查詢", "SQL/TCP")
Rel(service, events, "發布", "AMQP")
Rel(service, legacy, "同步帳簿", "SOAP")

@enduml

@startuml AccountService_Components
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

title 元件圖：帳戶服務 (.NET 8)

Container(api, "API 閘道", "Kong")
ContainerDb(db, "帳戶資料庫", "PostgreSQL")
ContainerQueue(events, "事件匯流排", "RabbitMQ")

Component(auth, "Auth 中間件", "ASP.NET Filter", "驗證 JWT、擷取使用者情境")
Component(controller, "AccountController", "ASP.NET API", "/accounts 的 REST 端點")
Component(domain, "AccountDomainService", "C# 類別庫", "餘額計算、轉帳規則")
Component(repo, "AccountRepository", "EF Core", "資料存取、查詢最佳化")
Component(publisher, "EventPublisher", "MassTransit", "發布 TransactionCompleted 事件")

Rel(api, auth, "傳遞請求")
Rel(auth, controller, "轉發已驗證請求")
Rel(controller, domain, "呼叫業務邏輯")
Rel(domain, repo, "查詢/儲存")
Rel(repo, db, "執行 SQL")
Rel(domain, publisher, "產生領域事件")
Rel(publisher, events, "發布", "AMQP")

@enduml

# GitHub Action 範例程式碼片段
- name: 渲染 C4 圖表
  run: |
    vp-cli render -i docs/architecture/c4/*.puml 
                  -o docs/architecture/output/ 
                  -f svg --c4-layout auto