claude-canvas

claude-canvas cover

AI-оркестрированное визуальное производство для Obsidian Canvas. Создавайте презентации, блок-схемы, мудборды, графы знаний и галереи с интеллектуальной компоновкой и AI-генерируемым контентом.

Claude выступает в роли Творческого директора — опишите, что хотите получить, и получите полностью заполненный, профессионально скомпонованный канвас.

Что умеет

Создавать канвасы из 12 встроенных шаблонов (презентация, блок-схема, ментальная карта, галерея, дашборд, раскадровка, граф знаний, мудборд, таймлайн, сравнение, kanban, проектный бриф)
Наполнять изображениями, текстом, PDF, wiki-заметками, веб-ссылками, Mermaid-диаграммами, SVG, GIF
Компоновать с помощью 6 алгоритмов (dagre, grid, radial, force-directed, linear, auto-detect)
Презентовать с поддержкой плагина Advanced Canvas (слайд-группы 1200×675 с навигацией по рёбрам)
Генерировать целые канвасы из одного описания с использованием AI-изображений и контента
Экспортировать в PNG, SVG или PDF

Установка

Claude Code CLI

claude plugin install AgriciDaniel/claude-canvas

Клонирование

bash

git clone https://github.com/AgriciDaniel/claude-canvas.git ~/Desktop/claude-canvas

Добавление в существующий проект

claude plugin add ~/Desktop/claude-canvas

Команды

Вы говорите	Claude делает
`/canvas`	Список канвасов с количеством узлов и зон
`/canvas create my-board`	Создать новый пустой канвас
`/canvas create launch from presentation`	Создать из шаблона-архетипа
`/canvas add image photo.png`	Добавить узел-изображение с автоматическим соотношением сторон
`/canvas add text "# Title"`	Добавить текстовую карточку в markdown
`/canvas add banana "hero shot"`	Сгенерировать AI-изображение через `/banana` и добавить на канвас
`/canvas add mermaid "graph LR..."`	Добавить Mermaid-диаграмму (рендерится нативно)
`/canvas zone "Research" 5`	Создать зону голубого цвета
`/canvas connect node-a node-b`	Добавить ребро между узлами
`/canvas from banana`	Импортировать недавно сгенерированные AI-изображения
`/canvas layout dagre`	Перекомпоновать с иерархическим алгоритмом
`/canvas layout auto`	Автоматически определить лучший алгоритм
`/canvas present "Q3 Review"`	Собрать презентационный канвас
`/canvas generate "mood board for cyberpunk game"`	Полная AI-оркестрированная генерация
`/canvas template list`	Просмотр 12 архетипов
`/canvas export png`	Экспортировать канвас в PNG

Шаблоны

Архетип	Компоновка	Применение
`presentation`	Линейная вертикальная	Слайд-деки для Advanced Canvas
`flowchart`	Sugiyama/dagre	Документация процессов
`mind-map`	Радиальная от центра	Исследование идей
`gallery`	Сетка	Витрины изображений
`dashboard`	Переменная сетка	Доски статуса проекта
`storyboard`	Линейная горизонтальная	Планирование видео/анимации
`knowledge-graph`	Force-directed	Связи между сущностями
`mood-board`	Асимметричная сетка	Творческое направление
`timeline`	Линейная горизонтальная	Последовательности событий
`comparison`	Два столбца	Сравнительный анализ
`kanban`	Зоны-столбцы	Управление задачами
`project-brief`	Стековые зоны	Запуск проекта

Расположение канвасов

claude-canvas учитывает хранилище, но не зависит от него:

Если существует wiki/canvases/ (хранилище claude-obsidian): используется этот каталог
В противном случае: создаётся .canvases/ в текущем проекте

Интеграция

Работает со следующими скиллами при их наличии (корректно деградирует при отсутствии):

/banana — генерация AI-изображений через Gemini
/svg — генерация диаграмм, графиков, иконок и паттернов
/claude-gif-* — создание, редактирование и оптимизация GIF
mcpvault MCP — чтение wiki-заметок для контента презентаций

Требования

Obsidian с поддержкой Canvas (v1.1+)
Плагин Advanced Canvas (рекомендуется для презентаций и экспорта)
Python 3.10+ (для скриптов компоновки и валидации)

Структура файлов

.claude-plugin/plugin.json     Метаданные плагина
commands/canvas.md             Точка входа CLI
hooks/hooks.json               Автовалидация PostToolUse
skills/
  canvas/                      Главный оркестратор — маршрутизирует к под-скиллам
    SKILL.md
    references/                7 справочных файлов (spec, layout, performance, templates, presentation, mermaid, media)
  canvas-create/SKILL.md       Создание канвасов
  canvas-populate/SKILL.md     Добавление узлов, рёбер, зон
  canvas-layout/SKILL.md       Алгоритмы перекомпоновки
  canvas-present/SKILL.md      Конструктор презентаций
  canvas-generate/SKILL.md     AI-оркестрированная генерация (флагман)
  canvas-template/SKILL.md     Браузер шаблонов
  canvas-export/SKILL.md       Экспорт в изображение/PDF
agents/                        3 агента (layout, media, composer)
scripts/                       Python CLI-инструменты (validate, layout, template)
templates/                     12 JSON Canvas архетипов
bin/setup.sh                   Установка опциональных зависимостей Python

Скриншоты

Полный обзор возможностей

AI-изображения, SVG-диаграмма архитектуры, Mermaid-графики, выноски и зоны — всё в одном канвасе Showcase

Галерея AI-изображений

8 разнообразных AI-сгенерированных изображений, расположенных в автоматически скомпонованной зоне галереи Gallery

Режим презентации

Слайд-дек из 6 слайдов с реальным контентом, Mermaid-диаграммами и навигацией по рёбрам для Advanced Canvas Presentation

Ментальная карта (радиальная компоновка)

Автоматически применённая радиальная компоновка, расходящаяся от центральной темы Mind Map

Шаблон сравнения

Зоны вариантов бок о бок с разделом сравнения критериев Comparison

Проектный бриф

Стековые зоны: заголовок, цели с KPI и результаты Project Brief

claude-canvas

Установка

README

claude-canvas

Что умеет

Установка

Claude Code CLI

Клонирование

Добавление в существующий проект

Команды

Шаблоны

Расположение канвасов

Интеграция

Требования

Структура файлов

Скриншоты

Полный обзор возможностей

Галерея AI-изображений

Режим презентации

Ментальная карта (радиальная компоновка)

Шаблон сравнения

Проектный бриф

Похожие скиллы

claude-mem

oh-my-openagent

Агенты и оркестрация

NanoClaw