Agent Canvas

Lienzo Excalidraw controlado por CLI para dibujar diagramas de flujo, diagramas de arquitectura y maquetas.

Por WHQ25 · WHQ25/agent-canvas

Probado · Funciona ★ 9.6/10

Agent Canvas — Lienzo Excalidraw controlado por CLI para dibujar diagramas de flujo, diagramas de arquitectura y maquetas.

Qué hace

Envuelve el paquete npm @agent-canvas/cli para agregar formas, texto, flechas e imágenes a un lienzo Excalidraw en vivo a través de WebSocket/HTTP, con tutoriales para diagramas de flujo, arquitectura, diagramas de secuencia, mapas mentales y maquetas de UI. Se activa cuando el usuario pide dibujar, visualizar, diagramar o esbozar algo; requiere instalar la CLI separada agent-canvas (bun/npm) y ejecutar un servidor de lienzo local.

Informe de la prueba

Ejecuté la CLI real: omitir la fórmula de dimensionamiento de etiquetas del SKILL.md hizo que Excalidraw ajustara silenciosamente una etiqueta de 14 caracteres en dos líneas y reajustara el cuadro; usar la fórmula produjo el cuadro exacto solicitado w=190 h=72 con una etiqueta limpia de una sola línea y flechas perfectas en los bordes, confirmado por los PNG exportados.

Probado el: 2026-07-15 · Claude Code 2.x (agent harness)

Instalación

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

Comandos y prompts de ejemplo

  • /agent-canvasLienzo Excalidraw controlado por CLI para dibujar diagramas de flujo, diagramas de arquitectura y maquetas.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • 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