excalidraw-diagram — скилл для Claude Code: что делает и установка
Генерирует файлы .excalidraw в формате JSON для схем архитектуры и процессов. Пригодится, когда нужно наглядно разобрать структуру системы или алгоритм без ручного рисования.
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -a claude-codeЧто делает excalidraw-diagram
Скилл создаёт схемы сразу в формате .excalidraw JSON. Вместо простых рамок с подписями инструмент строит визуальные аргументы: показывает связи компонентов, реальные названия событий, фрагменты кода и полезную нагрузку запросов. Структура выстраивается на нескольких уровнях детализации, от общей схемы пайплайна до конкретных структур данных внутри блоков.
Цвета и правила оформления берутся из файла references/color-palette.md. Для работы со специфическим фирменным стилем этот файл придётся скорректировать вручную перед генерацией. Если понадобятся рендереры или сторонние утилиты, инструкции по настройке окружения лежат в README.md.
Какие задачи решает
- спроектировать архитектуру сервиса в формате .excalidraw
- визуализировать протокол передачи данных с реальными событиями
- составить схему пайплайна с примерами входных и выходных данных
- показать шаги интеграции внешнего API с фрагментами кода
Примеры запросов агенту
- Нарисуй схему архитектуры нашего бэкенда в Excalidraw с примерами ответов API
- Создай файл .excalidraw с описанием пайплайна обработки данных от очереди до базы
- Визуализируй процесс авторизации пользователя с таймлайном и именами событий
Как установить excalidraw-diagram
1Через Skills CLI (Vercel)
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -a claude-code2Вручную: положить файлы
~/.claude/skills/excalidraw-diagram/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/excalidraw-diagram/
1Через Skills CLI (Vercel)
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -a codex2Вручную: положить файлы
.agents/skills/excalidraw-diagram/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -a cursor2Вручную: положить файлы
.cursor/skills/excalidraw-diagram/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install coleam00/excalidraw-diagram-skill excalidraw-diagram2Вручную: положить файлы
.github/skills/excalidraw-diagram/SKILL.md1Через Skills CLI (Vercel)
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -a gemini-cli2Командой платформы
gemini skills install https://github.com/coleam00/excalidraw-diagram-skillВручную: положить файлы
.devin/skills/excalidraw-diagram/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о excalidraw-diagram
Как установить excalidraw-diagram в Claude Code?
Выполните в терминале команду npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -a claude-code.
Что делает excalidraw-diagram?
Он создаёт файлы .excalidraw JSON с подробными схемами архитектуры, пайплайнов и протоколов. В диаграммы добавляются реальные примеры данных, фрагменты кода и границы компонентов.
Как настроить цвета и фирменный стиль для схем?
Палитра и стили хранятся в файле references/color-palette.md. Скилл читает его перед созданием каждой диаграммы, поэтому для смены стилей достаточно отредактировать этот файл.
