canvas
Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.
AImarkdown-viewer
official
Дизайн
Что делает навык
Навык генерирует JSON-код для создания пространственных диаграмм с свободно позиционируемыми узлами, совместимых с Obsidian Canvas. Он предназначен для визуализации концептуальных карт, графов знаний и досок планирования с точным контролем координат.
Когда применять
- Создание концептуальных карт для структурирования идей
- Построение графов знаний с явными связями между узлами
- Планирование задач на досках с точным расположением элементов
- Визуализация связей между файлами или внешними ссылками
Как работает
- Определите узлы (nodes), указав их id, type, координаты x/y и размеры width/height, планируя макет на сетке 100px
- Создайте связи (edges), указав fromNode, toNode и стороны подключения (fromSide, toSide)
- Примените цветовые пресеты (от 1 до 6) для визуального различения элементов
- Оберните итоговый JSON в блок кода с меткой canvas (```canvas ... ```)
- Проверьте, что координаты начинаются с (0,0) в левом верхнем углу, а X и Y увеличиваются вправо и вниз соответственно
Примеры запросов агенту
Создай концептуальную карту с тремя текстовыми узлами, соединенными стрелками, используя цветовые пресеты.
Сгенерируй JSON для доски планирования с узлами типа 'file' и 'link', расположенными на сетке 100px.
Построй граф знаний, где узлы имеют разные размеры в зависимости от длины текста, и соединены ребрами с arrow.
Что понадобится
- Поддержка парсинга JSON-блоков с меткой canvas
- Совместимость с форматом данных Obsidian Canvas
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «canvas» из репозитория:
# https://github.com/markdown-viewer/skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r canvas/ ~/.claude/skills/canvas/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.