白板秒变IDE，草图直接生成可运行代码！Pad.ws：白板+代码编辑器深度结合，创意到实现无缝衔接

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦

🎨 「设计师和开发者必看！这个开源神器让白板秒变IDE，草图直接生成可运行代码」

大家好，我是蚝油菜花。你是否也经历过这些创作困境------

👉 在白板上画完架构图，还要手动转录成代码文件
👉 团队协作时，设计稿和代码版本永远对不上
👉 想快速验证创意，却在环境配置上浪费半天...

今天要拆解的 Pad.ws ，正在重新定义开发工作流！这个基于浏览器的黑科技：

✅ 所见即所得：Excalidraw白板直接联动VS Code，草图秒变可执行代码
✅ 全功能IDE：内置终端+多语言支持，开发调试无需切换工具
✅ 云原生协作：支持自托管部署，跨国团队可实时协同编码

已有团队用它3天完成产品原型，接下来将揭秘这套「视觉化编程」系统的技术内核！

Pad.ws 是什么

Pad.ws 是创新的在线开发环境，结合了白板功能与完整的 IDE 工具。基于浏览器运行，无需安装额外软件，用户可以随时随地通过任何设备访问。

将交互式白板与代码编辑器深度融合，支持使用 Excalidraw 进行绘图，方便头脑风暴和创意构思，集成 VS Code 和终端，满足代码编写、调试和运行需求。无缝切换的设计，让开发者在创意与技术实现之间流转。

Pad.ws 的主要功能

交互式白板：基于 Excalidraw 提供强大的绘图工具，支持绘制草图、流程图、思维导图等。
实时协作：支持多人同时在白板上绘图和编辑，适合团队头脑风暴和远程协作。
集成 VS Code：内置完整的 VS Code 编辑器，支持多种编程语言，提供语法高亮、代码自动补全等功能。
终端集成：内置终端，用户可以直接运行代码、安装依赖和执行命令。
多设备支持：基于浏览器运行，无需安装额外软件，支持从电脑、平板甚至手机访问。
自托管部署：支持在本地服务器或私有云上部署，用户可以根据需求进行配置。

Pad.ws 的技术原理

基于浏览器的架构：完全运行在浏览器中的工具，采用 Web 技术栈开发。
WebSocket 实时通信：使用 WebSocket 技术实现白板和代码编辑器的实时协作功能。
安全机制：采用 HTTPS 加密传输数据，支持端到端加密和本地部署。

如何运行 pad.ws

pad.ws 是一个可以在浏览器中作为开发环境使用的白板应用。此应用使用 Excalidraw 作为白板界面，Coder 作为云开发环境。

在线体验

访问pad.ws以使用官方托管的实例。在测试期间提供免费的 Ubuntu 开发环境，无需任何设置。

pad.ws ：pad.ws

自托管部署

⚠️ 重要通知：此仓库处于早期开发阶段。docker-compose.yml 中提供的设置仅用于开发和测试目的。此简化示例允许你在 localhost 上托管 pad，但未经进一步配置不适用于实际生产环境 ⚠️

✅ 前提条件

Linux 主机（仅在 Ubuntu 上测试过）
Docker 和 Docker Compose ：确保已安装。安装 Docker / 安装 Docker Compose

1. .env 文件

复制并检查默认值

bash 复制代码

cp .env.template .env

2. PostgreSQL 🐘

确保整个部署的持久性（包括画布和配置）

运行 PostgreSQL 容器

bash 复制代码

docker compose up -d postgres

3. Keycloak 🔑

用于访问和用户管理的 OIDC 提供者（在 coder 和 pad 应用中）

运行 Keycloak 容器

bash 复制代码

docker compose up -d keycloak

访问 Keycloak 管理控制台：http://localhost:8080
创建 Realm ：给它一个适当的名称（例如 pad-ws）
创建 Client：
- 给它一个 Client ID（例如 pad-ws-client）
- 启用 Client Authentication
- 将 * 添加到有效的重定向 URL 列表中
- 其他设置可以保留默认值
获取凭据：
- 导航到 Clients -> [你的 Client ID] -> Credentials 标签
- 记下 Client secret。
- 更新你的环境变量文件（.env）：

dotenv 复制代码

OIDC_REALM=your_oidc_realm
OIDC_CLIENT_ID=your_client_id 
OIDC_CLIENT_SECRET=your_client_secret

创建用户 ：
- 导航到 Users -> Create user
- 填写详细信息
- 重要：勾选 Email verified
- 转到新用户的 Credentials 标签并设置密码

4. Coder 🧑‍💻

查找 Docker 组 ID：你需要此 ID 来授予必要的权限

bash 复制代码

getent group docker | cut -d: -f3

更新你的 .env 文件，添加 DOCKER_GROUP_ID：

dotenv 复制代码

DOCKER_GROUP_ID=your_docker_group_id

运行 Coder 容器

bash 复制代码

docker compose up -d coder

访问 Coder UI ：在浏览器中打开 localhost:7080
首次登录 ：创建一个管理员用户（例如 admin）
创建模板 ：
- 选择"从模板开始"选项
- 选择一个基础镜像（例如 docker-containers 或简单的 Ubuntu），按需配置
生成 API 密钥 ：
- 点击你的个人资料图片（右上角） -> Account -> API Keys
- 生成一个新的令牌
- 更新你的 .env 文件

dotenv 复制代码

CODER_API_KEY=your_coder_api_key

获取模板 ID ：
- 在浏览器中访问 http://localhost:7080/api/v2/templates（或使用 curl）
- 找到你创建的模板的 id
- 更新你的 .env 文件

dotenv 复制代码

CODER_TEMPLATE_ID=your_coder_template_id # 示例：85fb21ba-085b-47a6-9f4d-94ea979aaba9

获取默认组织 ID ：
- 在浏览器中访问 http://localhost:7080/api/v2/organizations（或使用 curl）
- 找到你的组织 id（通常是默认的）
- 更新你的 .env 文件

dotenv 复制代码

CODER_DEFAULT_ORGANIZATION=your_organization_id # 示例：70f6af06-ef3a-4b4c-a663-c03c9ee423bb

5. Pad 应用 📝

用于提供构建前端和与 Coder 交互的后端 API 的 FastAPI 应用

运行应用程序 ：
- 确保 .env 文件中的所有环境变量都已正确设置
- 运行 pad 应用程序容器

bash 复制代码

docker compose up -d pad

🎉 恭喜！ 你现在应该能够访问并登录到自托管部署的 pad 应用，地址为 localhost:8000。

资源

GitHub 仓库 ：github.com/pad-ws/pad....

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦