SkillFoxx
Telegram

hand-drawn-diagrams — скилл

Скилл рисует диаграмму в стиле Excalidraw по текстовому запросу и отдает ссылку на редактор, анимацию и PNG.

  • 85 ★ репозитория
  • Последний коммит
Скилл

Расширенный доступ

Почему такой уровень

  • Содержимое диаграммы открывается в размещенном редакторе, то есть уходит во внешний сервис.
  • Скрипты рендера запускаются локально и пишут файлы в `/tmp` или в проект.
Все причины и проверки

muthuishere/hand-drawn-diagramsАвтор:muthuishere

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/hand-drawn-diagrams

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

  • Содержимое диаграммы открывается в размещенном редакторе, то есть уходит во внешний сервис.
  • Скрипты рендера запускаются локально и пишут файлы в `/tmp` или в проект.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл превращает идеи, заметки, системы и процессы в диаграмму, нарисованную от руки. Агент сам выбирает тип схемы: учебная, UX, архитектурная, воронка. Затем рисует ее в стиле Excalidraw, проверяет расположение так, чтобы элементы не пересекались, и открывает ссылку на размещенный редактор. По просьбе результат сохраняется как файл `.excalidraw`, анимированный `.animated.svg`, где схема прорисовывается штрих за штрихом, или картинка `.png`. По умолчанию исходники лежат в `/tmp/hand-drawn-diagrams/`, поэтому рабочая папка остается чистой. Скилл работает с Claude Code, Codex CLI и совместимыми агентами.

Для кого. Студентам, преподавателям, архитекторам и продуктовым командам, которым нужна наглядная схема без ручного рисования в редакторе.

Подходит, если

  • К экзамену нужна карта повторения темы в виде схемы с ветвями.
  • Архитектуру сервиса и потоки API надо показать на одной понятной схеме.
  • Воронку или пользовательский путь нужно быстро набросать для обсуждения.
  • Схема должна ожить в презентации: нужна анимация, где линии рисуются по очереди.

Не подходит, если

  • Диаграмма содержит закрытые данные: размещенный редактор открывает ее по ссылке в браузере.
  • Нужна строгая нотация UML или BPMN с точными правилами: стиль рисунка свободный.
  • Требуется ручная доводка пиксель в пиксель: проще работать прямо в Excalidraw.

Пример запроса к агенту

Нарисуй схему повторения по тепловой физике для экзамена, открой анимацию и сохрани PNG в проект.

Ограничения

Диаграмма открывается в размещенном редакторе по ссылке, поэтому содержимое схемы попадает во внешний сервис. Скилл опирается на Excalidraw и библиотеку excalidraw-animate для анимации. Для экспорта PNG используются скрипты из папки `scripts` с Python. Поддерживаются Claude Code, Codex CLI, OpenCode, Windsurf, GitHub Copilot, Cursor, Gemini CLI и еще около сорока агентов, установщик находит установленные сам. В метаданных репозитория лицензия не определена, в README указана MIT.

Как отключить. Удалите скилл по инструкции из `INSTALL.md`: там описаны глобальная и проектная области и удаление. Файлы в `/tmp/hand-drawn-diagrams/` можно стереть вручную.

Частые вопросы

Как установить hand-drawn-diagrams?

Выполните `npx skills add muthuishere/hand-drawn-diagrams`. Команда сама находит установленных агентов, среди них Claude Code, Codex, Cursor и Gemini CLI.

Какие результаты можно получить?

Ссылку на редактор по умолчанию, анимацию по запросу «открой анимацию», файл `.excalidraw`, `.animated.svg` и `.png`.

Чем скилл отличается от самого Excalidraw?

Excalidraw начинается с пустого холста, а скилл с текстового запроса: агент выбирает тип схемы и расставляет элементы без пересечений. Итог остается обычным файлом Excalidraw.

Где лежат файлы по умолчанию?

В `/tmp/hand-drawn-diagrams/`. Чтобы сохранить схему в проект, попросите «save as excalidraw», «save the animation» или «save image».

Можно ли открыть схему без браузера?

Команда «show image» рендерит PNG и открывает его системным просмотрщиком. Для редактирования нужен браузер со ссылкой на размещенный редактор.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Скилл рисует по короткой JSON-спецификации анимированные диаграммы 45 типов и сохраняет их в HTML, SVG, PNG, GIF и MP4

СкиллРасширенный доступ936
Выбор редакции

Скилл рисует редакторские диаграммы как самостоятельные файлы HTML и SVG: архитектура, блок-схемы, ER, воронки и еще около сорока типов

СкиллРасширенный доступ66,6 тыс.

Командная строка excalidraw-cli превращает текстовое описание, JSON или Graphviz DOT в редактируемую схему Excalidraw и экспортирует PNG и SVG

CLIМинимальный доступ319

Скилл, который строит диаграммы Excalidraw по описанию и проверяет их вид через рендер в Playwright

СкиллРасширенный доступ5,2 тыс.

Скилл рисует диаграммы с китайской типографикой: 45 типов, один HTML без внешних шрифтов, экспорт SVG и PNG, перерисовка Mermaid.

СкиллМинимальный доступ50

Скилл рисует архитектурную схему системы в виде одного HTML-файла с SVG, кнопками копирования и экспорта в PNG и PDF

СкиллМинимальный доступ7,6 тыс.

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

ИнструментОфициальныйЗвезды репозиторияГлавное отличие
hand-drawn-diagrams (эта карточка)нет85
Excalidraw Diagram Skillнет5 240тоже рисует диаграммы Excalidraw; hand-drawn-diagrams добавляет ссылку на размещенный редактор, анимацию и экспорт PNG
Diagram Designнет66 598другой скилл для схем; здесь стиль рисунка от руки и выбор типа схемы по запросу

Коротко о README

Авторы описывают скилл как надстройку над Excalidraw. Сопроводительные материалы: демо-анимация, пример PNG и анимированный SVG, `INSTALL.md` с областями установки.

Бейдж для README

Исходный SKILL.md

---
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.

Сообщить о проблеме