jointjs-code-playground — Claude Code plugin: what it does, install
Creates standalone interactive HTML diagrams with JointJS for codebase architecture, database schemas, drag-and-drop builders, and diff reviews.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install jointjs-code-playground@claude-communityWhat jointjs-code-playground 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.
What it helps with
- 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 for the agent
- 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
How to install jointjs-code-playground
Plugin marketplace
/plugin marketplace add anthropics/claude-plugins-community/plugin install jointjs-code-playground@claude-communityStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about jointjs-code-playground
How do I install jointjs-code-playground in Claude Code?
First, register the community marketplace with /plugin marketplace add anthropics/claude-plugins-community. Then install the plugin by running /plugin install jointjs-code-playground@claude-community.
What does jointjs-code-playground do?
It instructs Claude Code to output self-contained HTML files containing interactive JointJS diagrams. These include visual code navigators, database schema explorers, diff analyzers, and custom visual composers.
What builder types does canvas-builder support?
The canvas skill can generate builders for SQL queries, regular expressions, cron tasks, decision trees, GitHub Actions workflows, Docker Compose files, and state machines.
