noddle draw

◇ noddle draw

Open-source anonymous diagram board — structured shapes and smart connectors like Lucidchart, instant no-login drawing and link-sharing like Excalidraw, plus an AI co-editor that edits the board with you (bring your own API key).

▶ Try it now: https://draw.noddle.dev — no sign-up, you're drawing in one second.

Part of the Noddle open-source suite.

See it in action

Live collaboration: guests share a link, see each other's cursors, and leave comment threads pinned to shapes.	Pen, laser and eraser: circle things with the pen, point with the laser (K), and sweep strokes away with the eraser.
Library (L): drag ready-made wireframe, diagram and cloud pieces onto the board.	Animated connectors: dots, dash, beam or pulse flows, picked from the style panel.
AI-Noddle chat (BYOK): describe a change, and the board is edited for you. Your own key stays in your browser.	Shortcuts, zen and present: press ? for every shortcut, ⌥Z for zen mode, and use Present to show pages as slides.

Draw together — the link is the invite

Share the board URL and people are co-editing instantly: shared cursors, presence, live state sync over WebSocket, and comment threads pinned to shapes. No accounts anywhere — your identity is auto-generated in your browser (rename it in the Share dialog).

Real diagramming, with living connectors

47 shape kinds (flowchart, geometric, block arrows, UML-lite), cloud stencils (AWS · Azure · GCP · Databricks · network), sticky notes, standalone text, images, containers, multi-page boards, 28 starter templates and your own saved "My shapes" — plus a hand-drawn sketch mode and idle shape animations (pulse/glow/breathe/wobble). Connectors are sharp, curved or elbow (A* auto-routing with draggable waypoints and a bend handle), snap onto shapes as you draw them, and can animate: dash, dots, beam or pulse flows to show data moving through your system.

AI co-editor — your key, your browser (BYOK)

Chat with the board: "add an error-handling branch", "group these by tier", image→diagram conversion (whiteboard photo → editable shapes), text/Mermaid→diagram. Your key stays in your browser's localStorage and rides each request as a header — the server proxies the call and never stores it. A Test button proves the key works before you save it.

Bring your own key

Pick a provider in the AI-key dialog, paste a key, and you're set. The model field is optional — leave it blank for the provider's default.

Provider	Default model	Vision (image→diagram)
Anthropic (Claude)	claude-opus-4-8	✅
OpenAI	gpt-4o	✅
Google Gemini	gemini-2.5-flash	✅
OpenRouter	you pick a provider/model slug	depends on model
Custom (OpenAI-compatible)	you set the base URL + model	depends on model

Free in ~2 minutes

Two one-click presets in the dialog set the provider/model/base for you — you just paste a free key (no credit card):

• Google Gemini — gemini-2.5-flash, free key from aistudio.google.com/apikey. Best all round: vision + reliable JSON.
• Groq — openai/gpt-oss-120b on the Groq free tier via the Custom (OpenAI-compatible) provider. Blazing fast; text + JSON (use Gemini when you need to turn a photo into a diagram).

No key at all? If the operator has configured a server-side free pool (OPENROUTER_POOL_KEY), key-less visitors ride it automatically; otherwise the AI simply stays off until you add a key.

Features

• ⚡ Zero friction — open the site, you're drawing. / reopens the board you were working on; the board URL is the sharing capability.
• ✏️ Excalidraw-style editor — one floating tool island (hand, select, rectangle, text, ellipse, arrow, diamond, pen, eraser, laser pointer, tool lock), a style panel on the left (colours, stroke, sloppiness, fonts, arrow types & heads, brush pressure/smoothing, layers, align, flip), a Library of ~100 ready-made pieces (L), and a ☰ File menu for everything else.
• 🎨 Real diagramming — 47 shapes + cloud stencils, rotation, grouping (⌘G), align/distribute, z-order, text wrap/formatting, type-to-edit, rubber-band select across shapes and connectors, grid & snap.
• 👥 Live collaboration — shared cursors, presence, per-page sync, anonymous comment threads pinned to shapes, live rename, and per-board version history with restore.
• ✦ AI co-editor (BYOK) — chat edits, text/Mermaid→diagram, whiteboard photo→editable shapes (background jobs), right-click "enrich with AI". Concurrent-edit safe: its changes merge onto your latest board instead of replacing it.
• 📤 Export & import — SVG, PNG (1×/2×/4×), animated GIF, per-page deck PNGs, Mermaid and a re-importable board JSON, framed as the page, fit to content or just the selection; imports board JSON, draw.io, Mermaid and SVG files and pasted images.
• 🖥 Ways to show it — Present mode (pages become slides), Zen mode (⌥Z, just the canvas), copy as PNG (⌘⇧C), read-only /embed/{id} iframes, and a ? keyboard-shortcuts sheet.
• 🧩 Agent-friendly — a stdlib MCP server (boards as noddle://board/{id} resources, tools for boards, versions, comments and AI generation, design/review prompts) lets AI agents edit boards through the REST API — the board URL is the capability, no tokens needed.

Self-host in one command

docker compose up --build
# → http://localhost:8000  — start drawing, no sign-up

One container (FastAPI + prebuilt React SPA) plus Postgres.

Prefer a prebuilt image (no clone, no build)? Once the release image is published to GHCR you can run it directly — single container, file storage, no Postgres:

docker run -p 8000:8000 -v noddle_draw:/app/backend/storage ghcr.io/noddle-dev/noddle-draw:latest

Without Docker:

# backend
python3 -m venv .venv && source .venv/bin/activate
pip install -r backend/requirements.txt
cd backend && uvicorn main:app --reload --port 8000

# frontend (dev server with hot reload, proxies /api → :8000)
cd web && npm install && npm run dev   # → http://localhost:5173

No database needed for local hacking — without DATABASE_URL everything persists to backend/storage/ files. Every server setting is optional and the app degrades gracefully; see .env.example for the full list.

Architecture (short version)

Single deployable, clean layering:

• backend/ — FastAPI, hexagonal: api → services → domain, with infrastructure/ adapters (Postgres via psycopg, or plain files — chosen at boot). WebSocket rooms for live collab. Whitelist SVG sanitizer on every stored/generated SVG.
• web/ — React + TypeScript (Vite). The editor engine (editor-core/) is pure TypeScript with no React/DOM dependencies; state is Zustand; features are vertical slices.
• mcp/ — stdlib-only MCP server for AI agents.

Run the tests: python -m pytest backend/tests -q and cd web && npm run typecheck.

Security

Boards are protected by unguessable URLs (capability links) — the same model as Excalidraw share links: anyone with a board's link can view and co-edit it, so treat the link as the secret it is. Uploaded and AI-generated SVG is sanitized server-side, and BYOK AI keys live only in your browser — the server never stores or logs them.

Found a vulnerability? Please report it privately — see SECURITY.md for the reporting channel, scope, and threat model. Don't open a public issue for security problems.

Part of the Noddle suite

noddle draw is built and maintained by the noddle-dev organization. Contributions welcome — see CONTRIBUTING.md (short version: English only, tests green, respect the layering).

License

MIT