Agent Canvas

CLI-driven Excalidraw canvas for drawing flowcharts, architecture diagrams, and mockups.

Tested · Works

Test report

Verdict
Tested · Works
Score
9.6/10
Tested
Jul 15, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Aug 10, 2026 · 5f310d6

Ran the real CLI: skipping the SKILL.md's label-sizing formula made Excalidraw silently wrap a 14-char label onto two lines and reflow the box; using the formula produced the exact requested w=190 h=72 box with a clean single-line label and edge-perfect arrows, confirmed by exported PNGs.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 9/10
  • Docs & honesty 5/5

What Agent Canvas does

Wraps the @agent-canvas/cli npm package to add shapes, text, arrows, and images to a live Excalidraw canvas over WebSocket/HTTP, with tutorials for flowcharts, architecture, sequence diagrams, mindmaps, and UI mockups. Triggers when the user asks to draw, visualize, diagram, or sketch something; requires installing the separate agent-canvas CLI (bun/npm) and running a local canvas server.

How to install Agent Canvas

git clone https://github.com/WHQ25/agent-canvas
mkdir -p ~/.claude/skills
cp -r agent-canvas/skills/agent-canvas ~/.claude/skills/agent-canvas

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Agent Canvas

  • /agent-canvas CLI-driven Excalidraw canvas for drawing flowcharts, architecture diagrams, and mockups.

It also activates on plain-language prompts like these:

  • Draw a flowchart with Start and Process Order boxes and an arrow
  • Sketch the architecture diagram for our microservices on a canvas
  • Create a sequence diagram showing the login request flow

Frequently asked questions

Is the Agent Canvas skill free?
Yes. The skill itself is free from WHQ25/agent-canvas. SkillProof publishes the install command and an independent test verdict at no cost.
Does Agent Canvas work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 15, 2026. Verdict: Tested · Works. Ran the real CLI: skipping the SKILL.md's label-sizing formula made Excalidraw silently wrap a 14-char label onto two lines and reflow the box; using the formula produced the exact requested w=190 h=72 box with a clean single-line label and edge-perfect arrows, confirmed by exported PNGs.
What is the Agent Canvas SkillProof Score?
9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.
How do I install Agent Canvas?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Agent Canvas with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.