whiteboard

@kamiazya/whiteboard

A collaborative Excalidraw canvas for Claude Code, Codex, and Gemini CLI. Draw with your AI agent to align on specs, architecture, and workflows — directly on a shared real-time whiteboard.

Start here

whiteboard is a browser-first whiteboard that grows with you: open a canvas in your browser, run it locally for durable private storage, and self-host it for a team when you're ready.

Try it in your browser — no account; your canvas data stays in your own browser. _{Browser-local: runs in your browser, data stays on your machine.} Get started → — runs locally from a checkout today.

▶ Draw with your AI agent

The fastest way to get value today. Claude Code, Codex, or Gemini draw on the canvas alongside you over MCP. _{Local daemon: a server on your own machine.}

→ Get started: Quick install

Self-host for your team — run whiteboard as a shared server behind your own identity provider and TLS. _{Server mode: a shared server you operate.} → Self-host with Docker

How whiteboard works

You and your agent both reach the same Excalidraw canvas — they talk, the agent acts, skills shape the prompts. The kamiazya/whiteboard plugin packages three skills and a Whiteboard MCP server together; the agent calls MCP tools via stdio and the daemon syncs the canvas to your browser over WebSocket.

_{Diagram drawn with whiteboard itself — see architecture.excalidraw to open it in Excalidraw and remix.}

@kamiazya/whiteboard-mcp runs a live Excalidraw canvas in your browser and exposes MCP tools so Claude Code, Codex, Gemini CLI, or any MCP-capable agent can draw, annotate, and refine diagrams alongside you. Canvases live locally under ~/.whiteboard/, sync over WebSocket, and round-trip with stock .excalidraw JSON.

Reach for whiteboard when…

• You're aligning with your agent on a design and text alone keeps drifting. Sketch the request flow once, ask the agent to fill in the missing edges, point at the diagram instead of re-explaining.
• You're reviewing a change and want to mark up the architecture together. Open an existing workspace, ask the agent to add the new path, compare against the previous frame, export a PNG for the PR description.
• You're writing docs or onboarding material and want a reusable diagram. Drive the agent to produce the diagram, save the .excalidraw, drop the PNG into the doc — open it again later in excalidraw.com when something needs updating.

Aligning on a design	Reviewing and marking up	Presenting or sharing
Agent drew it — you guided the layout	You annotated it — review notes on the canvas	Fullscreen mode — clean export for docs

The same workflow works across any scenario — the agent draws boxes, arrows, and labels on a fresh canvas:

_{Auth service flow drawn by the agent — numbered steps, cache callout, color-coded components.}

Quick install

Claude Code

In a Claude Code session, run:

/plugin marketplace add kamiazya/whiteboard
/plugin install whiteboard@whiteboard-marketplace

This installs the MCP server and the bundled /drawing-visuals, /coauthoring-visuals, and /auditing-workspaces skills in one step.

claude mcp add whiteboard -- npx -y @kamiazya/whiteboard-mcp@latest