Agent Canvas

Toile Excalidraw pilotée par CLI pour dessiner des organigrammes, des diagrammes d'architecture et des maquettes.

par WHQ25 · WHQ25/agent-canvas

Testé · Fonctionne ★ 9.6/10

Agent Canvas — Toile Excalidraw pilotée par CLI pour dessiner des organigrammes, des diagrammes d'architecture et des maquettes.

Ce que fait

Encapsule le package npm @agent-canvas/cli pour ajouter des formes, du texte, des flèches et des images à une toile Excalidraw en direct via WebSocket/HTTP, avec des tutoriels pour les organigrammes, l'architecture, les diagrammes de séquence, les cartes mentales et les maquettes d'interface utilisateur. Se déclenche lorsque l'utilisateur demande de dessiner, visualiser, diagrammer ou esquisser quelque chose ; nécessite l'installation de la CLI agent-canvas séparée (bun/npm) et l'exécution d'un serveur de toile local.

Rapport de test

A exécuté la vraie CLI : ignorer la formule de dimensionnement des étiquettes du SKILL.md a fait que Excalidraw a silencieusement renvoyé une étiquette de 14 caractères sur deux lignes et a réorganisé la boîte ; utiliser la formule a produit la boîte exacte demandée w=190 h=72 avec une étiquette nette sur une seule ligne et des flèches parfaites sur les bords, confirmée par les PNG exportés.

Testé le: 2026-07-15 · Claude Code 2.x (agent harness)

Installation

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

Commandes et exemples de prompts

  • /agent-canvasToile Excalidraw pilotée par CLI pour dessiner des organigrammes, des diagrammes d'architecture et des maquettes.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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