# jointjs-code-playground

Генерирует автономные интерактивные HTML-песочницы на базе JointJS: карты кодовой базы, диаграммы баз данных, визуальные конструкторы и ревью diff с графами вызовов.

- плагин · `type=plugin` · Claude Code · ★ 6
- Автор: clientIO
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/clientIO/jointjs-claude-playground
- Обновлён: 2026-04-07
- HTML: https://affpapa.org/nevibecode/plugins/jointjs-code-playground

## Что делает

Плагин добавляет пять навыков: `codemap`, `data-explorer`, `canvas-builder`, `diff-review` и `site-explorer`. Вместо статичных картинок агент создаёт готовые HTML-файлы с интерактивными графами на движке JointJS 4.2. Их открывают прямо в браузере.

Для анализа архитектуры плагин рисует анимированные узлы с подсветкой маршрутов. В конструкторе можно собирать диаграммы перетаскиванием блоков: инструмент поддерживает SQL-запросы или крон-расписания. Сгенерированный код обновляется синхронно. Инструмент ревью совмещает построчный просмотр изменений с графом зависимостей затронутых функций.

Каждая страница работает автономно и сохраняет введённые заметки. При этом навык `site-explorer` требует прямого доступа к sitemap по сети, иначе дерево страниц построить не выйдет.

## Установка

### Claude Code (родная платформа)

**Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
В чате агента (не в терминале):
```text
/plugin install jointjs-code-playground@claude-community
```

## Когда брать
- визуализировать архитектуру и зависимости модулей в проекте
- исследовать таблицы базы данных и внешние ключи на диаграмме
- собирать регулярные выражения или крон-расписания в визуальном конструкторе
- проводить ревью diff-файлов с графом вызовов затронутых функций

## Примеры запросов агенту
- Сделай интерактивную карту архитектуры для Vue 3
- Построй визуальную схему связей для моей базы данных Postgres
- Собери конструктор регулярных выражений с живым тестированием

## Похожие
- [impeccable](https://affpapa.org/nevibecode/plugins/impeccable.md) — плагин · ★ 89321
- [hyperframes](https://affpapa.org/nevibecode/plugins/hyperframes.md) — плагин · ★ 73168
- [typescript-lsp](https://affpapa.org/nevibecode/plugins/typescript-lsp.md) — плагин · ★ 44770
- [playground](https://affpapa.org/nevibecode/plugins/playground.md) — плагин · ★ 44770
- [frontend-design](https://affpapa.org/nevibecode/plugins/frontend-design.md) — плагин · ★ 44770
- [fakechat](https://affpapa.org/nevibecode/plugins/fakechat.md) — плагин · ★ 44770

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md