Agent Canvas

Canvas Excalidraw guidato da CLI per disegnare diagrammi di flusso, architetture e mockup.

di WHQ25 · WHQ25/agent-canvas

Promosso ★ 9.6/10

Agent Canvas — Canvas Excalidraw guidato da CLI per disegnare diagrammi di flusso, architetture e mockup.

Cosa fa

Incapsula il pacchetto npm @agent-canvas/cli per aggiungere forme, testo, frecce e immagini a un canvas Excalidraw live tramite WebSocket/HTTP, con tutorial per diagrammi di flusso, architetture, diagrammi di sequenza, mappe mentali e mockup UI. Si attiva quando l'utente chiede di disegnare, visualizzare, diagrammare o schizzare qualcosa; richiede l'installazione della CLI separata agent-canvas (bun/npm) e l'esecuzione di un server canvas locale.

Rapporto di test

Ho eseguito la CLI reale: saltare la formula di dimensionamento delle etichette nel SKILL.md ha fatto sì che Excalidraw andasse a capo silenziosamente un'etichetta di 14 caratteri su due righe e rifluisse il box; usare la formula ha prodotto il box esatto richiesto w=190 h=72 con un'etichetta pulita su una riga e frecce perfette sui bordi, confermato da PNG esportati.

Testato il: 2026-07-15 · Claude Code 2.x (agent harness)

Installazione

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

Comandi e prompt di esempio

  • /agent-canvasCanvas Excalidraw guidato da CLI per disegnare diagrammi di flusso, architetture e mockup.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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