运维123 - 白板
type: channel
link: https://www.sddts.cn/index.php/tag/%E7%99%BD%E6%9D%BF/
items: Neoflow 开源白板协作平台技术分析
items: pad.ws 白板即 IDE 技术分析

Neoflow 开源白板协作平台技术分析
type: item
date: 2026-01-17T02:06:19+00:00
description: Neoflow 开源白板协作平台技术分析一、项目概述1. 项目简介Neoflow 是一个开源的白板协作应用程序，专为无缝协作和创意设计而构建。该项目结合了简洁的界面与强大的功能，适合团队协作、设计师和创意工作者使用。2. 核心定位免费永久使用，无隐藏成本基于社区驱动的开源项目集成 AI 智能功能增强工作流实时协作能力3. 项目状态GitHub Stars：78Forks：11许可证：MIT License主要贡献者：2 人二、技术架构1. 技术栈A. 前端框架Next.js（React 框架）TypeScript（10.4%）JavaScript（87.1%）CSS（2.5%）B. 核心引擎tldraw：强大的白板绘图引擎C. 后端技术Prisma：ORM 数据库工具Next.js API Routes2. 系统架构graph TB subgraph Frontend A[用户界面] B[绘图组件] C[拖拽功能] end subgraph Backend D[Next.js API] E[tldraw 引擎] F[实时同步] end subgraph Data G[(Prisma DB)] H[AI 服务] end A --> B B --> C C --> E E --> F F --> D D --> G D --> H G <--> F三、核心功能1. 基础功能A. 白板绘图基于 tldraw 引擎的流畅绘图体验支持多种绘图工具和形状拖拽式操作界面B. 实时协作多用户同时编辑实时同步更新团队成员协作支持2. 高级功能A. AI 集成智能辅助功能工作流增强创意建议B. 开源特性代码透明公开社区贡献支持MIT 许可证自由使用四、部署与安装1. 系统要求Node.js 环境npm 包管理器数据库支持（Prisma）2. 快速安装# 克隆仓库 git clone https://github.com/kiraaziz/Neoflow.git # 进入项目目录 cd Neoflow # 配置环境变量 # 复制 .env.example 并填写必需的配置项 # 安装依赖 npm --force i # 启动开发服务器 npm run dev # 访问应用 # http://localhost:30003. 环境配置需要设置 .env 文件中的必需变量，包括数据库连接、AI 服务配置等。五、技术特点分析1. 架构优势A. 现代化技术栈Next.js 提供服务端渲染和静态生成TypeScript 提供类型安全Prisma 简化数据库操作B. 实时协作能力基于 Web 的实时同步机制支持多用户并发编辑数据一致性保证2. 用户体验A. 直观界面简洁易用的设计拖拽式交互低学习成本B. 功能完整性绘图工具齐全AI 辅助增强创意团队协作无缝衔接六、项目分析1. 优势A. 开源免费MIT 许可证，商业友好无使用限制社区驱动发展B. 技术先进基于 tldraw 成熟引擎Next.js 现代化框架AI 功能集成C. 易于部署清晰的安装文档标准的技术栈快速上手2. 待改进方向A. 项目成熟度贡献者较少（仅 2 人）无正式版本发布文档可以更完善B. 功能扩展可以增加更多绘图工具AI 功能可以进一步丰富移动端适配可以优化七、应用场景1. 团队协作远程团队头脑风暴敏捷开发看板项目规划会议2. 设计创意UI/UX 设计草图用户流程图绘制创意构思记录3. 教育培训在线教学白板知识图谱绘制协作学习八、竞品对比1. 与商业产品对比特性NeoflowMiroExcalidraw开源✅❌✅免费使用✅限制✅AI 功能✅✅❌实时协作✅✅✅2. 竞争优势完全开源且免费AI 功能集成基于 tldraw 成熟引擎MIT 许可证商业友好九、社区与生态1. 社区资源GitHub 仓库Discord 社区开放贡献2. 贡献方式代码贡献功能建议Bug 反馈文档完善十、总结Neoflow 是一个有潜力的开源白板协作平台，结合了现代化的技术栈和实用的功能设计。其基于 tldraw 引擎和 AI 集成的特点，为用户提供了免费且强大的协作工具。虽然项目仍处于早期阶段，但随着社区参与度的提升，有望成为商业白板工具的有力替代方案。对于寻求免费、开源白板解决方案的团队和个人来说，Neoflow 值得关注和尝试。参考资料Neoflow GitHub 仓库Neoflow 官方网站

pad.ws 白板即 IDE 技术分析
type: item
date: 2026-01-15T10:00:22+00:00
description: 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 --> E2. 核心组件A. 前端组件Excalidraw：提供手绘风格的交互式白板VS Code Web：基于 Web 的代码编辑器Web 终端：浏览器内的终端模拟器B. 后端服务FastAPI 应用：统一的前端服务和后端 APICoder：云开发环境管理平台Keycloak：OIDC 认证和用户管理C. 数据存储PostgreSQL：持久化存储画布和配置Redis：缓存和会话管理3. 技术栈组件技术选型用途白板界面Excalidraw交互式绘图代码编辑VS Code Web代码编辑后端框架FastAPIAPI 服务认证服务KeycloakOIDC 认证开发环境Coder云开发环境数据库PostgreSQL数据持久化缓存Redis会话和缓存容器化Docker环境隔离四、部署架构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部署顺序PostgreSQL：数据持久化Redis：缓存和会话管理Keycloak：OIDC 认证服务Coder：云开发环境平台Pad App：主应用服务环境变量配置OIDC 配置：Realm、Client ID、Client SecretCoder 配置：API Key、Template ID、Organization IDDocker 配置：Docker Group IDRedis 配置：密码认证五、工作流程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. 开发环境创建流程用户登录 Keycloak 获取 OIDC TokenPad App 使用 Co…