agent-canvas
Enables AI agents to draw diagrams, flowcharts, and visualize architecture diagrams on Excalidraw.
Install & Use
Copy this prompt and send it to your AI assistant (Claude / Cursor / TRAE / Codex / WorkBuddy etc.) to auto-install:
Help me install this AI Skill: agent-canvas. It is used for: Enables AI agents to draw diagrams, flowcharts, and visualize architecture diagrams on Excalidraw. Full Skill content: https://321skill.com/skills/agent-canvas/raw/index.md Read that page and install it.
The prompt includes a link to the full Skill content. You can also view the full content.
Agent Canvas is a drawing skill designed specifically for AI agents, addressing the pain point of AI's difficulty in directly participating in visual creation during collaborative development or design processes. Through a lightweight CLI tool, it allows the AI to understand your codebase context and execute drawing commands in real-time on an Excalidraw canvas, generating accurate architecture diagrams, flowcharts, or UI prototypes.
To use it, simply install this skill in an AI agent that supports skills (such as Claude Code or Cursor), then drive the AI to analyze code and start drawing via natural language instructions (e.g., "Draw an architecture diagram for this project"). The entire process achieves real-time synchronization via WebSocket, allowing you to see the drawing results instantly in your browser and engage in iterative dialogue with the AI to modify and refine the output.
This skill is ideal for developers, technical leads, and product designers who need to visualize complex logic, system architectures, or product designs. Whether untangling legacy code, planning a new system, or quickly creating presentation materials, it significantly enhances communication and design efficiency.
It is recommended to ensure your local environment can run Node.js and npm before use. Since drawing is based on Excalidraw, manual adjustments made on the canvas can also be recognized by the AI for continued collaboration, enabling true bidirectional human-machine editing. For first-time users, trying a simple flowchart is suggested to familiarize yourself with the AI's drawing logic and instruction style.
Key Features
Unlike standard web-based drawing tools, it allows AI agents to directly read your codebase context, thereby generating accurate diagrams that closely match the project structure. It also employs efficient CLI command communication instead of generating lengthy JSON, significantly optimizing token usage and enabling real-time iterative drawing.
Limitations
Not suitable for scenarios requiring highly artistic or non-structural drawings (such as realistic paintings), as its core is based on Excalidraw's vector graphics drawing.
FAQ
Which AI agents are supported?
It supports any AI agent that has integrated a skill system and can execute bash commands, such as Claude Code, Cursor, Codex, etc.
Do I need to manually install Excalidraw?
No, an integrated Excalidraw instance will automatically open in your local browser after launching the skill.
Installation guide for AI assistants
If your AI coding assistant (Claude Code, Cursor, TRAE etc.) can see this page, send it this message to auto-install:
Visit https://321skill.com/skills/agent-canvas/raw/index.md to read the original Skill definition (Markdown format) for agent-canvas, and install it according to the instructions.
Raw Markdown URL for AI: /skills/agent-canvas/raw/index.md