Collaborative Canvas for Claude Code
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.
Features
- Real-time collaboration - Claude can see your drawings and provide feedback
- Visual feedback - Claude adds elements, annotations, and suggestions directly to your canvas
- Native desktop app - Electron-based Excalidraw canvas with native menus and export
- Auto-save - Changes are automatically saved as you draw
- Multiple canvases - Create and manage multiple drawings
Installation
Prerequisites
Install from Marketplace
claude plugin install anthosx/collaborative-canvas --scope user
Restart Claude Code, then just start drawing — the Electron app downloads automatically on first use.
Install from Source
-
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.
Usage
Quick Start
"Let's start a new drawing"
This opens a new canvas. The Excalidraw window will open automatically.
Workflow
- Create a canvas: Tell Claude to open a canvas
- Draw your content: Use Excalidraw tools to create your diagram
- Click Collaborate: When you want Claude's feedback
- Review suggestions: Claude analyzes your drawing and adds elements
- Continue editing: Make changes and collaborate again
- Click Finish: When done, to close the canvas
Commands
/canvas <name> - Create a new canvas with the given name/canvas --list - List all saved canvases/canvas --open <id> - Open an existing canvas by ID
Tools
The 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 |
Storage
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
Architecture
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
Development
Building
# 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
Development Mode
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
License
This project is dual-licensed:
This project uses Excalidraw (MIT License).
See THIRD_PARTY_NOTICES.md for full attribution.
anthosx