Hand-Drawn Diagrams
Generiert validierte handgezeichnete Excalidraw-Diagramme, Wireframes und Mockups
Getestet · Funktioniert
Was es kann
Generiert Excalidraw-Diagramme im handgezeichneten Stil – Flussdiagramme, Erklärungen, Wireframes und Seiten-Mockups – als gültiges .excalidraw JSON, prüft dann die Ausgabe mit einem gebündelten Python-Validator, bevor eine gehostete Bearbeitungs-URL geliefert wird. Wird ausgelöst, wenn Sie darum bitten, einen Fluss, eine Architektur oder eine UI im handgezeichneten Look zu skizzieren, zu zeichnen oder zu diagrammieren. Standardmäßig wird ein monochromer Skizzenstil verwendet, mit optionalem PNG- und selbstzeichnendem animiertem SVG-Export über Chrome DevTools MCP oder Playwright.
Testbericht
Der gebündelte Validator ist echt und reines Python, daher habe ich ihn live für zwei Anmeldefluss-Diagramme ausgeführt. Mein Excalidraw JSON ohne Skill kam als INVALID zurück – ein hängender Pfeil, der an eine nicht existierende ID gebunden war, ein gestapeltes Layout und sechs Stilwarnungen, die den handgezeichneten Look verloren hatten – während die Schema-geführte Version mit 0 Fehlern bestand. Die json-schema-Referenz plus validate_excalidraw.py fangen strukturelle Fehler vor dem Rendern ab, ein messbarer Vorteil gegenüber Ad-hoc-Generierung. PNG- und animierter SVG-Export benötigen uv+Playwright oder chrome-devtools-mcp, aber das Kern-Ergebnis (eine gültige, handgezeichnete .excalidraw-Datei plus gehostete Bearbeitungs-URL) funktioniert ohne diese. Die Installationsschritte und Dokumentation sind gründlich und ehrlich bezüglich der Langsamkeit des Playwright-Fallbacks.
Getestet am: 2026-07-25 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/muthuishere/hand-drawn-diagrams mkdir -p ~/.claude/skills cd hand-drawn-diagrams && cp -r . ~/.claude/skills/hand-drawn-diagrams
Befehle & Beispiel-Prompts
/hand-drawn-diagramsGeneriert validierte handgezeichnete Excalidraw-Diagramme, Wireframes und Mockups
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Sketch a hand-drawn flowchart of our signup flow in ExcalidrawDraw a wireframe mockup for the onboarding screen, sketch styleMake a hand-drawn architecture diagram for this system