jointjs-code-playground — плагин для Claude Code: обзор и установка
Генерирует автономные интерактивные HTML-песочницы на базе JointJS: карты кодовой базы, диаграммы баз данных, визуальные конструкторы и ревью diff с графами вызовов.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install jointjs-code-playground@claude-communityЧто делает jointjs-code-playground
Плагин добавляет пять навыков: codemap, data-explorer, canvas-builder, diff-review и site-explorer. Вместо статичных картинок агент создаёт готовые HTML-файлы с интерактивными графами на движке JointJS 4.2. Их открывают прямо в браузере.
Для анализа архитектуры плагин рисует анимированные узлы с подсветкой маршрутов. В конструкторе можно собирать диаграммы перетаскиванием блоков: инструмент поддерживает SQL-запросы или крон-расписания. Сгенерированный код обновляется синхронно. Инструмент ревью совмещает построчный просмотр изменений с графом зависимостей затронутых функций.
Каждая страница работает автономно и сохраняет введённые заметки. При этом навык site-explorer требует прямого доступа к sitemap по сети, иначе дерево страниц построить не выйдет.
Какие задачи решает
- визуализировать архитектуру и зависимости модулей в проекте
- исследовать таблицы базы данных и внешние ключи на диаграмме
- собирать регулярные выражения или крон-расписания в визуальном конструкторе
- проводить ревью diff-файлов с графом вызовов затронутых функций
Примеры запросов агенту
- Сделай интерактивную карту архитектуры для Vue 3
- Построй визуальную схему связей для моей базы данных Postgres
- Собери конструктор регулярных выражений с живым тестированием
Как установить jointjs-code-playground
Через маркетплейс плагинов
/plugin marketplace add anthropics/claude-plugins-community/plugin install jointjs-code-playground@claude-communityПо шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой
Вопросы о jointjs-code-playground
Как установить jointjs-code-playground в Claude Code?
Сначала добавьте каталог плагинов командой /plugin marketplace add anthropics/claude-plugins-community. После этого запустите установку пакета: /plugin install jointjs-code-playground@claude-community.
Что делает jointjs-code-playground?
Плагин создаёт автономные HTML-страницы с интерактивными графическими диаграммами JointJS. Он помогает разбирать кодовые базы, схемы данных, сайты и строить визуальные редакторы.
Какие типы генераторов поддерживает навык canvas-builder?
Навык строит визуальные редакторы для SQL-запросов, крон-расписаний, регулярных выражений, деревьев решений, стейт-машин, а также файлов Docker Compose и воркфлоу GitHub Actions.
