Agent Canvas

CLI-gesteuerte Excalidraw-Leinwand zum Zeichnen von Flussdiagrammen, Architekturdiagrammen und Mockups.

Getestet · Funktioniert ★ 9.6/10

Was es kann

Umschließt das @agent-canvas/cli npm-Paket, um Formen, Text, Pfeile und Bilder zu einer Live-Excalidraw-Leinwand über WebSocket/HTTP hinzuzufügen, mit Tutorials für Flussdiagramme, Architektur, Sequenzdiagramme, Mindmaps und UI-Mockups. Löst aus, wenn der Benutzer bittet, etwas zu zeichnen, zu visualisieren, zu diagrammieren oder zu skizzieren; erfordert die Installation der separaten agent-canvas CLI (bun/npm) und die Ausführung eines lokalen Canvas-Servers.

Testbericht

Die echte CLI ausgeführt: Das Überspringen der Label-Größenformel in der SKILL.md führte dazu, dass Excalidraw ein 14-Zeichen-Label stillschweigend in zwei Zeilen umbrach und die Box neu anordnete; die Verwendung der Formel erzeugte die exakt angeforderte Box w=190 h=72 mit einem sauberen einzeiligen Label und randgenauen Pfeilen, bestätigt durch exportierte PNGs.

Getestet am: 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

Befehle & Beispiel-Prompts

/agent-canvasCLI-gesteuerte Excalidraw-Leinwand zum Zeichnen von Flussdiagrammen, Architekturdiagrammen und Mockups.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →