Hand-Drawn Diagrams

Génère des diagrammes, wireframes et maquettes Excalidraw validés de style dessiné à la main

par muthuishere · muthuishere/hand-drawn-diagrams

Testé · Fonctionne ★ 9.6/10

Hand-Drawn Diagrams — Génère des diagrammes, wireframes et maquettes Excalidraw validés de style dessiné à la main

Ce que fait

Génère des diagrammes Excalidraw de style dessiné à la main - organigrammes, explications, wireframes et maquettes de page - sous forme de JSON .excalidraw valide, puis vérifie la sortie avec un validateur Python fourni avant de livrer une URL d'édition hébergée. Se déclenche lorsque vous demandez d'esquisser, de dessiner ou de schématiser un flux, une architecture ou une interface utilisateur avec un aspect dessiné à la main. Par défaut, utilise un style d'esquisse monochrome, avec exportation optionnelle en PNG et SVG animé auto-dessiné via Chrome DevTools MCP ou Playwright.

Rapport de test

Le validateur fourni est réel et purement Python, je l'ai donc exécuté en direct sur deux diagrammes de flux d'inscription. Mon JSON Excalidraw sans compétence est revenu INVALID - une flèche pendante liée à un ID inexistant, une disposition empilée et six avertissements de style qui avaient fait perdre l'aspect dessiné à la main - tandis que la version guidée par le schéma est passée avec 0 erreur. La référence json-schema plus validate_excalidraw.py détectent les ruptures structurelles avant le rendu, un avantage mesurable par rapport à la génération ad-hoc. L'exportation PNG et SVG animé nécessite uv+Playwright ou chrome-devtools-mcp, mais le livrable principal (un fichier .excalidraw valide, dessiné à la main, plus une URL d'édition hébergée) fonctionne sans eux. Les étapes d'installation et la documentation sont complètes et honnêtes concernant la lenteur du fallback Playwright.

Testé le: 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

Commandes et exemples de prompts

/hand-drawn-diagramsGénère des diagrammes, wireframes et maquettes Excalidraw validés de style dessiné à la main

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

Sketch a hand-drawn flowchart of our signup flow in Excalidraw
Draw a wireframe mockup for the onboarding screen, sketch style
Make a hand-drawn architecture diagram for this system

Rapport complet →