diagrammer — скилл для Claude Code: что делает и как установить
Превращает текстовые описания в векторные SVG-схемы через JSON-разметку. Пригодится, когда нужен готовый файл диаграммы для документации или слайдов.
npx claude-code-templates@latest --skill creative-design/diagrammerЧто делает diagrammer
Скилл помогает агенту проектировать схематичные векторные иллюстрации без ручного рисования в графических редакторах. Сначала Claude Code переводит словесную формулировку пользователя в JSON-спецификацию со списками узлов nodes и связей edges. Доступны типы database, stack, box и circle.
После подготовки структуры запускается локальная утилита, которая рендерит итоговый SVG-файл. Без предварительной установки консольного пакета через pipx install diagrammer генерация графики сломается. Готовый векторный файл можно сразу коммитить в репозиторий.
Если в проекте требуется разметка Mermaid или интерактивный холст Excalidraw, этот инструмент их не заменит. Скилл рассчитан строго на компилируемый SVG со стилем синьки.
Какие задачи решает
- сгенерировать архитектурную схему сервисов в SVG
- нарисовать граф переходов конечного автомата для документации
- визуализировать поток запросов между клиентом и базой данных
- построить диаграмму слоёв нейросети для технической статьи
Примеры запросов агенту
- Нарисуй в SVG схему взаимодействия клиента, API-шлюза и базы данных
- Сделай диаграмму пайплайна обработки данных для README
- Покажи архитектуру нашего бэкенда в виде blueprint SVG
Как установить diagrammer
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/diagrammer2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill diagrammer -a claude-code3Вручную: положить файлы
~/.claude/skills/diagrammer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/diagrammer/
Вручную: положить файлы
.agents/skills/diagrammer/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/diagrammer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates diagrammer2Вручную: положить файлы
.github/skills/diagrammer/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/diagrammerВручную: положить файлы
.devin/skills/diagrammer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о diagrammer
Как установить diagrammer в Claude Code?
Выполните команду npx claude-code-templates@latest --skill creative-design/diagrammer. Также можно использовать вариант npx skills add davila7/claude-code-templates --skill diagrammer -a claude-code или добавить файл ~/.claude/skills/diagrammer/SKILL.md.
Что нужно подготовить для работы скилла?
В системе должен стоять рендерер, который ставится командой pipx install diagrammer. Без этой утилиты агент не скомпилирует SVG из JSON.
Какие типы узлов поддерживает diagrammer?
В схеме работают блоки box, circle, text, database, stack, group, note и custom. Для линий задаются направление и ортогональная либо прямая маршрутизация.
