Does this skill support collaborative editing?

It supports collaboration between you and Claude. You can manually draw elements in the UI and then click 'Collaborate' to let Claude review and add to your work.

Can Claude edit diagrams I have already started?

Yes. By using the get_canvas_state and save_canvas tools, Claude can read the current state of your drawing and programmatically add or modify elements.

Can I export my diagrams to use in documentation?

Yes, the skill includes a capture_screenshot tool that allows you to save the current state of the canvas as an image for use in READMEs or external docs.

How do I start a new drawing with this skill?

You can start a drawing by asking Claude to 'open canvas' or 'create a diagram'. Claude will use the open_canvas tool to launch the Excalidraw interface.

Where are my canvas drawings stored?

All drawings and their associated metadata are saved locally on your machine in the ~/.local/share/collaborative-canvas/drawings/ directory.

Collaborative Canvas

Name: Collaborative Canvas
Author: anthosx

byanthosx

•

コラボレーションツール

Enables interactive, AI-powered diagramming and visual collaboration using Excalidraw directly within the Claude Code environment.

Collaborative Canvas integrates the flexible Excalidraw engine into Claude Code, allowing users and AI to co-create technical diagrams, flowcharts, and system architectures in real-time. It bridges the gap between text-based coding and visual design by enabling Claude to programmatically generate canvas elements while supporting manual user refinements. This skill is essential for documenting complex systems, brainstorming ideas, and creating visual assets without ever leaving your terminal workflow.

主な機能

01Interactive 'listen' mode for seamless AI-user feedback loops during design

02Screenshot capture and export capabilities for technical documentation

03Persistent local storage and management of multiple drawing projects

04Real-time visual collaboration using the integrated Excalidraw engine

05Programmatic diagram generation and automated element placement

061 GitHub stars

ユースケース

01Sketching UI/UX wireframes and component hierarchies during development

02Creating flowcharts for business logic, algorithms, or user journeys

03Visualizing complex microservices and system architecture diagrams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthosx/collaborative-canvas canvas

For use in Claude.ai and ChatGPT

Download Skill