hand-drawn-diagrams · muthuishere — скилл для Claude Code: схемы в Excalidraw
Рисует от руки диаграммы, блок-схемы, вайрфреймы и макеты страниц в формате Excalidraw. Пригодится, когда нужно объяснить архитектуру или поток на картинке.
npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -a claude-code
npx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a claude-codeЧто делает hand-drawn-diagrams
Скилл превращает запрос словами в файл .excalidraw. Сначала он выбирает тип рисунка по таблице маршрутизации: обучающая схема, брейншторм, UX-поток, воронка, технический разбор, макет страницы. Потом собирает элементы по общей грамматике фигур и записывает JSON с непустым массивом elements в /tmp/hand-drawn-diagrams/<slug>/.
Перед выдачей ссылки файл проходит проверку скриптом scripts/validate_excalidraw.py, затем scripts/open_diagram.py делает hosted-ссылку для редактирования и открывает её в браузере. Пустую диаграмму скилл не отдаёт — это повод проверить, что запрос вообще описывает схему, а не текст. Анимацию и PNG можно попросить отдельно.
Стиль по умолчанию — монохромный скетч с одним рукописным шрифтом. Цвет появляется только в макетах страниц, и то если вы прямо просите веб-подобие. Подписи короткие: 1–5 слов на фигуру, до 3 пунктов в контейнере. Файлы пишутся в /tmp/, а не в рабочую папку, если не попросить иначе. Для быстрого рендера PNG и анимированного SVG нужен chrome-devtools-mcp; без него скилл падает на Playwright.
Какие задачи решает
- нарисовать блок-схему процесса по текстовому описанию
- собрать вайрфрейм страницы для обсуждения с командой
- объяснить архитектуру сервиса одной картинкой
- сделать mind map по итогам брейншторма
- показать воронку или UX-поток в виде скетча
Примеры запросов агенту
- Нарисуй блок-схему оформления заказа в Excalidraw
- Сделай вайрфрейм страницы логина, монохромный скетч
- Собери mind map по вариантам кэширования из этого обсуждения
Как установить hand-drawn-diagrams
1Через Skills CLI (Vercel)
npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -a claude-codenpx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a claude-code2Вручную: положить файлы
~/.claude/skills/muthuishere-hand-drawn-diagrams/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/muthuishere-hand-drawn-diagrams/
1Через Skills CLI (Vercel)
npx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a codex2Вручную: положить файлы
.agents/skills/muthuishere-hand-drawn-diagrams/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a cursor2Вручную: положить файлы
.cursor/skills/muthuishere-hand-drawn-diagrams/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install muthuishere/hand-drawn-diagrams muthuishere-hand-drawn-diagrams2Вручную: положить файлы
.github/skills/muthuishere-hand-drawn-diagrams/SKILL.md1Через Skills CLI (Vercel)
npx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a gemini-cli2Командой платформы
gemini skills install https://github.com/muthuishere/hand-drawn-diagramsВручную: положить файлы
.devin/skills/muthuishere-hand-drawn-diagrams/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add muthuishere/hand-drawn-diagrams --skill muthuishere-hand-drawn-diagrams -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о hand-drawn-diagrams
Как установить hand-drawn-diagrams в Claude?
Выполните npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -a claude-code. Скилл окажется в ~/.claude/skills/muthuishere-hand-drawn-diagrams/SKILL.md.
Что делает hand-drawn-diagrams?
Строит диаграммы, блок-схемы, вайрфреймы и макеты страниц в формате Excalidraw, проверяет файл скриптом и отдаёт ссылку на редактирование в браузере.
Нужен ли Playwright для рендера?
Нет, если поставить chrome-devtools-mcp — он рендерит PNG и анимированный SVG через настоящий браузер. Без него скилл использует Playwright как запасной вариант.
Исходный текст
SKILL.md · MIT
--- name: hand-drawn-diagrams description: "Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants webpage-like fidelity. Use when the user asks for a diagram, flowchart, wireframe, sketch, visual explanation, mind map, architecture overview, or any Excalidraw-based drawing." --- Follow the instructions in `./workflow.md`. ## Workflow 1. **Route** — Read `./steps/step-01-route.md`. Pick one diagram type from the routing table (`references/activation-routing.xml`) based on user intent (teach, brainstorm, UX flow, funnel, technical explainer, medical, creative, or page mockup). 2. **Draw** — Read `./steps/step-02-draw.md`. Design the diagram using the shared shape grammar (`references/fundamental-shapes.md`), then write the `.excalidraw` JSON file with a non-empty elements array to `/tmp/hand-drawn-diagrams/<slug>/`. 3. **Validate & Deliver** — Read `./steps/step-03-validate.md`. Run `scripts/validate_excalidraw.py`, then `scripts/open_diagram.py` to generate a hosted edit URL and open it in the browser. Offer animation and PNG as follow-ups. ## Key Rules - Hand-drawn style, same sketch font, monochrome by default - Labels: 1–5 words per shape; max 3 short bullets per container - Write `.excalidraw` files to `/tmp/`, not the user's workspace (unless they ask) - Always validate before generating URLs — never share an empty diagram - Rendering priority: Chrome DevTools MCP (fast) → Playwright (fallback) ## References - `references/index.md` — full reference index - `references/activation-routing.xml` — route selection rules and delivery modes - `references/fundamental-shapes.md` — core shape language ## Optional: Chrome DevTools MCP For fast PNG and animated SVG rendering, install `chrome-devtools-mcp` (uses a real browser, no Playwright needed). See `INSTALL.md` for setup. Without it, rendering falls back to Playwright.
© muthuishere · MIT · muthuishere/hand-drawn-diagrams
Похожие скиллы
Всё по теме «Дизайн» →Сначала — hand-drawn-diagrams от других авторов.
