内容
涂鸦绘图
[](https://github.com/noddle-dev/noddle-draw/actions/workflows/deploy.yml)
[](LICENSE)
[](https://draw.noddle.dev)
**开源匿名绘图板** — 结构化图形和智能连接器，类似 Lucidchart，即时绘图和链接分享，类似 Excalidraw，并配备 AI 协作者，可以与您一起编辑绘图板（自带 API 密钥）。
> **▶ 立即试用：<https://draw.noddle.dev>** — 无需注册，一秒钟即可开始绘图。
该项目是 [**Noddle**](https://github.com/noddle-dev) 开源套件的一部分。
## 共同绘图 — 链接即为邀请
分享绘图板的 URL，其他人即可立即共同编辑：共享光标、存在感、通过 WebSocket 实现实时状态同步。无需任何账户 — 您的身份将在浏览器中自动生成（在“分享”对话框中重命名）。
## 真正的绘图，具有动态连接器
47 种图形（流程图、几何图形、块箭头、UML 精简版）、云模板（AWS · Azure · GCP · Databricks · 网络）、便利贴、独立文本、图像、容器、多页绘图板、28 个启动模板和您自己的保存的“我的图形” — 以及手绘草图模式和闲置图形动画（脉冲/发光/呼吸/抖动）。连接器为正交且自动路由（A\* 弯曲路由，带有可拖动的中点），并且可以 **动画**：虚线、点、光束或脉冲流动，以显示系统中的数据流动。
## AI 协作者 — 您的密钥，您的浏览器（BYOK）
与绘图板聊天： *"添加一个错误处理分支"*， *"按层分组"*，图像→图形转换（白板照片 → 可编辑图形），文本/Mermaid→图形。您的密钥存储在 **您的浏览器的 localStorage** 中，并作为头部信息随每个请求发送 — 服务器代理调用并且从不存储。
### 自带密钥
在 AI 密钥对话框中选择提供商，粘贴密钥即可。模型字段为可选 — 留空即可使用提供商的默认模型。
| 提供商 | 默认模型 | 视觉（图像→图形） |
|---|---|---|
| Anthropic (Claude) | `claude-opus-4-8` | ✅ |
| | `gpt-4o` | ✅ |
| Google Gemini | `gemini-2.5-flash` | ✅ |
| OpenRouter | 您选择 `provider/model` 标识 | 取决于模型 |
| 自定义（兼容 OpenAI） | 您设置基准 URL + 模型 | 取决于模型 |
### 约 2 分钟即可免费使用
对话框中的两个一键式预设为您设置提供商/模型/基准 — 您只需粘贴免费密钥（无需信用卡）：
- **Google Gemini** — `gemini-2.5-flash`，来自 [aistudio.google.com/apikey](https://aistudio.google.com/apikey) 的免费密钥。最佳综合：视觉 + 可靠的 JSON。
- **Groq** — `openai/gpt-oss-120b`，在 [Groq](https://console.groq.com/keys) 免费层通过自定义（兼容 OpenAI）提供商。极速；文本 + JSON（需要将照片转换为使用 Gemini）。
如果没有密钥？如果操作员配置了免费池（`OPENROUTER_POOL_KEY`），无密钥访客将自动使用它；否则，AI 在您添加密钥之前保持关闭。
## 功能
- ⚡ **零摩擦** — 打开网站，即可开始绘图。 `/` 重新打开您正在处理的绘图板；绘图板 URL 即为分享功能。
- 🎨 **真正绘图** — 47 种图形 + 云模板，旋转、分组（`⌘G`），对齐/分布，z 顺序，文本换行/格式化，类型到编辑，橡皮筋选择跨图形 * 和连接器，网格和对齐。
- 👥 **实时协作** — 共享光标，存在感，按页同步，匿名评论线程固定到图形，实时重命名和按绘图板 **版本历史**，可恢复。
- ✦ **AI 协作者（BYOK）** — 聊天编辑，ermaid→图形，白板照片→可编辑图形（后台任务），单击“用 AI 丰富”。并发编辑安全：会合并到您的最新绘图板，而不是替换它。
- **导出和导入** — SVG，PNG，动画 GIF，按页幻灯片 PNG，Mermaid 和可重新导入的板 JSON；导入 draw.io 文件和粘贴图像。
- 🖥 **显示方式** — 演示模式（页面变为片），聚焦模式（`\`，仅画布），可折叠面板（`[`]`），只读 `/embed/{id}` iframe 和 `?`键速查表。
- 🧩 **代理友好** — 一个小型 [MCP 服务器](mcp/)（获取/创建/更新绘图列出/添加评论）允许 AI 代理通过 REST API 编辑绘图板 — 绘图板 URL 即为功能，无需令牌。
## 使用一条命令进行自我托管
```bash compose up --build
# → http://localhost:8000 — 开始绘图，无需注册
```
一个容器（FastAPI + 预构建的 React SPA）加上 Postgres。无需 Docker```bash
# 后端
python3 -m venv . source .venv/bin/activate
pip install -r backend/requirements.txt
cd backend &&orn main:app --reload --port 8000
# 前端（开发服务器，热重载，代理 /api → :8000）
cd web && npm install && npm run dev # → http://localhost:5173
```
本地开发无需数据库 — 无 `DATABASE_URL`，都保留在 `backend/storage/` 文件中。每个服务器可选的，应用程序可以正常降级；请参阅env.example`](.env.example) 以获取完整列表。
架构（简版）
单个可部署项，层次清晰- `backend/` — FastAPI，六边形：`api → services → domain`，带有 `infrastructure/` 适配器（Postgres 通过 psycopg，或普通文件 — 在启动时选择）。用于实时协作的 WebSocket 房间。对存储/生成的每个 SVG 进行白。
- `web/` — React + TypeScript（Vite）。编辑器引擎（`editor-core/`）是纯 TypeScript，无 React/DOM 依赖；状态为 Zustand；功能为垂直切片。
- `mcp 仅限标准库的 MCP 服务器，供 AI 代理使用。
运行测试：`python -m pytest backend/tests -q` 和 `cd web && npm run typecheck`。
## 安全
绘图板受无法猜测的 URL 保护（能力链接） — 与 Excalidraw 共享链接相同的模型：任何拥有绘图板链接的人都可以查看和共同编辑它，因此请将链接视为秘密。上传和 AI 生成的 SVG 在服务器端进行清理， AI 密钥于您的浏览器中 — 服务器从不存储它们。
发现漏洞私下报告 — **安全性.md获取报告渠道、威胁模型。安全问题公开问题。
oddle 的一部分
nodd 由 [n-dev](https://github.com/noddle-dev) 组织构建和维护。欢迎贡献 — 参见 [CONTRIBUTING.md](CONTRIBUTING.md)（简版：仅限英文，测试通过，尊重分层）。
## 许可证
[MIT](LICENSE)
