從程式碼到清晰：使用 VPasCode 與 OpenDocs 進行無縫圖表製作的初學者指南

graph TD
    A[開始：使用者開啟應用程式] --> B[輸入使用者名稱與密碼]
    B --> C{嘗試登入}
    C -->|成功| D[重新導向至主控台]
    C -->|失敗| E[顯示錯誤訊息]
    E --> F{重試？}
    F -->|是| B
    F -->|否| G[結束：登入已中止]
    D --> G

    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style E fill:#ffebee
    style C fill:#f3e5f5

sequenceDiagram
    autonumber
    
    actor User
    participant Client as Web Client
    participant API as REST API
    participant Auth as Auth Service
    participant DB as Database

    User->>Client: 輸入憑證
    Client->>+API: POST /login
    API->>+Auth: 驗證憑證
    Auth->>+DB: 尋找使用者

    alt 使用者存在
        DB-->>Auth: 使用者記錄
        Auth->>Auth: 驗證密碼
        
        alt 密碼相符
            Auth->>Auth: 產生 JWT
            Auth-->>-API: 權杖
            API-->>-Client: 200 OK + 權杖
            Client->>Client: 儲存權杖
            Client-->>User: 登入成功
        else 密碼錯誤
            Auth-->>API: 無效憑證
            API-->>Client: 401 未授權
            Client-->>User: 密碼錯誤
        end
    else 使用者未找到
        DB-->>-Auth: 未找到
        Auth-->>API: 無效使用者
        API-->>Client: 401 未授權
        Client-->>User: 使用者未找到
    end

graph TD
    subgraph "線上銀行系統"
        WebApp[Web 應用程式<br/>Java, Spring MVC<br/>向使用者提供內容]
        API[API 後端<br/>Java, Spring Boot<br/>處理業務邏輯]
        DB[(資料庫<br/>SQL<br/>儲存使用者帳戶與交易)]
    end
    
    User[客戶] -->|使用| WebApp
    WebApp -->|透過 HTTPS 呼叫| API
    API -->|讀取/寫入| DB

    style User fill:#08427b,color:#fff
    style WebApp fill:#1168bd,color:#fff
    style API fill:#1168bd,color:#fff
    style DB fill:#1a5276,color:#fff

sequenceDiagram
    autonumber
    
    actor 使用者
    participant 瀏覽器
    participant App as 客戶端應用程式
    participant Auth as 驗證伺服器
    participant Resource as 資源 API

    使用者->>瀏覽器：點擊「使用 OAuth 登入」
    瀏覽器->>App：啟動登入
    App->>瀏覽器：重新導向至驗證伺服器
    瀏覽器->>Auth：授權請求

    Auth->>使用者：顯示登入表單
    使用者->>Auth：輸入憑證
    Auth->>使用者：顯示同意畫面
    使用者->>Auth：授予權限

    Auth->>瀏覽器：以授權碼重新導向
    瀏覽器->>App：授權碼回呼

    rect rgb(255, 240, 200)
        Note over App,Auth: 伺服器到伺服器（安全）
        App->>Auth：交換代碼以取得權杖
        Auth-->>App：存取權杖 + 重新整理權杖
    end

    App->>瀏覽器：設定工作階段
    瀏覽器-->>使用者：已登入

    loop API 呼叫
        瀏覽器->>App：請求資料
        App->>Resource：API 呼叫 + 存取權杖
        
        alt 權杖有效
            Resource-->>App：資料
            App-->>瀏覽器：回應
        else 權杖已過期
            Resource-->>App：401
            App->>Auth：重新整理權杖
            Auth-->>App：新的存取權杖
            App->>Resource：以新權杖重試
            Resource-->>App：資料
            App-->>瀏覽器：回應
        end
    end

graph TD
    subgraph "建置階段"
        A[程式碼檢查] --> B[執行測試] --> C[建置產出]
    end
    
    subgraph "部署階段"
        D[部署至預先環境] --> E[執行整合測試]
        E --> F{測試通過？}
        F -->|是| G[部署至生產環境]
        F -->|否| H[回滾]
    end
    
    C --> D
    
    style A fill:#e1f5fe
    style B fill:#e1f5fe
    style C fill:#e1f5fe
    style D fill:#e8f5e8
    style E fill:#e8f5e8
    style F fill:#f3e5f5
    style G fill:#a5d6a7
    style H fill:#ffebee