深度評測：使用 VPasCode 搭配 Mermaid 實現「圖形即程式碼」

graph TD
    A[開始] --> B{運作中嗎？}
    B -->|是| C[太好了！]
    B -->|否| D[除錯]
    D --> B

graph LR
    A[使用者登入] --> B[驗證憑證]
    B -->|有效| C[進入儀表板]
    B -->|無效| D[顯示錯誤訊息]
    D --> A

sequenceDiagram
    participant 使用者
    participant APIGateway
    participant 資料庫
    
    使用者->>APIGateway: 請求資料
    APIGateway->>資料庫: 查詢記錄
    資料庫-->>APIGateway: 回傳結果
    APIGateway-->>使用者: 傳送回應

classDiagram
    class ProductManager {
        +String Name
        +int ExperienceYears
        +CreateRoadmap()
        +ConductUserResearch()
    }
    
    class ScrumTeam {
        +List Members
        +SprintPlanning()
        +ReviewBacklog()
    }
    
    ProductManager --> ScrumTeam : 協作

stateDiagram-v2
    [*] --> Draft
    Draft --> UnderReview : Submit
    UnderReview --> Approved : Pass
    UnderReview --> Draft : Reject for Changes
    Approved --> Published : Publish
    Published --> [*]

erDiagram
    USER ||--o{ ORDER : Places
    ORDER ||--|{ PRODUCT : Contains
    USER {
        int id
        string name
        string email
    }
    ORDER {
        int id
        date orderDate
        float totalAmount
    }

gantt
    title Product Development Timeline
    dateFormat  YYYY-MM-DD
    section Planning Phase
    Requirements Analysis     :2026-01-01, 30d
    UI Design       :2026-02-01, 20d
    section Development Phase
    Backend Dev     :2026-02-15, 45d
    Frontend Dev     :2026-03-01, 40d
    section Testing Phase
    QA Testing       :2026-04-15, 20d

pie title 工作時間分配
    "用戶研究" : 25
    "路線圖規劃" : 20
    "利益相關者會議" : 15
    "數據分析" : 20
    "文檔編寫" : 10
    "其他" : 10

graph TB
    subgraph FrontendLayer
        A[React App]
        B[UI Component Library]
    end
    
    subgraph BackendLayer
        C[API Server]
        D[Database]
    end
    
    A --> C
    C --> D

graph TD
    A[Start] --> B[Processing]
    B --> C[End]
    
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bfb,stroke:#333,stroke-width:2px

graph LR 
A[檢視文件] -->|點擊跳轉| B[Visual Paradigm 主網站] 
click A href "https://www.visual-paradigm.com" "造訪 Visual Paradigm 主網站"

sequenceDiagram
    participant 使用者
    participant 客戶端應用程式
    participant 授權伺服器
    participant 資源伺服器
    
    使用者->>客戶端應用程式：登入請求
    客戶端應用程式->>授權伺服器：授權請求
    授權伺服器-->>使用者：顯示登入頁面
    使用者->>授權伺服器：輸入憑證
    授權伺服器-->>客戶端應用程式：回傳授權碼
    客戶端應用程式->>授權伺服器：請求權杖
    授權伺服器-->>客戶端應用程式：回傳存取權杖
    客戶端應用程式->>資源伺服器：帶權杖的 API 請求
    資源伺服器-->>客戶端應用程式：回傳資料
    客戶端應用程式-->>使用者：顯示資料

graph TB
    subgraph Discovery[「探索階段」]
        A[市場研究] --> B[使用者訪談]
        B --> C[競爭分析]
        C --> D[問題定義]
    end
    
    subgraph Planning[「規劃階段」]
        D --> E[建立路線圖]
        E --> F[定義需求]
        F --> G[優先處理待辦事項]
    end
    
    subgraph Execution[「執行階段」]
        G --> H[衝刺規劃]
        H --> I[開發]
        I --> J[測試與品質保證]
        J --> K[發布]
    end
    
    subgraph Feedback[「回饋循環」]
        K --> L[收集指標]
        L --> M[使用者回饋]
        M --> N[分析結果]
        N --> A
    end
    
    style Discovery fill:#e1f5ff,stroke:#01579b
    style Planning fill:#fff4e1,stroke:#9b7a01
    style Execution fill:#e1ffe1,stroke:#019b01
    style Feedback fill:#ffe1e1,stroke:#9b0101

graph LR
    subgraph SprintPlanning["Sprint Planning"]
        A[Review Backlog] --> B[Estimate Stories]
        B --> C[Commit to Sprint Goal]
    end
    
    subgraph DailyWork["Daily Work"]
        C --> D[Daily Standup]
        D --> E[Development]
        E --> F[Code Review]
        F --> G[Testing]
    end
    
    subgraph Review["Review & Retro"]
        G --> H[Demonstrate Work]
        H --> I[Gather Feedback]
        I --> J[Retrospective]
        J --> K[Identify Improvements]
    end
    
    K --> A
    
    style SprintPlanning fill:#cce5ff
    style DailyWork fill:#d4edda
    style Review fill:#f8d7da

graph TB
    Client[Web/Mobile Client]
    
    subgraph APIGateway["API Gateway"]
        GW[API Gateway]
    end
    
    subgraph Services["Microservices"]
        Auth[Auth Service]
        User[User Service]
        Order[Order Service]
        Payment[Payment Service]
        Notification[Notification Service]
    end
    
    subgraph Infrastructure["Infrastructure"]
        DB[(Database)]
        Cache[(Redis Cache)]
        Queue[Message Queue]
    end
    
    Client --> GW
    GW --> Auth
    GW --> User
    GW --> Order
    Order --> Payment
    Order --> Queue
    Queue --> Notification
    
    Auth --> DB
    User --> DB
    User --> Cache
    Order --> DB
    Payment --> DB
    
    style APIGateway fill:#ffd700
    style Services fill:#87ceeb
    style Infrastructure fill:#98fb98

graph TD
    Start{New Feature Request}
    
    Start -->|High Impact| A{Technical Feasibility}
    Start -->|Low Impact| Reject[Reject or Low Priority]
    
    A -->|Feasible| B{Resource Availability}
    A -->|Not Feasible| Research[Research & Prototype]
    
    B -->|Available| C{Strategic Alignment}
    B -->|Not Available| Backlog[Add to Backlog]
    
    C -->|Aligned| Approve[Approve for Roadmap]
    C -->|Not Aligned| Reconsider[Re-evaluate Priority]
    
    Research --> A
    Reconsider --> Start
    
    style Approve fill:#90ee90
    style Reject fill:#ff6b6b
    style Backlog fill:#ffd700