Hand-Drawn Diagrams

Generer validerte håndtegnede Excalidraw-diagrammer, wireframes og mockups

av muthuishere · muthuishere/hand-drawn-diagrams

Bestått ★ 9.6/10

Hand-Drawn Diagrams — Generer validerte håndtegnede Excalidraw-diagrammer, wireframes og mockups

Hva den gjør

Genererer Excalidraw-diagrammer i håndtegnet stil – flytskjemaer, forklaringer, wireframes og sideoppsett – som gyldig .excalidraw JSON, og sjekker deretter utdataene med en medfølgende Python-validator før den leverer en hostet redigerings-URL. Utløses når du ber om å skissere, tegne eller diagrammere en flyt, arkitektur eller UI i et håndtegnet utseende. Standardinnstillingen er monokrom skissestil, med valgfri PNG og selvtegnende animert SVG-eksport via Chrome DevTools MCP eller Playwright.

Testrapport

Den medfølgende validatoren er ekte og ren Python, så jeg kjørte den live på to registreringsflyt-diagrammer. Min Excalidraw JSON uten ferdighet kom tilbake som INVALID – en hengende pil som bandt til en ikke-eksisterende id, et stablet layout, og seks stiladvarsler som hadde fjernet det håndtegnede utseendet – mens den skjema-styrte versjonen bestod med 0 feil. json-schema-referansen pluss validate_excalidraw.py fanger opp strukturelle brudd før rendering, en målbar fordel over ad-hoc generering. PNG og animert SVG-eksport krever uv+Playwright eller chrome-devtools-mcp, men kjerneleveransen (en gyldig, håndtegnet .excalidraw-fil pluss hostet redigerings-URL) fungerer uten dem. Installasjonstrinn og dokumentasjon er grundige og ærlige om at Playwright-tilbakefallet er tregt.

Testet på: 2026-07-25 · Claude Code 2.x (agent harness)

Installer

git clone https://github.com/muthuishere/hand-drawn-diagrams
mkdir -p ~/.claude/skills
cd hand-drawn-diagrams && cp -r . ~/.claude/skills/hand-drawn-diagrams

Kommandoer og eksempelprompter

  • /hand-drawn-diagramsGenerer validerte håndtegnede Excalidraw-diagrammer, wireframes og mockups

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • 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