从代码到清晰：使用 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 用户
    participant 客户端 as 网页客户端
    participant API as REST API
    participant 认证服务 as 认证服务
    participant 数据库 as 数据库

    用户->>客户端: 输入凭据
    客户端->>+API: POST /login
    API->>+认证服务: 验证凭据
    认证服务->>+数据库: 查找用户

    alt 用户存在
        数据库-->>认证服务: 用户记录
        认证服务->>认证服务: 验证密码
        
        alt 密码匹配
            认证服务->>认证服务: 生成 JWT
            认证服务-->>-API: 令牌
            API-->>-客户端: 200 OK + 令牌
            客户端->>客户端: 存储令牌
            客户端-->>用户: 登录成功
        else 密码错误
            认证服务-->>API: 凭据无效
            API-->>客户端: 401 未授权
            客户端-->>用户: 密码错误
        end
    else 用户未找到
        数据库-->>-认证服务: 未找到
        认证服务-->>API: 用户无效
        API-->>客户端: 401 未授权
        客户端-->>用户: 用户未找到
    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 作为客户端应用
    participant Auth 作为认证服务器
    participant Resource 作为资源 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