前端画图工具(把 VS Code 塞进白板,这款画图神器要火了!)

前端画图工具(把 VS Code 塞进白板,这款画图神器要火了!)
把 VS Code 塞进白板,这款画图神器要火了!

我们在做软件架构或者系统设计时,常会陷入一种割裂的状态。

一边是在 Excalidraw 画布上激情挥洒,画流程图、画架构草图,梳理逻辑。另一边是打开 VS Code 噼里啪啦写验证代码。

在这两个窗口之间反复横跳,不仅麻烦,而且很容易导致思路中断。往往图画好了,代码写着写着又变了,最后设计图和实际代码完全是两码事。

直到最近,我在 GitHub 发现了一个脑洞大开的项目 pad.ws

它并没有试图去造一个新的 IDE,而是做了一件让我们意想不到的事:直接把 IDE 搬进了 Excalidraw 的白板里

这就意味着,我们在同一个无限画布上,既可以像往常一样手绘草图,又能在旁边直接开一个代码窗口跑程序。

初看界面,我们会觉得它就是一个标准的 Excalidraw 画板。

前端画图工具(把 VS Code 塞进白板,这款画图神器要火了!)

但神奇的地方在于,它在画板里通过容器技术嵌入了一个完整的开发环境。

这不是简单的“代码高亮文本框”,而是一个实打实的、能跑命令行的 Ubuntu 环境。

我们在画板上画好了一个 API 的交互流程,反手就能在旁边拉起一个 VS Code 窗口,直接把接口写出来进行验证。

甚至如果我们需要,还能在画布上打开终端(Terminal),执行各种 Linux 命令。

这种“视觉化思考”与“工程化落地”无缝衔接的体验,确实能很好地解决设计与编码脱节的问题。

从技术实现上看,这个项目是两个开源巨人的结合体。

前端是大名鼎鼎的绘图工具 Excalidraw,后端则是由 Coder 提供支持的云端开发环境。

这意味着我们可以通过浏览器,在任何设备上随时接入这个环境。画板上的代码并不是跑在本地浏览器里的玩具,而是跑在云端容器里的真家伙。

除了内置的网页版编辑器,如果我们习惯了本地工具,它甚至支持通过 SSH 连接,让我们用本地的 VS Code 或 Cursor 来编辑远程画板里的代码。

不过,这里必须要给大家泼一盆冷水,特别是对于想在本地私有化部署的朋友。

虽然项目是开源的,但 pad.ws 目前的部署门槛非常高。

它不像普通的开源小工具那样,一行 Docker 命令就能跑起来。

仔细翻看它的 docker-compose 文件和文档,我们会发现它是一个庞大的微服务架构:需要配置 PostgreSQL 存数据,Redis 做缓存,Keycloak 做身份认证,还要配置 Coder 服务端。

光是搞定 Keycloak 的 OIDC 认证配置,就足以劝退一大波只想“简单试玩”的开发者。

而且开发者也明确标注了,目前项目处于 Early Development(早期开发)阶段,提供的配置仅供测试,并不适合直接用于生产环境。

因此,对于绝大多数想尝鲜的朋友,我们建议直接访问官网使用它的在线 Beta 版本,可以免费获得一个 Ubuntu 开发环境,省去折腾环境的痛苦。

如果你是运维大佬,或者确实有极客精神想要挑战一下私有化部署,可以把代码拉下来研究一下。

但切记,需要先在系统里准备好 Docker 环境,并耐心地按照文档一步步配置 .env 环境变量。

# 仅供参考,请务必阅读官方文档的复杂配置流程git clone https://github.com/coderamp-labs/pad.ws.gitcd pad.wscp .env.template .env# 之后需要漫长的配置过程...

总的来说,pad.ws 探索了一种非常新颖的交互形态。

它特别适合用来做技术教学、快速原型验证,或者在进行复杂系统设计时,即时验证关键逻辑。

虽然目前部署起来还有点“劝退”,但这种将“思考”与“创造”合二为一的理念,确实值得我们关注。

GitHub 项目地址:https://github.com/coderamp-labs/pad.ws

今天的分享到此结束,感谢大家抽空阅读,我们下期再见,Respect!

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有

相关阅读

最新文章

热门文章

本栏目文章