從提示詞到動態文檔：掌握 Visual Paradigm 的 AI 驅動 C4 工作流

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

title 系統情境圖 - 電子商務平台

Person(customer, "客戶", "瀏覽與購買產品的購物者")
Person(admin, "管理員", "管理產品、訂單與使用者")

System(ecommerce, "電子商務平台", "處理產品目錄、購物車、訂單與付款的線上零售系統")

System_Ext(payment, "付款閘道", "處理信用卡付款")
System_Ext(inventory, "庫存系統", "管理庫存水準與履約")
System_Ext(shipment, "運送服務", "處理訂單配送與追蹤")

Rel(customer, ecommerce, "瀏覽、搜尋、購買產品")
Rel(admin, ecommerce, "管理產品、訂單、使用者")
Rel(ecommerce, payment, "透過", "HTTPS")
Rel(ecommerce, inventory, "檢查/更新庫存", "API")
Rel(ecommerce, shipment, "請求運送", "API")

@enduml

@startuml
title 序列圖 - 使用雙重認證的使用者登入

actor "使用者" as user
participant "網頁瀏覽器" as browser
participant "認證服務" as auth
participant "SMS 閘道" as sms
database "使用者資料庫" as db

user -> browser: 輸入憑證
activate browser
browser -> auth: 認證 (使用者名稱, 密碼)
activate auth
auth -> db: 驗證憑證
activate db
db --> auth: 有效
deactivate db

alt 2FA 已啟用
    auth -> sms: 請求 OTP
    activate sms
    sms --> user: 傳送 OTP
    deactivate sms
    user -> auth: 輸入 OTP
    
    alt OTP 有效
        auth --> browser: 成功 + 權杖
        browser --> user: 重新導向至主控台
    else OTP 無效 (最多 3 次嘗試)
        auth --> browser: 錯誤 (OTP 無效)
        browser --> user: 顯示錯誤
        note right: 已實作重試迴圈
    end
else 2FA 已停用
    auth --> browser: 成功 + 權杖
    browser --> user: 重新導向至主控台
end

deactivate auth
deactivate browser
@enduml

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

title 容器圖 - 倉儲管理系統

Person(staff, "倉儲人員", "揀貨、打包並出貨")
Person(manager, "倉儲經理", "監督營運與分析")
Person(logistics, "物流團隊", "管理進出貨運")

System_Boundary(wms, "倉儲管理系統") {
    Container(webapp, "Web 應用程式", "React", "提供倉儲人員的使用者介面")
    Container(api, "REST API", "Spring Boot", "處理商業邏輯與協調")
    Container(storage, "儲存最佳化服務", "Spring Boot", "管理物品擺放與取用")
    Container(analytics, "分析服務", "Python", "產生報表與洞察")
    ContainerDb(db, "庫存資料庫", "PostgreSQL", "儲存庫存、訂單與位置")
    ContainerDb(cache, "Redis 快取", "Redis", "快取經常存取之資料")
}

System_Ext(erp, "ERP 系統", "管理財務與採購")
System_Ext(oms, "訂單管理系統", "處理訂單生命週期")

Rel(staff, webapp, "使用")
Rel(manager, webapp, "使用")
Rel(logistics, webapp, "使用")

Rel(webapp, api, "呼叫", "REST")
Rel(api, storage, "呼叫", "gRPC")
Rel(api, analytics, "呼叫", "REST")
Rel(api, db, "讀取/寫入", "JDBC")
Rel(api, cache, "讀取/寫入", "Redis 通訊協定")

Rel(api, erp, "同步資料", "REST")
Rel(api, oms, "更新訂單狀態", "REST")

@enduml

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

title 元件圖 - 儲存最佳化服務

Container_Boundary(storage, "儲存最佳化服務") {
    Component(analysis, "儲存分析引擎", "分析物品移動模式並最佳化擺放")
    Component(size, "物品尺寸計算器", "計算物品尺寸與重量以進行擺放")
    Component(frequency, "物品頻率服務", "追蹤物品流速與人氣")
    Component(replenishment, "補貨服務", "管理補貨觸發條件與警示")
    
    ComponentDb(location, "位置資料庫", "追蹤物品位置與儲存容量")
}

System_Ext(api, "REST API (WMS)", "呼叫儲存服務以執行作業")

Rel(api, analysis, "請求擺放最佳化")
Rel(analysis, size, "使用")
Rel(analysis, frequency, "使用")
Rel(analysis, location, "讀取/寫入")
Rel(size, location, "更新")
Rel(frequency, location, "更新")
Rel(replenishment, location, "讀取/寫入")

@enduml

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

title 部署圖 - 倉儲管理系統

Deployment_Node(aws, "AWS 雲端") {
    Deployment_Node(vpc, "VPC") {
        Deployment_Node(public_subnet, "公用子網路") {
            Deployment_Node(lb, "負載平衡器", "AWS ALB") {
                Container(webapp, "Web 應用程式", "託載於 S3 之 React 應用程式")
            }
        }
        
        Deployment_Node(private_subnet, "私人子網路") {
            Deployment_Node(backend_asg, "後端自動伸縮群組") {
                Deployment_Node(backend_vm, "後端伺服器 VM", "EC2 - t3.large") {
                    Container(api, "REST API", "Spring Boot 容器")
                    Container(storage, "儲存最佳化", "Spring Boot 容器")
                }
            }
            
            Deployment_Node(db_subnet, "資料庫子網路") {
                Deployment_Node(db_cluster, "資料庫叢集", "RDS PostgreSQL - db.r5.large") {
                    ContainerDb(master, "主要資料庫")
                    ContainerDb(standby, "備份複本")
                }
                
                Deployment_Node(cache_cluster, "快取叢集", "ElastiCache Redis - cache.r5.large") {
                    ContainerDb(cache, "Redis 快取")
                }
            }
        }
    }
}

Rel(webapp, lb, "提供服務")
Rel(lb, api, "路由", "HTTPS")
Rel(api, storage, "呼叫", "gRPC")
Rel(api, master, "讀取/寫入", "JDBC")
Rel(api, cache, "讀取/寫入", "Redis 通訊協定")
Rel(master, standby, "複寫")

@enduml

@startuml
title 改進的用例圖 - GourmetReserve 餐廳應用程式

left to right direction
actor "用餐者" as diner
actor "經理" as manager

rectangle "GourmetReserve 系統" {
    usecase "預訂餐桌" as book
    usecase "預點餐點" as preorder
    usecase "取消預約" as cancel
    usecase "管理預約" as manage
    
    usecase "驗證使用者" as auth
    usecase "處理付款" as payment
    usecase "套用折扣優惠券" as discount
    usecase "處理等候名單" as waitlist
    
    ' Include relationships (mandatory)
    book ..> auth : <<include>>
    preorder ..> auth : <<include>>
    cancel ..> auth : <<include>>
    manage ..> auth : <<include>>
    
    book ..> payment : <<include>>
    preorder ..> payment : <<include>>
    
    ' Extend relationships (optional/conditional)
    book <.. discount : <<extend>>n(輸入優惠碼)
    book <.. waitlist : <<extend>>n(無可用餐桌)
}

diner --> book
diner --> preorder
diner --> cancel
manager --> manage

@enduml

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
Person(user, "使用者", "說明")
System(system, "系統名稱", "說明")
System_Ext(external, "外部系統", "說明")
Rel(user, system, "使用", "通訊協定")

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
Container(container, "容器名稱", "技術", "說明")
ContainerDb(db, "資料庫", "PostgreSQL", "儲存資料")

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
Component(component, "元件名稱", "說明")

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
Deployment_Node(node, "節點名稱", "技術")

actor "參與者名稱" as actor
participant "參與者" as participant
actor -> participant: 訊息
activate participant
participant --> actor: 回覆
deactivate participant

actor "使用者" as user
usecase "使用案例" as uc
user --> uc
uc ..> included : <<include>>
uc <.. extended : <<extend>>