Agent Canvas

CLI-driven Excalidraw-canvas för att rita flödesscheman, arkitekturdiagram och mockups.

av WHQ25 · WHQ25/agent-canvas

Testad · Fungerar ★ 9.6/10

Agent Canvas — CLI-driven Excalidraw-canvas för att rita flödesscheman, arkitekturdiagram och mockups.

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 arrow
  • Sketch the architecture diagram for our microservices on a canvas
  • Create a sequence diagram showing the login request flow