Agent Canvas
CLI-driven Excalidraw-canvas för att rita flödesscheman, arkitekturdiagram och mockups.
Testad · Fungerar
Vad den gör
Omsluter @agent-canvas/cli npm-paketet för att lägga till former, text, pilar och bilder till en live Excalidraw-canvas över WebSocket/HTTP, med handledningar för flödesscheman, arkitektur, sekvensdiagram, tankekartor och UI-mockups. Utlöses när användaren ber att rita, visualisera, diagrammera eller skissa något; kräver installation av den separata agent-canvas CLI (bun/npm) och körning av en lokal canvas-server.
Testrapport
Körde den riktiga CLI: att hoppa över SKILL.md:s formel för etikettstorlek fick Excalidraw att tyst omsluta en 14-teckens etikett på två rader och omflöda rutan; att använda formeln producerade den exakt begärda w=190 h=72-rutan med en ren enradig etikett och kantperfekta pilar, bekräftat av exporterade PNG:er.
Testad: 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
Kommandon och exempelprompter
/agent-canvasCLI-driven Excalidraw-canvas för att rita flödesscheman, arkitekturdiagram och mockups.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
Draw a flowchart with Start and Process Order boxes and an arrowSketch the architecture diagram for our microservices on a canvasCreate a sequence diagram showing the login request flow