免费开源的极简在线白板工具 - Drawnix
免费开源的极简在线白板工具 - Drawnix
Drawnix 是一个开源极简的在线白板工具。提供了一个无限画布，可自由绘制、流程图、思维导图、画笔、插入图片等功能。
界面专注简洁，打开就能画，最近画流程图、思维导图、简单架构图，基本都在 Drawnix 中画。但是一直别扭的是保存，现在画完后导出PNG、SVG 或 .drawnix 文件到电脑上，画过的图管理都是本地的。
图少还好，多了就变成下面这样了：
这个图的源文件在哪保存着呢？
上次是在公司电脑画的还是家里电脑？
这个图怎么只有个PNG，可编辑文件去哪了？
所以看了一下源仓库，MIT许可证开源，是有同步功能的开发计划，但是还没有落地。索性自己Fork了一份，在上面加上了文件夹分类管理、多图表管理和加密云同步。可以部署在 Vercel + Supabase 上，且免费计划对于个人也都够用，不需要服务器，完全0成本。
仓库地址：https://github.com/onlytl/drawnix
在线使用：https://drawnix-lac.vercel.app/
加了哪些功能
相对原仓库，这版主要多了如下功能：
- 📁 多图表工作区：不再只有一个浏览器本地画板，可以创建和管理多张图。
- 🗂️ Workspace文件树：支持文件夹和子文件夹，用树形目录组织图表，适合长期积累架构图、流程图和思维导图。
- 🗑️ 回收站与撤销删除：删除先进入回收站，底部可立即撤销；也可稍后恢复或彻底删除。
- ☁️ Supabase 云同步：登录后将文件夹和图表自动同步到 Supabase PostgreSQL。
- 🔒 端到端加密：图表名称和内容在浏览器里用 AES-256-GCM 加密后再上传，服务器只保存密文。
- 🔑 同步密码与恢复密钥：主密钥由同步密码包裹；首次开启加密时会显示一次恢复密钥，请自行保存。
- 🔐 GitHub OAuth 登录：GitHub 只用于身份认证，实际图表数据存储在 Supabase。
- 🔄 多设备同步：同一 GitHub 账号在不同设备登录后，解锁加密即可读取同一个工作区。
- 📴 离线编辑：网络不可用时继续编辑，恢复网络后自动同步。
- 🛡️ RLS 数据隔离：Supabase Row Level Security 确保每个用户只能访问自己的数据。
- 🧩 版本 / 冲突保护：通过 revision 进行乐观并发控制，仅在确实存在较新的远端修改时提示冲突。
- ⬆️ Vercel 部署配置：仓库已包含 vercel.json，可以直接部署 Vite/Nx Web App。
如何自己部署
如果不想部署，可以使用我部署过的去在线使用，https://drawnix-lac.vercel.app/，Github登录后支持云同步，数据端到端加密存储，可放心使用。如果想部署自己的，可按照如下步骤进行。
1. Fork 仓库
打开 https://github.com/onlytl/drawnix，点右上角 Fork，Fork 到自己的 GitHub 账号，比如：your-name/drawnix，增强代码目前都在 develop 分支，后面 Vercel 也建议直接跟踪 develop。
2. 创建 Supabase 项目
Supabase 免费计划够用，所以这里选用Supabase做数据存储，打开 https://supabase.com/dashboard/projects，新建一个项目，名字叫不叫 drawnix 都无所谓，Region 选离自己近一点的就行。
创建时会要求填 Database password，这是 Postgres 数据库密码，必须设一个并自己保存好。Drawnix 前端用不到它，后面也不要填进 Vercel。
项目创建好以后，先记住两样东西：
- Project URL
- Publishable Key
后面 Vercel部署 会用。
3. 执行数据库脚本
仓库里已经放好了 SQL：
https://github.com/onlytl/drawnix/blob/develop/supabase/schema.sql
进入 Supabase 项目后打开 SQL Editor，新建 Query，把这个文件里的 SQL 全部复制进去执行。
执行之后会创建三张表：
- folders
- documents
- user_crypto
同时把 revision、soft delete、索引和 RLS policy 一起建好。跑完可以去 Table Editor 看一眼，三张表都在就行。
4. 先部署到 Vercel
接下来先把前端跑起来，因为创建 GitHub OAuth App 时需要一个真实可访问的站点地址。
打开 https://vercel.com/new ，选择刚 Fork 的：your-name/drawnix导入。仓库已经有 vercel.json，正常情况下 Vercel 会直接读取。如果需要手动填，配置如下：
- Framework：Vite
- Root Directory：./
- Install Command：
npm ci - Build Command：
npm run build:web - Output Directory：
dist/apps/web
然后需要填写两个环境变量，之前supabase项目的 Project URL和Publishable Key。只填这两项，不要把 Database password 或 service_role 写进去。
VITE_SUPABASE_URL=${Project URL}
VITE_SUPABASE_PUBLISHABLE_KEY=${Publishable Key}
部署后就可以使用了，不过当前状态还是本地的。需要云同步继续下面的步骤。
5. 创建 GitHub OAuth App
打开 GitHub Developer Settings：
https://github.com/settings/developers
进入：
OAuth Apps
→ New OAuth App
假设你的 Vercel 地址是：https://your-drawnix.vercel.app
那么可以这样填：
- Application name: Drawnix
- Homepage URL:
https://your-drawnix.vercel.app - Authorization callback URL:
https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback
Authorization callback URL 是 Supabase 的 Project URL 加上 /auth/v1/callback。
创建好以后 GitHub 会给你：
- Client ID
- Client Secret
6. 在 Supabase 开启 GitHub 登录
回到 Supabase 项目。
进入：
Authentication
→ Sign In / Providers
→ GitHub
打开启用 GitHub Provider，把刚才 GitHub OAuth App 的：
- Client ID
- Client Secret
填进去并保存。
7. 配置 Supabase 的站点地址
还在 Supabase 的 Authentication 里，打开 URL Configuration。
Site URL 填你的正式站点：
https://your-drawnix.vercel.app
Redirect URLs 至少加：
https://your-drawnix.vercel.app/**
如果后面绑了自己的域名，例如：
https://draw.example.com
也记得加：
https://draw.example.com/**
想让 Vercel Preview 也支持 GitHub 登录，可以再补 Preview 的通配地址。
本地开发需要 OAuth 的话，再加：
http://localhost:7200/**
端口按你自己实际启动的地址改。这个项目默认是 7200。
8. 打开页面测试同步
到这里基本就结束了。
打开自己的 Drawnix：
https://your-drawnix.vercel.app
点击左下角的「使用 GitHub 登录」。
授权完成后，按提示设置同步密码，并把只显示一次的恢复密钥保存到密码管理器。之后左侧会显示加密云同步已开启。忘记密码且没有恢复密钥时，云端数据无法解密。