excalidraw · agents365-ai — скилл для Claude Code: диаграммы в .excalidraw
Скилл рисует диаграммы, блок-схемы и схемы архитектуры в файлах .excalidraw и выгружает их в PNG или SVG. Пригодится, когда систему проще показать, чем описать словами.
npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-code
npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a claude-codeЧто делает excalidraw
Скилл срабатывает, когда вы просите нарисовать схему, или сам предлагает картинку, если в объяснении больше трёх связанных компонентов, есть многошаговый процесс или сравнение архитектур. На выходе — JSON-файл .excalidraw, который открывается в редакторе Excalidraw. PDF скилл не делает.
Выгрузка идёт двумя путями. Через Kroki нужен только curl, и на выходе получается SVG. Для PNG придётся поставить локальный CLI: npm install -g excalidraw-brute-export-cli и npx playwright install firefox. Локальный экспорт работает на Firefox, не на Chromium, а на macOS перед первым запуском нужен разовый патч main.js — без него сочетания клавиш в CLI не сработают.
Внутри скилла есть набор правил оформления: палитра из восьми семантических цветов, размеры шрифта от 14 до 28 px и разная штриховка стрелок для основного потока, ответа и слабой зависимости. Контейнеры советует использовать скупо — подписи лучше оставлять свободным текстом, а рамки беречь для настоящих компонентов. Готовые иконки AWS, Azure или UML берутся из библиотек сообщества: они собраны из тех же примитивов, поэтому проходят через оба способа выгрузки.
Какие задачи решает
- нарисовать блок-схему процесса по текстовому описанию
- показать архитектуру сервиса из нескольких компонентов
- сравнить два подхода к решению на одной картинке
- выгрузить схему в SVG для вставки в документацию
- получить PNG-диаграмму без ручной отрисовки в редакторе
Примеры запросов агенту
- Нарисуй схему архитектуры этого сервиса в excalidraw
- Сделай блок-схему обработки заказа и выгрузи в SVG
- Покажи диаграммой, как связаны эти три компонента
Как установить excalidraw
1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-codenpx skills add Agents365-ai/365-skills --skill excalidraw-skill -a claude-code2Вручную: положить файлы
~/.claude/skills/excalidraw-skill/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/excalidraw-skill/
1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a codex2Вручную: положить файлы
.agents/skills/excalidraw-skill/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a cursor2Вручную: положить файлы
.cursor/skills/excalidraw-skill/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Agents365-ai/365-skills excalidraw-skill2Вручную: положить файлы
.github/skills/excalidraw-skill/SKILL.md1Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a gemini-cli2Командой платформы
gemini skills install https://github.com/Agents365-ai/365-skills --path plugins/excalidraw/skills/excalidraw-skillВручную: положить файлы
.devin/skills/excalidraw-skill/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о excalidraw
Как установить excalidraw в Claude?
Выполните npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-code. Файл скилла окажется в ~/.claude/skills/excalidraw-skill/SKILL.md.
Что делает скилл excalidraw?
Создаёт файлы .excalidraw с диаграммами и схемами, а затем выгружает их в PNG или SVG. PNG доступен только через локальный CLI, SVG — и через Kroki.
Что нужно для работы скилла?
Для SVG хватает curl. Для PNG нужны excalidraw-brute-export-cli и Firefox через npx playwright install firefox; на macOS дополнительно правится main.js.
Похожие скиллы
Всё по теме «Тексты и документация» →Сначала — excalidraw от других авторов.
