json-canvas — скилл для Claude Code: что делает и как установить
Генерирует и правит файлы .canvas по спецификации JSON Canvas 1.0 для Obsidian. Помогает строить блок-схемы, ментальные карты и доски заметок через агента.
npx claude-code-templates@latest --skill document-processing/json-canvasЧто делает json-canvas
Скилл обучает Claude Code собирать структуру бесконечного холста по стандарту JSON Canvas 1.0. На холст можно выносить четыре типа узлов: текст с Markdown, ссылки на локальные файлы, веб-адреса и группы. Порядок элементов в массиве задаёт z-index.
Внутри файла .canvas агент генерирует массивы nodes и edges. Связи соединяют стороны блоков стрелками и подписями. Пресеты цветов от "1" до "6" не содержат жёстких hex-кодов, поэтому палитру задаёт само приложение вроде Obsidian.
Какие задачи решает
- генерировать схемы процессов и ментальные карты в формате
.canvas - связывать заметки Obsidian направленными стрелками с подписями
- группировать карточки и вложения на бесконечном холсте
- обновлять координаты и размеры существующих узлов
Примеры запросов агенту
- Создай файл
architecture.canvasсо схемой микросервисов и связями между ними - Собери в
roadmap.canvasментальную карту проекта, сгруппировав задачи по этапам - Добавь на холст
notes.canvasузел с файломdocs/api.mdи соедини его с карточкой базы данных
Как установить json-canvas
1Через claude-code-templates
npx claude-code-templates@latest --skill document-processing/json-canvas2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill json-canvas -a claude-code3Вручную: положить файлы
~/.claude/skills/json-canvas/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/json-canvas/
Вручную: положить файлы
.agents/skills/json-canvas/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/json-canvas/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates json-canvas2Вручную: положить файлы
.github/skills/json-canvas/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/document-processing/json-canvasВручную: положить файлы
.devin/skills/json-canvas/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о json-canvas
Как установить json-canvas в Claude Code?
Выполните команду npx claude-code-templates@latest --skill document-processing/json-canvas в терминале. Также можно добавить файл вручную по пути ~/.claude/skills/json-canvas/SKILL.md.
Что делает скилл json-canvas?
Он учит Claude Code создавать и редактировать файлы .canvas строго по спецификации JSON Canvas 1.0 для Obsidian и совместимых программ.
Какие типы узлов поддерживает спецификация холста?
Поддерживаются четыре типа: текстовые блоки text с Markdown, ссылки на файлы хранилища file, внешние URL link и визуальные контейнеры group.
