# jointjs-code-playground

Creates standalone interactive HTML diagrams with JointJS for codebase architecture, database schemas, drag-and-drop builders, and diff reviews.

- plugin · `type=plugin` · Claude Code · ★ 6
- Author: clientIO
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/clientIO/jointjs-claude-playground
- Updated: 2026-04-07
- HTML: https://affpapa.org/en/nevibecode/plugins/jointjs-code-playground

## What it does

This plugin provides five skills: `codemap`, `data-explorer`, `canvas-builder`, `diff-review`, and `site-explorer`. Instead of static diagrams, Claude generates standalone HTML files running the JointJS 4.2 engine. You open them directly in any browser.

The code map draws graph nodes with path tracing and layout toggles. For database models, the explorer displays tables, constraint flags, and foreign keys. Visual builders let you assemble regular expressions or cron strings through drag-and-drop panels. The output updates instantly. The diff review tool pairs code hunks with a function call graph.

Generated files work offline and format your visual notes into prompt summaries. The `site-explorer` skill requires network access to an online sitemap, failing without a reachable site feed.

## Install

### Claude Code (native platform)

**Plugin marketplace**
In the agent chat (not a shell):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
In the agent chat (not a shell):
```text
/plugin install jointjs-code-playground@claude-community
```

## When to use it
- inspect software architecture and dependencies through an interactive graph
- visualize database tables, constraints, and foreign key relationships
- assemble cron schedules or regex patterns with drag-and-drop tools
- examine git pull request diffs side by side with a function call graph

## Example prompts
- Generate an interactive architectural map for Vue 3
- Show the relationships in our Postgres database schema
- Build a drag-and-drop regex builder with real-time testing

## Similar
- [impeccable](https://affpapa.org/en/nevibecode/plugins/impeccable.md) — plugin · ★ 89321
- [hyperframes](https://affpapa.org/en/nevibecode/plugins/hyperframes.md) — plugin · ★ 73168
- [typescript-lsp](https://affpapa.org/en/nevibecode/plugins/typescript-lsp.md) — plugin · ★ 44770
- [playground](https://affpapa.org/en/nevibecode/plugins/playground.md) — plugin · ★ 44770
- [frontend-design](https://affpapa.org/en/nevibecode/plugins/frontend-design.md) — plugin · ★ 44770
- [fakechat](https://affpapa.org/en/nevibecode/plugins/fakechat.md) — plugin · ★ 44770

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md