pad.ws 白板即 IDE 技术分析

一、项目概述

1. 项目简介

pad.ws 是一个创新的开源项目，将交互式白板与完整功能的集成开发环境（IDE）融合在浏览器中。该项目打破了传统开发环境的边界，让开发者可以在可视化白板上自由构思、绘制流程图，并直接在同一界面进行编码工作。

2. 核心定位

白板即 IDE（Whiteboard as an IDE）—— 这是一个全新的开发环境概念，将可视化思维与代码编写无缝集成。

3. 项目背景

该项目由 coderamp-labs 团队开发，目前处于早期开发阶段。项目结合了 Excalidraw 的白板功能和 Coder 的云开发环境能力，为开发者提供独特的协作编程体验。

二、核心特性

1. 交互式白板

• 基于 Excalidraw 构建，提供流畅的绘图体验
• 支持手绘风格的可视化表达
• 适用于架构设计、流程图绘制、技术讨论等场景

2. 完整 IDE 功能

• 集成终端访问
• 内置 VS Code 编辑器
• 直接在白板界面中打开和使用
• 支持完整的开发工作流

3. 浏览器友好

• 无需本地安装任何软件
• 跨平台访问，支持任何设备
• 基于云端的开发环境

4. 无缝工作流

• 可视化构思与代码编写自由切换
• 白板上的想法可以直接转化为代码
• 支持架构图与代码并排展示

5. 自定义工具支持

• 支持从桌面客户端（VS Code 和 Cursor）访问虚拟机
• 保留开发者熟悉的工作习惯

三、技术架构

1. 系统组成

graph TB
    subgraph 前端层
        A[用户浏览器]
        B[Excalidraw 白板]
        C[VS Code Web]
        D[终端 Web]
    end

    subgraph 应用层
        E[Pad FastAPI 应用]
        F[前端构建产物]
    end

    subgraph 认证层
        G[Keycloak OIDC]
    end

    subgraph 开发环境层
        H[Coder 平台]
        I[工作空间容器]
        J[Docker 运行时]
    end

    subgraph 数据层
        K[(PostgreSQL)]
        L[(Redis)]
    end

    A --> B
    A --> C
    A --> D
    B --> E
    C --> E
    D --> E
    E --> F
    E --> G
    E --> H
    H --> I
    I --> J
    E --> K
    E --> L
    G --> E

2. 核心组件

A. 前端组件

• Excalidraw：提供手绘风格的交互式白板
• VS Code Web：基于 Web 的代码编辑器
• Web 终端：浏览器内的终端模拟器

B. 后端服务

• FastAPI 应用：统一的前端服务和后端 API
• Coder：云开发环境管理平台
• Keycloak：OIDC 认证和用户管理

C. 数据存储

• PostgreSQL：持久化存储画布和配置
• Redis：缓存和会话管理

3. 技术栈

四、部署架构

1. 官方托管

访问 pad.ws 可使用官方管理的实例，在 beta 期间提供免费的 Ubuntu 开发环境。

2. 自托管部署

graph LR
    A[Docker Compose] --> B[PostgreSQL]
    A --> C[Redis]
    A --> D[Keycloak]
    A --> E[Coder]
    A --> F[Pad App]
    E --> G[Docker in Docker]
    F --> E
    F --> D
    F --> K
    F --> L

部署顺序

1. PostgreSQL：数据持久化
2. Redis：缓存和会话管理
3. Keycloak：OIDC 认证服务
4. Coder：云开发环境平台
5. Pad App：主应用服务

环境变量配置

• OIDC 配置：Realm、Client ID、Client Secret
• Coder 配置：API Key、Template ID、Organization ID
• Docker 配置：Docker Group ID
• Redis 配置：密码认证

五、工作流程

1. 用户认证流程

sequenceDiagram
    participant U as 用户
    participant P as Pad App
    participant K as Keycloak
    participant C as Coder

    U->>P: 访问应用
    P->>K: 重定向到登录
    U->>K: 输入凭证
    K->>P: 返回 Token
    P->>C: 使用 Token 访问
    C->>P: 返回工作空间
    P->>U: 显示 IDE 界面

2. 开发环境创建流程

1. 用户登录 Keycloak 获取 OIDC Token
2. Pad App 使用 Coder API 创建工作空间
3. Coder 启动容器化的开发环境
4. 用户在白板上集成 VS Code 和终端

3. 白板与 IDE 交互

• 用户在白板上绘制架构图
• 直接在白板中嵌入 VS Code 编辑器
• 终端可用于执行命令和运行代码
• 所有操作都在浏览器中完成

六、技术创新点

1. 白板与 IDE 的深度融合

• 不是简单的界面嵌套，而是真正的功能集成
• 可视化思维与代码编写的无缝衔接
• 架构图、流程图与代码的统一视图

2. 云原生开发环境

• 基于 Coder 的容器化开发环境
• 支持从浏览器访问完整的 Linux 环境
• 可扩展到多种开发语言和工具链

3. 标准化认证

• 使用 Keycloak 提供 OIDC 认证
• 支持企业级的身份管理
• 可集成现有的 SSO 系统

4. 灵活的部署选项

• 官方托管服务
• 完全开源的自托管方案
• 支持自定义配置和扩展

七、应用场景

1. 技术设计与讨论

• 团队可以在白板上绘制系统架构
• 实时编写和验证代码
• 架构与代码的统一展示

2. 教学与培训

• 教师可以在白板上讲解概念
• 同时展示和编写代码
• 学生可以直接在环境中实践

3. 原型开发

• 快速绘制原型设计
• 直接编写实现代码
• 可视化与实现的快速迭代

4. 远程协作

• 分布式团队的协同开发
• 可视化的技术讨论
• 共享的开发环境

八、项目现状与限制

1. 当前状态

• 项目处于早期开发阶段
• docker-compose 配置仅用于开发测试
• 不建议直接用于生产环境

2. 已知限制

• 安全配置需要进一步完善
• 生产环境部署需要额外配置
• 文档和用户指南有待完善

3. 未来改进方向

• 增强安全性和认证机制
• 优化性能和用户体验
• 扩展功能和集成选项

九、竞品对比

pad.ws 的核心差异化优势在于白板与 IDE 的原生集成，这是其他云开发平台所不具备的特性。

十、总结

pad.ws 代表了开发环境的一种新范式：将可视化思维与代码编写统一在同一个界面中。这种设计特别适合：

1. 需要频繁绘制架构图的系统设计工作
2. 强调可视化思维的教学和培训场景
3. 需要快速原型验证的创新项目
4. 分布式团队的协作开发

项目的开源性质和自托管能力使其成为企业和开发者的一个有趣选择。随着项目的成熟，有望成为云开发环境领域的一个重要创新方向。

参考资料

1. pad.ws GitHub 仓库
2. Excalidraw 官方网站
3. Coder 开发平台