JointJS Code Playground — Claude Code Plugin
A Claude Code plugin to create custom JointJS-powered interactive playgrounds.
It enables you to build code maps for library/codebase architectures, data explorers for database schemas, canvas builders for drag-and-drop visual composers, diff reviewers with inline commenting and call graphs, and site explorers for interactive website/docs sitemaps.
Demos
Skills
Five JointJS-powered interactive playground skills: a code map for library/codebase architecture, a data explorer for database schemas, a canvas builder for drag-and-drop visual composers, a diff reviewer with inline commenting and call graphs, and a site explorer for interactive website/docs sitemaps.
1. codemap — Code Map Playground
When you ask Claude to visualize a library's structure — e.g. "create a code map for React" or "show me how Express.js is organized" — this skill generates a self-contained HTML file with:
- Animated node graph using JointJS 4.2 with layer-colored nodes and typed connections
- Preset views that animate between Full, Core, Rendering, and Geometry perspectives
- Router toggle to switch between Manhattan, Metro, Direct, and One Side live
- Path highlighting — hover any node to trace the shortest undirected path to the pinned anchor node
- Click-to-comment — click nodes to read docs, see code snippets, and add notes
- Generated prompt at the bottom — summarizes your active view and notes, ready to copy back into Claude
Trigger phrases:
- "Create a code map for JointJS 4.2"
- "Show me how the React codebase is structured as an interactive diagram"
- "Build an architecture explorer for Express.js"
- "Visualize the module relationships in Vue 3"
Template: skills/graph-explorer/templates/graph-explorer.md → Shared Framework + Code Map Spec
2. data-explorer — Data Explorer Playground
When you ask Claude to visualize a database schema or data model — e.g. "explore my Postgres schema" or "show entity relationships for our API" — this skill generates a self-contained HTML file with:
- Entity nodes with a two-tone header (domain color strip + body) and
PK: <field> · N fields sublabel
- Field-level search — typing a field name or type highlights matching entities
- Full field table in modal — click any entity to see all fields with PK / FK / UQ / NN constraint badges, sample query, and note field
- Relationship links with FK column name labels (foreignKey, references, extends, contains, depends)
- Same animated transitions, router toggle, preset views, BFS path highlighting, and prompt output as the code map
Trigger phrases:
- "Visualize my database schema"
- "Create a data map for our API models"
- "Show me the entity relationships in our app"
- "Explore this Postgres schema as an interactive diagram"
Template: skills/graph-explorer/templates/graph-explorer.md → Shared Framework + Data Explorer Spec
3. canvas-builder — Interactive Visual Builder Playground
When you ask Claude to build any drag-and-drop visual composer — e.g. "build a regex builder", "create a SQL query builder", "make a decision tree" — this skill generates a self-contained HTML file with:
- Categorized sidebar of draggable items with accent-colored section headers
- JointJS canvas where users drag nodes, connect them with typed links, and edit properties via double-click overlay
- Live output panel with multiple format tabs (JSON, code, pseudocode) that regenerates on every graph change
- Live test panel for applicable builder types (regex, decision tree, cron)
- Router toggle (Direct / Orthogonal / Manhattan / Metro / One Side) + Fit + Clear toolbar
- Pan & zoom with pointer events and mouse wheel
Builder types:
