{
  "markdown": "# JointJS Code Playground — Claude Code Plugin\n\nA Claude Code plugin to create custom JointJS-powered interactive playgrounds.\n\nIt 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.\n\n## Demos\n- [Codemap built with an interactive diagram](https://changelog.jointjs.com/gallery/jointjs-claude-playground/index.html)\n- [SQL Query Builder](https://changelog.jointjs.com/gallery/jointjs-claude-playground/sql-query-builder.html)\n- [Decision Tree Builder](https://changelog.jointjs.com/gallery/jointjs-claude-playground/decision-tree-builder.html)\n- [Regex Builder](https://changelog.jointjs.com/gallery/jointjs-claude-playground/regex-builder.html)\n- [Cron Builder](https://changelog.jointjs.com/gallery/jointjs-claude-playground/cron-builder.html)\n- [Diff Review Tool](https://changelog.jointjs.com/gallery/jointjs-claude-playground/diff-review.html)\n- [Visual Site Explorer](https://changelog.jointjs.com/gallery/jointjs-claude-playground/jointjs-site-explorer.html)\n\n\n## Skills\nFive 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.\n\n### 1. `codemap` — Code Map Playground\n\nWhen 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:\n\n- **Animated node graph** using JointJS 4.2 with layer-colored nodes and typed connections\n- **Preset views** that animate between Full, Core, Rendering, and Geometry perspectives\n- **Router toggle** to switch between Manhattan, Metro, Direct, and One Side live\n- **Path highlighting** — hover any node to trace the shortest undirected path to the pinned anchor node\n- **Click-to-comment** — click nodes to read docs, see code snippets, and add notes\n- **Generated prompt** at the bottom — summarizes your active view and notes, ready to copy back into Claude\n\n**Trigger phrases:**\n- \"Create a code map for JointJS 4.2\"\n- \"Show me how the React codebase is structured as an interactive diagram\"\n- \"Build an architecture explorer for Express.js\"\n- \"Visualize the module relationships in Vue 3\"\n\n**Template:** `skills/graph-explorer/templates/graph-explorer.md` → Shared Framework + Code Map Spec\n\n---\n\n### 2. `data-explorer` — Data Explorer Playground\n\nWhen 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:\n\n- **Entity nodes** with a two-tone header (domain color strip + body) and `PK: <field> · N fields` sublabel\n- **Field-level search** — typing a field name or type highlights matching entities\n- **Full field table in modal** — click any entity to see all fields with PK / FK / UQ / NN constraint badges, sample query, and note field\n- **Relationship links** with FK column name labels (foreignKey, references, extends, contains, depends)\n- Same animated transitions, router toggle, preset views, BFS path highlighting, and prompt output as the code map\n\n**Trigger phrases:**\n- \"Visualize my database schema\"\n- \"Create a data map for our API models\"\n- \"Show me the entity relationships in our app\"\n- \"Explore this Postgres schema as an interactive diagram\"\n\n**Template:** `skills/graph-explorer/templates/graph-explorer.md` → Shared Framework + Data Explorer Spec\n\n---\n\n### 3. `canvas-builder` — Interactive Visual Builder Playground\n\nWhen 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:\n\n- **Categorized sidebar** of draggable items with accent-colored section headers\n- **JointJS canvas** where users drag nodes, connect them with typed links, and edit properties via double-click overlay\n- **Live output panel** with multiple format tabs (JSON, code, pseudocode) that regenerates on every graph change\n- **Live test panel** for applicable builder types (regex, decision tree, cron)\n- **Router toggle** (Direct / Orthogonal / Manhattan / Metro / One Side) + Fit + Clear toolbar\n- **Pan & zoom** with pointer events and mouse wheel\n\n**Builder types:**\n\n| Type | Trigger phrases | Output |\n|---|---|---|\n| SQL Query Builder | sql, query, joins, database tables | `SELECT … FROM … JOIN … WHERE …` |\n| Regex Builder | regex, regular expression, pattern matching | `/pattern/flags` with live test |\n| API Designer | api, endpoints, routes, REST, OpenAPI | endpoint list / OpenAPI snippet |\n| Data Pipeline | pipeline, ETL, data flow, transform | transformation pseudocode |\n| Cron Builder | cron, schedule, recurring job, crontab | `0 9 * * 1-5` + human description + next runs |\n| Decision Tree / Rule Engine | decision tree, rules, conditions, branching logic | JSON rules + JS if/else + pseudocode |\n| GitHub Actions Builder | github actions, workflow, ci/cd, pipeline yaml | `.github/workflows/*.yml` |\n| State Machine Builder | state machine, xstate, states, transitions, fsm | XState `createMachine({…})` config |\n| Docker Compose Builder | docker compose, services, containers, networking | `docker-compose.yml` |\n\n**Template:** `skills/canvas-builder/templates/canvas-builder.md`\n\n---\n\n### 4. `diff-review` — Diff Review with Call Graph\n\nWhen you ask Claude to review a diff or PR — e.g. \"review this PR\", \"show me what changed with a call graph\" — this skill generates a self-contained HTML file with:\n\n- **Line-by-line diff viewer** with syntax-highlighted add/remove/context lines\n- **Inline commenting** — click any line to add a review comment\n- **Hunk approve/reject** — review each change hunk independently with status tracking\n- **JointJS call graph** alongside the diff — shows which functions changed and what calls them\n- **Bidirectional linking** — click a graph node to scroll to its hunk; click a hunk's function label to highlight it in the graph\n- **Filter pills** — All / Changed only / Callers views of the call graph\n- **Router toggle** for the call graph\n\n**Trigger phrases:**\n- \"Review this PR\"\n- \"Show me what changed in this diff\"\n- \"Create a code review tool with call graph\"\n- \"Build a PR diff reviewer\"\n- \"Visualize what functions changed and their callers\"\n\n**Template:** `skills/diff-review/SKILL.md`\n\n---\n\n### 5. `site-explorer` — Site Explorer Playground\n\nWhen you ask Claude to map a website's structure — e.g. \"create a site map for docs.jointjs.com\" or \"show me the page hierarchy of react.dev\" — this skill fetches the sitemap and generates a self-contained HTML file with:\n\n- **Zoomable JointJS tree** — every page as a node, URL hierarchy as parent/child links\n- **Section colors** — top-level URL segments get distinct colors; the whole subtree inherits the section color\n- **Ancestor path highlight** — hover a page node to trace its path back to the root\n- **Click to open** — click any node to open the real page in a new tab\n- **Search** — filter by page title or URL path segment\n- **Section filter pills** — show/hide entire sections of the site\n- **Depth toggle** — collapse to top-level only, 2 levels, or full tree\n\n**Trigger phrases:**\n- \"Create a site map for docs.jointjs.com\"\n- \"Build a website explorer for react.dev\"\n- \"Show me the structure of the Next.js docs\"\n- \"Map out this documentation site\"\n- \"Visualize the page hierarchy of stripe.com/docs\"\n\n**Template:** `skills/site-explorer/templates/site-explorer.md`\n\n---\n\n## Installation\n\nYou can install the plugin through JointJS marketplace. First you need to add the marketplace, then you can install the plugin.\n\n### Add JointJS Marketplace\n\n```\n/plugin marketplace add https://github.com/clientIO/jointjs-claude-marketplace\n```\n\n### Install JointJS Claude Playground plugin\n```\n/plugin install jointjs-claude-playground@jointjs\n```\n\nAfter installing the plugin, run `/reload-plugins` to enable the newly installed plugin.\n\nSometimes, the `/reload-plugins` command is unreliable, so you might need to restart Claude Code in your terminal—exit it and launch it again using `claude` if you don’t see plugin skills in the autocomplete list under `/jointjs` after installing and reloading the plugins.\n\n#### A potential problem with installing Claude Code plugins\n\nNote that there’s a bug in Claude Code where installing a Claude Code Plugin fails if you don’t have SSH keys configured on your system for GitHub.\n\nWhen installing a plugin, Claude Code clones the repository via SSH (`git@github.com:…`), so if your GitHub SSH keys aren’t configured properly, the installation will fail.\n\nIdeally, you should fix your GitHub SSH config, but as a workaround, before Claude Code resolves the problem, you can bypass SSH in your git config—run the following in your terminal:\n```bash\ngit config --global url.\"https://github.com/\".insteadOf git@github.com:\n```\n\nIf you want to learn more about the bug in Claude Code, check the open issue on GitHub:\n[Marketplace plugin cloning should default to HTTPS instead of SSH ](https://github.com/anthropics/claude-code/issues/26588)\n\n## Output\n\nA single `.html` file opened directly in your browser. No server, no build step.\n\n## Filename conventions\n\n- Code map: `<library>-codemap.html` — e.g. `react-codemap.html`\n- Data explorer: `<schema>-data-explorer.html` — e.g. `ecommerce-data-explorer.html`\n- Canvas builder: `<subject>-<type>.html` — e.g. `loan-decision-tree.html`, `email-regex-builder.html`\n- Diff review: `<subject>-diff-review.html` — e.g. `auth-diff-review.html`\n- Site explorer: `<domain>-site-explorer.html` — e.g. `docs-jointjs-site-explorer.html`\n",
  "bytes": 9965,
  "sha": "0fde74590a690dbc1cd43529bc94cdf5e8fdd96530659d2a7fb7d0b5e99e07c2",
  "repo_slug": "clientio/jointjs-claude-playground",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_clientio_jointjs_claude_playground_joint_ebc22282/readme"
}