掌握程式碼繪圖：現代開發團隊的完整 VPasCode 教程

graph TD
    A[使用者輸入憑證] --> B{格式有效？}
    B -->|否| C[顯示驗證錯誤]
    B -->|是| D[傳送至驗證服務]
    C --> A
    D --> E{憑證相符？}
    E -->|否| F[回傳 401 未授權]
    E -->|是| G[產生 JWT Token]
    G --> H[將 Token 儲存於 HttpOnly Cookie]
    H --> I[重新導向至主控台]
    F --> A
    
    style A fill:#e1f5ff,stroke:#0066cc
    style I fill:#d4edda,stroke:#28a745
    style F fill:#f8d7da,stroke:#dc3545

graph LR
    subgraph Client["客戶端層"]
        Web[Web 應用程式<br/>React]
        Mobile[行動應用程式<br/>Flutter]
    end
    
    subgraph API["API 閘道"]
        Gateway[ Kong 閘道 ]
        Auth[驗證服務]
        Rate[速率限制器]
    end
    
    subgraph Services["業務服務"]
        User[使用者服務]
        Order[訂單服務]
        Product[產品服務]
        Payment[付款服務]
    end
    
    subgraph Data["資料層"]
        UserDB[(使用者資料庫<br/>PostgreSQL)]
        OrderDB[(訂單資料庫<br/>MongoDB)]
        ProductDB[(產品資料庫<br/>PostgreSQL)]
        Cache[(Redis 快取)]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    Gateway --> Auth
    Gateway --> Rate
    Rate --> User
    Rate --> Order
    Rate --> Product
    User --> UserDB
    User --> Cache
    Order --> OrderDB
    Order --> Payment
    Product --> ProductDB
    Payment --> OrderDB
    
    style Gateway fill:#ff6b6b,stroke:#c92a2a,color:white
    style UserDB fill:#4ecdc4,stroke:#087f5b
    style OrderDB fill:#4ecdc4,stroke:#087f5b
    style ProductDB fill:#4ecdc4,stroke:#087f5b
    style Cache fill:#ffe66d,stroke:#f08c00

sequenceDiagram
    autonumber
    participant C as Customer
    participant W as Web App
    participant O as Order Service
    participant P as Payment Service
    participant I as Inventory Service
    participant N as Notification Service
    
    C->>W: Add items to cart
    C->>W: Click "Checkout"
    W->>O: POST /orders {items, shipping}
    O->>I: Reserve inventory
    I-->>O: Reservation confirmed
    O->>P: Process payment
    P-->>O: Payment successful
    O->>O: Create order record
    O->>N: Send order confirmation
    N-->>C: Email confirmation
    O-->>W: 201 Created {orderId}
    W-->>C: Show success page
    
    Note over O,P: Critical section<br/>must be transactional
    rect rgba(200, 200, 0, 0.2)
        O->>P: Charge card
        P-->>O: Transaction ID
    end

gantt
    title 衝程 24 - 認證模組
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section 後端
    設計 API 合約       :已完成,    des1, 2024-06-01, 2d
    實作 JWT 服務      :進行中,  des2, 2024-06-03, 3d
    資料庫遷移         :         des3, 在 des2 之後, 2d
    單元測試              :         des4, 在 des3 之後, 2d
    
    section 前端
    登入元件           :         front1, 2024-06-03, 3d
    權杖管理          :         front2, 在 front1 之後, 2d
    受保護的路由          :         front3, 在 front2 之後, 2d
    
    section 整合
    API 整合           :         int1, 在 des4 之後, 2d
    端到端測試              :         int2, 在 int1 之後, 3d
    安全審計           :         int3, 在 int2 之後, 2d

@startuml
!theme plain
skinparam backgroundColor #FFFFFF
skinparam componentStyle uml2

title "電商平台 - 元件架構"

package "展示層" {
    [Web 前端] as Web
    [行動應用程式] as Mobile
    [管理員儀表板] as Admin
}

package "API 層" {
    [API 閘道] as Gateway
    [認證] as Auth
    [速率限制器] as RateLimit
}

package "業務服務" {
    [目錄服務] as Catalog
    [訂單服務] as Order
    [付款服務] as Payment
    [運送服務] as Shipping
    [通知服務] as Notify
}

package "資料層" {
    database "產品資料庫" as ProdDB
    database "訂單資料庫" as OrderDB
    database "使用者資料庫" as UserDB
    queue "訊息佇列" as MQ
}

Web --> Gateway
Mobile --> Gateway
Admin --> Gateway

Gateway --> Auth
Gateway --> RateLimit
Gateway --> Catalog
Gateway --> Order

Order --> Payment
Order --> Shipping
Order --> Notify

Catalog --> ProdDB
Order --> OrderDB
Auth --> UserDB

Payment ..> MQ : 發布事件
Shipping ..> MQ : 訂閱事件
Notify ..> MQ : 訂閱事件

@enduml

@startuml
|客戶|
開始
:瀏覽商品；
:加入購物車；
:前往結帳；

|系統|
:驗證購物車項目；
:計算總金額；
if (有庫存？) then (是)
  :保留庫存；
else (否)
  :顯示缺貨；
  結束
endif

|客戶|
:輸入送貨地址；
:選擇付款方式；

|系統|
:處理付款；
if (付款成功？) then (是)
  :建立訂單；
  :發送確認電子郵件；
  :更新庫存；
else (否)
  :顯示付款錯誤；
  分離
endif

:出貨訂單；
:更新訂單狀態；
結束

分割區「背景作業」{
  :產生發票；
  :通知倉庫；
}

@enduml

digraph MicroservicesDependencies {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="Arial"];
    edge [fontname="Arial", fontsize=10];
    
    // 節點定義與顏色
    node [fillcolor="#e3f2fd"];
    "API Gateway" [fillcolor="#ffcdd2"];
    "Service Mesh" [fillcolor="#fff9c4"];
    
    // 核心服務
    "User Service";
    "Auth Service";
    "Order Service";
    "Payment Service";
    "Inventory Service";
    "Notification Service";
    "Analytics Service";
    
    // 資料庫
    node [shape=cylinder, fillcolor="#c8e6c9"];
    "User DB";
    "Order DB";
    "Product DB";
    "Analytics DB";
    
    // 外部服務
    node [shape=box, fillcolor="#f3e5f5", style="dashed,filled"];
    "Payment Gateway";
    "Email Service";
    "SMS Service";
    
    // 關聯關係
    "API Gateway" -> "Service Mesh";
    "Service Mesh" -> "User Service";
    "Service Mesh" -> "Auth Service";
    "Service Mesh" -> "Order Service";
    "Service Mesh" -> "Payment Service";
    "Service Mesh" -> "Inventory Service";
    
    "User Service" -> "User DB";
    "Auth Service" -> "User DB";
    "Order Service" -> "Order DB";
    "Order Service" -> "Inventory Service";
    "Order Service" -> "Payment Service";
    "Inventory Service" -> "Product DB";
    "Payment Service" -> "Payment Gateway";
    "Notification Service" -> "Email Service";
    "Notification Service" -> "SMS Service";
    "Analytics Service" -> "Analytics DB";
    
    "Order Service" -> "Notification Service" [style=dashed];
    "Payment Service" -> "Notification Service" [style=dashed];
    
    // 用於分組的子圖
    {
        rank=same;
        "User Service";
        "Auth Service";
    }
    
    {
        rank=same;
        "Order Service";
        "Payment Service";
        "Inventory Service";
    }
}

digraph OrgChart {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="Helvetica"];
    edge [fontname="Helvetica", arrowsize=0.7];
    
    // 高階管理層
    CEO [label="執行長nJohn Smith", fillcolor="#1976d2", fontcolor="white"];
    
    // C 級主管
    subgraph cluster_exec {
        label="管理團隊";
        style=dashed;
        color="#90caf9";
        
        CTO [label="技術長nSarah Johnson", fillcolor="#42a5f5"];
        CFO [label="財務長nMichael Brown", fillcolor="#42a5f5"];
        COO [label="營運長nEmily Davis", fillcolor="#42a5f5"];
        CPO [label":"產品長nDavid Wilson", fillcolor="#42a5f5"];
    }
    
    // 工程部門
    subgraph cluster_eng {
        label="工程部門";
        style=filled;
        color="#e3f2fd";
        
        VP_Eng [label="工程副總裁", fillcolor="#64b5f6"];
        
        subgraph cluster_eng_teams {
            label="團隊";
            style=dotted;
            
            Backend [label="後端團隊n(12 位工程師)", fillcolor="#bbdefb"];
            Frontend [label="前端團隊n(8 位工程師)", fillcolor="#bbdefb"];
            DevOps [label="DevOps 團隊n(5 位工程師)", fillcolor="#bbdefb"];
            QA [label="品質保證團隊n(6 位工程師)", fillcolor="#bbdefb"];
        }
    }
    
    // 產品部門
    subgraph cluster_product {
        label="產品部門";
        style=filled;
        color="#fff3e0";
        
        VP_Product [label="產品副總裁", fillcolor="#ffb74d"];
        PM1 [label="產品經理n平台", fillcolor="#ffcc80"];
        PM2 [label="產品經理n行動", fillcolor="#ffcc80"];
        PM3 [label="產品經理n分析", fillcolor="#ffcc80"];
    }
    
    // 關聯關係
    CEO -> CTO;
    CEO -> CFO;
    CEO -> COO;
    CEO -> CPO;
    
    CTO -> VP_Eng;
    VP_Eng -> Backend;
    VP_Eng -> Frontend;
    VP_Eng -> DevOps;
    VP_Eng -> QA;
    
    CPO -> VP_Product;
    VP_Product -> PM1;
    VP_Product -> PM2;
    VP_Product -> PM3;
    
    // 虛線表示協作關係
    PM1 -> Backend [style=dotted, color="#757575"];
    PM2 -> Frontend [style=dotted, color="#757575"];
    PM3 -> Backend [style=dotted, color="#757575"];
}

digraph DataFlow {
    rankdir=LR;
    nodesep=1.0;
    node [shape=ellipse, style="filled", fontname="Arial"];
    edge [fontname="Arial", fontsize=9];
    
    // 外部實體
    node [fillcolor="#ffccbc", shape=box];
    Customer [label="客戶"];
    Vendor [label="供應商"];
    Bank [label="銀行系統"];
    
    // 處理程序
    node [fillcolor="#c5cae9", shape=circle];
    P1 [label="下單"];
    P2 [label="處理付款"];
    P3 [label="更新庫存"];
    P4 [label="產生發票"];
    P5 [label="出貨"];
    P6 [label="發送通知"];
    
    // 資料儲存
    node [fillcolor="#c8e6c9", shape=box3d];
    D1 [label="訂單資料庫"];
    D2 [label="庫存資料庫"];
    D3 [label="客戶資料庫"];
    D4 [label="發票記錄"];
    
    // 資料流程
    Customer -> P1 [label="訂單請求"];
    P1 -> D1 [label="儲存訂單"];
    P1 -> D3 [label="更新客戶資料"];
    P1 -> P2 [label="付款詳情"];
    
    P2 -> Bank [label="付款請求"];
    Bank -> P2 [label="付款確認"];
    P2 -> P3 [label="付款成功"];
    
    P3 -> D2 [label="減少庫存"];
    P3 -> P4 [label="訂單確認"];
    
    P4 -> D4 [label="儲存發票"];
    P4 -> P6 [label="發票資料"];
    
    P3 -> P5 [label="出貨請求"];
    P5 -> Vendor [label="運送標籤"];
    P5 -> P6 [label="追蹤資訊"];
    
    P6 -> Customer [label="訂單確認n+ 追蹤資訊"];
    
    // 虛線表示查詢動作
    D1 -> P5 [label="取得訂單詳情", style=dashed];
    D2 -> P1 [label="檢查庫存可用性", style=dashed];
    D3 -> P1 [label="取得客戶資訊", style=dashed];
}

graph LR
    subgraph Source["源控制"]
        Git[GitHub 儲存庫]
        PR[拉取請求]
    end
    
    subgraph CI["持續整合"]
        Lint[程式碼檢查]
        Test[單元測試]
        Build[建置產出]
        Scan[安全掃描]
    end
    
    subgraph CD["持續部署"]
        Dev[部署至開發環境]
        Stage[部署至預設環境]
        E2E[端到端測試]
        Prod[部署至生產環境]
    end
    
    subgraph Monitor["監控"]
        Logs[日誌聚合]
        Metrics[指標儀表板]
        Alerts[告警系統]
    end
    
    Git --> PR
    PR --> Lint
    Lint --> Test
    Test --> Build
    Build --> Scan
    Scan --> Dev
    Dev --> Stage
    Stage --> E2E
    E2E --> Prod
    Prod --> Logs
    Prod --> Metrics
    Metrics --> Alerts
    
    style Git fill:#f0f0f0,stroke:#333
    style Prod fill:#d4edda,stroke:#28a745,color:black
    style Alerts fill:#f8d7da,stroke:#dc3545,color:black

@startuml
!define TABLE(name) entity name << (T,#FFAAAA) >>
!define PK(x) x <<PK>>
!define FK(x) x <<FK>>

TABLE(Users) {
    PK(user_id) : INT
    --
    email : VARCHAR(255)
    password_hash : VARCHAR(255)
    created_at : TIMESTAMP
    last_login : TIMESTAMP
    status : ENUM
}

TABLE(Products) {
    PK(product_id) : INT
    --
    sku : VARCHAR(50)
    name : VARCHAR(255)
    description : TEXT
    price : DECIMAL(10,2)
    stock_quantity : INT
    category_id : INT
}

TABLE(Categories) {
    PK(category_id) : INT
    --
    name : VARCHAR(100)
    parent_id : INT
}

TABLE(Orders) {
    PK(order_id) : INT
    --
    FK(user_id) : INT
    order_date : TIMESTAMP
    total_amount : DECIMAL(10,2)
    status : ENUM
    shipping_address : TEXT
}

TABLE(OrderItems) {
    PK(item_id) : INT
    --
    FK(order_id) : INT
    FK(product_id) : INT
    quantity : INT
    unit_price : DECIMAL(10,2)
}

TABLE(Payments) {
    PK(payment_id) : INT
    --
    FK(order_id) : INT
    payment_method : ENUM
    transaction_id : VARCHAR(255)
    amount : DECIMAL(10,2)
    status : ENUM
    processed_at : TIMESTAMP
}

Users ||--o{ Orders : places
Orders }o--|{ Users : belongs_to
Orders ||--|{ OrderItems : contains
OrderItems }o--|| Products : references
Products }o--|| Categories : categorized_in
Orders ||--o{ Payments : paid_by

note right of Users
  儲存客戶帳戶
  與認證資料
end note

note left of Orders
  主要交易記錄
  含運送詳情
end note

@enduml

graph TB
    subgraph AWS["AWS 雲端基礎設施"]
        direction TB
        
        subgraph Networking["網路"]
            VPC[VPC 10.0.0.0/16]
            IGW[網際網路閘道器]
            NAT[NAT 閘道器]
            
            subgraph Public["公用子網路"]
                ALB[應用程式負載平衡器]
                Bastion[堡壘主機]
            end
            
            subgraph Private["私有子網路"]
                subgraph AppTier["應用層"]
                    ECS1[ECS 任務 1]
                    ECS2[ECS 任務 2]
                    ECS3[ECS 任務 3]
                end
                
                subgraph DataTier["資料層"]
                    RDS[RDS PostgreSQL<br/>多可用區]
                    Redis[ElastiCache Redis]
                end
            end
        end
        
        subgraph Storage["儲存"]
            S3[S3 儲存桶<br/>資產與備份]
            EFS[EFS 共用儲存]
        end
        
        subgraph Security["安全"]
            WAF[WAF 規則]
            SG[安全群組]
            IAM[IAM 角色]
        end
        
        subgraph Monitoring["監控與記錄"]
            CW[CloudWatch]
            XRay[AWS X-Ray]
            SNS[SNS 通知]
        end
    end
    
    User[終端使用者] --> CloudFront[CloudFront CDN]
    CloudFront --> WAF
    WAF --> ALB
    ALB --> ECS1
    ALB --> ECS2
    ALB --> ECS3
    
    ECS1 --> RDS
    ECS2 --> RDS
    ECS3 --> RDS
    
    ECS1 --> Redis
    ECS2 --> Redis
    ECS3 --> Redis
    
    ECS1 --> S3
    ECS2 --> S3
    ECS3 --> S3
    
    ECS1 --> EFS
    ECS2 --> EFS
    ECS3 --> EFS
    
    ECS1 --> CW
    ECS2 --> CW
    ECS3 --> CW
    
    RDS --> CW
    Redis --> CW
    
    CW --> SNS
    
    style VPC fill:#f9f9f9,stroke:#333,stroke-width:2px
    style ALB fill:#ff9900,stroke:#cc7a00,color:white
    style RDS fill:#2e73b8,stroke:#1a4d80,color:white
    style User fill:#95a5a6,stroke:#7f8c8d

%%{init: {'theme':'base', 'themeVariables': {
    'primaryColor': '#4CAF50',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#388E3C',
    'lineColor': '#757575',
    'secondaryColor': '#FFC107',
    'tertiaryColor': '#fff'
}}}%%

graph TD
    A[開始] --> B{決策}
    B -->|是| C[處理 A]
    B -->|否| D[處理 B]
    C --> E[結束]
    D --> E
    
    style A fill:#2196F3,stroke:#1976D2,color:white
    style E fill:#F44336,stroke:#D32F2F,color:white

@startuml
' 全域樣式
skinparam backgroundColor #FFFFFF
skinparam shadowing false
skinparam roundcorner 10
skinparam linetype ortho

' 元件樣式
skinparam component {
    BackgroundColor #E3F2FD
    BorderColor #1976D2
    ArrowColor #1976D2
}

' 套件樣式
skinparam package {
    BackgroundColor #FFF3E0
    BorderColor #F57C00
    FontSize 14
}

' 註解樣式
skinparam note {
    BackgroundColor #F1F8E9
    BorderColor #689F38
    FontColor #33691E
}

package "前端" {
    component [React 應用程式]
    component [Redux Store]
}

package "後端" {
    component [Node.js API]
    component [Express Server]
    database [MongoDB]
}

[React 應用程式] --> [Redux Store]
[Redux Store] --> [Node.js API]
[Node.js API] --> [Express Server]
[Express Server] --> [MongoDB]

note right of [Redux Store]
  整個應用程式的集中式狀態管理
end note

@enduml

digraph AdvancedStyling {
    // 全域圖形屬性
    graph [
        bgcolor="#f8f9fa"
        fontname="Helvetica"
        fontsize=16
        label="企業系統架構n生產環境"
        labelloc="t"
        pad=0.5
        ranksep=1.5
        nodesep=1.0
    ];
    
    // 預設節點屬性
    node [
        fontname="Helvetica"
        fontsize=11
        style="filled,rounded"
        penwidth=2
    ];
    
    // 預設邊屬性
    edge [
        fontname="Helvetica"
        fontsize=9
        penwidth=1.5
        arrowsize=0.8
    ];
    
    // 自訂樣式的節點叢集
    subgraph cluster_presentation {
        label="展示層";
        style=filled;
        color="#e3f2fd";
        fontcolor="#1565c0";
        
        Web [label="Web 應用程式<br/>React 18", fillcolor="#64b5f6", fontcolor="white"];
        Mobile [label="行動應用程式<br/>Flutter", fillcolor="#64b5f6", fontcolor="white"];
    }
    
    subgraph cluster_business {
        label="業務邏輯層";
        style=filled;
        color="#fff3e0";
        fontcolor="#e65100";
        
        API [label="REST API<br/>Node.js", fillcolor="#ffb74d", fontcolor="black"];
        GraphQL [label="GraphQL Gateway", fillcolor="#ffb74d", fontcolor="black"];
    }
    
    subgraph cluster_data {
        label="資料層";
        style=filled;
        color="#e8f5e9";
        fontcolor="#2e7d32";
        
        Primary [label="主要資料庫<br/>PostgreSQL 14", shape=cylinder, fillcolor="#a5d6a7"];
        Replica [label="唯讀複本<br/>PostgreSQL 14", shape=cylinder, fillcolor="#c8e6c9"];
        Cache [label="Redis 快取<br/>叢集模式", shape=cylinder, fillcolor="#c8e6c9"];
    }
    
    // 自訂樣式的邊
    Web -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
    Mobile -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
    Web -> GraphQL [label="WebSocket", color="#1976d2", fontcolor="#1976d2", style=dashed];
    
    API -> Primary [label="讀/寫", color="#388e3c", fontcolor="#388e3c"];
    API -> Cache [label="快取", color="#f57c00", fontcolor="#f57c00", style=dashed];
    GraphQL -> Replica [label="唯讀", color="#388e3c", fontcolor="#388e3c"];
    
    Primary -> Replica [label="串流複寫", color="#757575", style=dotted];
}