Help us improve
Share bugs, ideas, or general feedback.
AI-powered visual collaboration with Excalidraw for Claude Code
npx claudepluginhub anthosx/collaborative-canvasAI-powered visual collaboration with Excalidraw. Create diagrams, flowcharts, and architecture sketches with Claude.
Share bugs, ideas, or general feedback.
Chat. Draw. Diagram. Claude.
Freely collaborate with Claude Code on an infinite canvas.
Powered by Excalidraw.
This tool was made for people who communicate visually. Flowcharts, graphs, and drawings can be more powerful that text alone. Want to sketch an idea for Claude instead of writing a prompt? Want Claude to draw you a rocket ship just for fun?
Collaborative Canvas empowers you to share messages and drawings with Claude via an open Excalidraw canvas. Claude will listen for your work whenever you press collaborate, and then write/draw you messages directly back on the canvas.
Simply ask Claude to start a new drawing and you'll get a blank Canvas. Alternatively, ask Claude to draw something for you or adapt a plan into a visual schema.
claude plugin install anthosx/collaborative-canvas --scope user
Restart Claude Code, then just start drawing — the Electron app downloads automatically on first use.
Clone the repo:
git clone https://github.com/anthosx/collaborative-canvas.git
cd collaborative-canvas
Run setup to download the Electron app:
./scripts/setup.sh
Install the plugin:
claude plugin install /path/to/collaborative-canvas --scope user
Restart Claude Code.
"Let's start a new drawing"
This opens a new canvas. The Excalidraw window will open automatically.
/canvas <name> - Create a new canvas with the given name/canvas --list - List all saved canvases/canvas --open <id> - Open an existing canvas by IDThe plugin provides these MCP tools:
| Tool | Description |
|---|---|
open_canvas | Create or open a drawing |
listen | Wait for user collaboration |
save_canvas | Save elements to canvas |
get_canvas_state | View current drawing state |
add_to_canvas | Add elements programmatically |
close_widget | Close the Excalidraw window |
list_canvases | List all saved drawings |
delete_canvases | Delete drawings |
capture_screenshot | Capture canvas as image |
Drawings are stored in XDG-compliant location:
~/.local/share/collaborative-canvas/
├── drawings/
│ ├── {uuid}.excalidraw # Drawing files
│ └── {uuid}.meta.json # Metadata
├── hooks-queue.json # Collaboration queue
└── screenshots/ # Captured screenshots
collaborative-canvas/
├── .claude-plugin/ # Plugin manifest
├── .mcp.json # MCP server config
├── hooks/ # PostToolUse hooks
│ ├── hooks.json # Hook configuration
│ └── scripts/ # Hook scripts
├── skills/ # Auto-activating skills
├── commands/ # Slash commands
├── mcp-server/ # MCP server (Node.js)
└── electron-app/ # Electron app
# Rebuild MCP server bundle (after changing server code)
cd mcp-server && npm install && npm run bundle
# Rebuild Electron app (after changing app code)
cd electron-app && npm install && npm run build
# Package Electron for release
cd electron-app && npm run package:dir
Set EXCALIDRAW_DEV=1 before starting Claude Code to enable hot reload:
export EXCALIDRAW_DEV=1
claude
Then in a separate terminal, start the Vite dev server:
cd electron-app && npm run dev:renderer
This project is dual-licensed:
This project uses Excalidraw (MIT License). See THIRD_PARTY_NOTICES.md for full attribution.