Forem: Arthur Khokhlov

Build better Claude Code Playgrounds with JointJS

Arthur Khokhlov — Mon, 13 Apr 2026 13:59:19 +0000

Claude Code Playground plugin is fantastic. It allows you to build HTML UI explorers and visualize complex concepts in an intuitive, straightforward way. It gives you visual controls to craft natural-language prompts that work perfectly with AI, and it can even help you build mental models of complex data structures.

But here’s the honest truth. The diagrams you’ll build in Claude Code Playground are solid but quite limited in interactivity. With a proper, dedicated diagramming library, you can make them interactive, more visually appealing, and more intuitive, drastically improving the Playground UI.

In this article, you’ll learn how to enhance Claude Code Playgrounds with JointJS to turn static diagrams into fully interactive visual tools—draggable nodes, smarter routing, animated transitions, and more.

Keep in mind that you can reuse the concepts and ideas shown here whenever you want to bridge text and UI. If you want a better visual way to instruct AI agents, especially when you’re structuring data, designing flows, or tackling complex coding problems, JointJS Claude Playground lets you do exactly that.

How JointJS makes Claude Code Playgrounds better

Claude Code Playgrounds are great, practical, and useful, but severely limited in handling complex data flows, visualizing data relationships, and creating architecture diagrams.

Here’s an example of a playground generated with Code Map of Claude Code Playground.

An example of a static diagram created with Claude Code Playground.

It’s a nice visual overview. You can click nodes, add comments, and zoom in and out. But it’s still not a truly interactive diagram.

You can’t drag a node to reposition it to better fit your use case and understanding. You can’t do anything with links, so when they get tangled and overlapped, you’re stuck with trying to decipher the relations yourself. And this is still a relatively simple diagram, let alone an enterprise-grade one.

But if you enhance this demo with JointJS, you can get a real interactive diagram that’s not only more intuitive but also much more practical.

An example of a codemap created with the JointJS Claude Playground plugin. If an image is worth a thousand words, how much is an interactive demo concept worth? → Live demo

The generated Code Map is massively improved if we enhance it with JointJS:

Animated transitions make preset and layer changes visually clear.
Automatic zooming maximizes the use of the canvas after toggling presets or layers.
Different routers realign the entire link structure of the diagram on the fly and make connections clear and more intuitive.
Draggable nodes allow manual grouping while still maintaining clear relationships among elements.
Reset and Fit View controls give fine control over state and diagram positioning.
Highlighted paths to selected or hovered elements surface relationships between different nodes instantly.

The result is still a single HTML file that you can directly open in your browser or share with others. It’s using the open source version of JointJS, so you don’t have to install any dependencies, and there are no build steps—it just works.

To give you all the tools you need to create your own JointJS-enhanced Claude Code Playgrounds, we built a plugin you can use however you want.

Need precise prompts to visualize data structures and user flows? Want a visual SQL, Regex, Cron, or decision-tree builder? Install the JointJS Claude Playground plugin, enter your prompt, and you will get a much better, interactive code playground.

How to use the JointJS Claude Playground plugin

JointJS Claude Playground plugin is available on GitHub. To install it, you’ll need to add JointJS Marketplace (a concept Claude Code uses for third-party plugins) to Claude Code:

`/plugin marketplace add https://github.com/clientIO/jointjs-claude-marketplace`

Enable auto-updates for plugin marketplace

Plugins from third-party marketplaces, such as JointJS, are not automatically updated, so you’ll need to enable this to always get the latest and best versions, including new features, potential security updates, and bug fixes.

In Claude Code, run /plugin\ then go into Marketplaces\ tab, select jointjs\ marketplace and toggle Enable auto-update\ command. That way, you will automatically get the latest updates to JointJS plugins.

When you add the JointJS marketplace, install the JointJS Playground Plugin:

`/plugin install jointjs-claude-playground@jointjs`

When the installation finishes, run `/reload-plugins` command to enable the newly installed plugin.

I found `/reload-plugins` to be 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 /jointjs\ after installing and reloading the plugins.

A potential problem with installing Claude Code plugins

Note 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.

When 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.

Ideally, 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:

git config --global url."https://github.com/".insteadOf git@github.com:

If you want to learn more about the bug in Claude Code, check the open issue on GitHub: Marketplace plugin cloning should default to HTTPS instead of SSH

Once you verify the plugin is installed, you can start using it. Any prompts that mention “jointjs playground” will trigger it, using JointJS to enhance the diagrams and flowcharts.

Example prompts that will trigger JointJS Claude Playgrounds.

Build a JointJS codemap playground for React.
Create an interactive JointJS website map playground of URL-TO-YOUR-WEBSITE.

If you specifically want to trigger a specific skill available in the plugin, invoke it manually with the command /jointjs. This will give you an autocomplete list of all available JointJS Claude Playground templates.

A screenshot of the `/jointjs` command in Claude Code.

The skills currently available in the JointJS Claude Playground are namespaced to `/jointjs`, but you can use them directly. If there are any other skills with the same names, you’ll differentiate them by the plugin name in parentheses (jointjs-claude-playground):

`/canvas-builder` - Creates any interactive visual builder playground.
/data-explorer - Creates an interactive data explorer playground for any database schema, API data model, or entity-relationship diagram.
/codemap - Creates an interactive code map playground for any library or codebase architecture.
/site-explorer - Creates an interactive website map.
/diff-review - Creates an interactive PR/diff review tool.

Note that you don’t have to trigger specific skills manually. Describe what you want, specify that you want to build a JointJS playground, and AI will figure out which precise template to use.

JointJS Claude Playground examples

The possibilities, just as with standard Claude Code Playground, are endless, but to give you a few ideas, here’s what we built with the JointJS Claude Playground plugin.

Codebase visualizers for React, Vue.js, Svelte, Express.js

If you want to better understand a codebase, just ask Claude to create a JointJS code map. It uses the `/codemap` skill to build a clear visualization of the most important concepts of a codebase, with relationships clearly defined, ready for you to explore. You can click any node, add comments, and then copy the prompt to create a custom learning path that will help you better understand the framework.

React is probably the most popular and widely used framework today—with the JointJS React codemap, you can precisely pinpoint your knowledge gaps and get the right prompt to craft the exact learning plan to master it. → Live demo

We’ve also built code maps for Vue.js, Svelte, Express.js, and even JointJS itself, all using the same approach.

Of course, you can apply this to any framework or to your local codebase, even if it’s something completely custom.

Visual builders

You can use the `/canvas-builder` skill to create a visual builder playground, which allows you to drag-and-drop nodes from a sidebar to build a structured output, ideal for building complex queries easily. You can create a tool for any domain, for SQL, regex, cron expressions, decision trees, API specs, pipelines, and more.

A really practical example is a custom SQL Query Builder that lets you visually build queries by dragging and dropping tables from the sidebar, then connecting their properties to generate an intricate SQL query you can copy with a click of a button.

SQL Query Builder tool created using the JointJS Claude Playground plugin. It can help you structure complex SQL queries visually.

Another handy use case for the `/canvas-builder` skill is a custom decision tree.

You can generate visual flowcharts and map out various courses of action, potential outcomes, and their consequences.

Decision Tree Builder tool, created with JointJS Claude Playground, can clarify your thinking about the decisions you need to make.

We built a few other demos to showcase how much simpler building complex expressions in a JointJS Claude Playground can be:

The possibilities are wide-ranging, and you can easily generate GitHub Actions Builders, State Machine Builders, API Designers, and many more domain‑specific tools.

Data & site explorers

You can also use JointJS Claude Playground to visualize data architecture and website structures, or to build tools that will help you work through various data challenges, such as massive pull requests or diffs.

An example of a Diff Review tool that not only showcases the file changes, but also the actual relationships between changed files.

You can build interactive website maps to help you visualise your website structure and identify weak points or unintuitive site hierarchies—you should probably fix those if you want to rank better in Google Search or in LLMs.

• JointJS Site Explorer – visualize your site structure.

• E‑commerce Data Explorer – map entities, relationships, and flows.

Keep in mind that you can always plug any skill directly into your projects to build something specifically for your use case.

How to build a custom JointJS Claude Playground

JointJS Claude Playground comes with a number of predefined skills, but the basis is very flexible, so you can, and should, think outside of the box when it comes to building interesting and useful JointJS Claude Playground.

Unlike the standard Claude Code Playground, the version enhanced with JointJS allows you to create interactive flows and generate output, be it a prompt, code, or query, in a user-friendly, intuitive way.

Want to create a hero section, but don’t know how to structure it? Ask Claude to build a JointJS playground with the elements you want in the sidebar, and you can then drag-and-drop them onto the canvas to see exactly what they would look like.
You’re hiring for a role and want to prepare structured questions? Build a flowchart-style tool in which each node represents a question/answer branch.
Struggling with dependency conflicts in your package.json? Create a Dependency Conflict Resolver that lets you paste a package.json or requirements.txt file, renders the full dependency graph, highlights conflicting version ranges, and provides options to manually pin versions to resolve conflicts.
Want to build a PoC for a JointJS application? Generate a JointJS Claude Playground that mirrors the UI and logic of the app you want to build as a proof of concept.

Pro tip: In JointJS Claude Playground, you’re still working with an AI Coding Agent, so you can quickly iterate on features, fix bugs in the generated code, or adapt the playground to new use cases.

If you want to build something custom out of the box, just make sure you mention “jointjs playground” in your prompt, and Claude Code should be able to build an interactive playground leveraging the JointJS library.

All of this is built on the open‑source version of JointJS. If you need advanced, enterprise-level features, JointJS+ gives you even more power.

Conclusion

The Claude Code Playground plugin is great, but somewhat limited when it comes to creating truly interactive visual playgrounds that not only look good but are also more intuitive and usable. So whenever you need an interactive, visual component in the Claude Code Playground you’re building, reach for JointJS to enhance it.

All you need is the JointJS Claude Playground plugin, and you’ll get immediate access to robust skills that will help you make even better playgrounds. Install the JointJS Claude Playground plugin from GitHub, and start your first jointjs playground prompt to see the difference.

Written by: Zoran Jambor, Developer Advocate at JointJS

Interactive ROI calculator

Arthur Khokhlov — Thu, 24 Aug 2023 16:05:08 +0000

If you could travel back in time, what asset would you invest in? Gold, S&P500, Bitcoin?

Check out our simplified ROI calculator to find out your potential profits or losses based on historical data and also what diagramming enthusiasts will appreciate, how JointJS handles the integration of HTML form elements directly into the shapes via foreign objects.

As a bonus, this demo shows JointJS accessibility as it works well on screen readers. Check it out!

This demo was built with JointJS, a proven JavaScript diagramming library. If you are interested in enhancing your application with interactive diagrams, explore our gallery of pre-built diagraming applications and cut your development time to days: https://www.jointjs.com/demos

Light & Dark Mode for diagrams (flowchart)

Arthur Khokhlov — Thu, 24 Aug 2023 16:05:00 +0000

How to completely style a diagram in CSS? How to toggle the diagram's light and dark mode? How to design elements and links with bevelled edges? How to keep the link anchor on the element boundary? How to write your own orthogonal router? Check out this CodePen that gives you all the answers.

Marey Chart

Arthur Khokhlov — Thu, 24 Aug 2023 16:04:51 +0000

Marey diagrams or Marey charts are usually used to analyze transportation systems such as bus or train schedules. However, there are other uses for this type of diagram, one of which is workflow analysis.

Below you can see an interactive example of a Marey diagram and feel free to study the source code to learn how to build one.

Inspired by Mike Bostock D3 example: https://bl.ocks.org/mbostock/5544008

How to create isometric diagrams using SVG

Arthur Khokhlov — Wed, 23 Aug 2023 08:37:33 +0000

There are various methods of visualizing three-dimensional objects in two-dimensional space. For example, most 3D graphics engines use perspective projection as the main form of projection. This is because perspective projection is an excellent representation of the real world, in which objects become smaller with increasing distance. But when the relative position of objects is not important, and for a better understanding of the size of objects, you can use parallel projections. They are more common in engineering and architecture, where it is important to maintain parallel lines. Since the birth of computer graphics, these projections have been used to render 3D scenes when 3D rendering hardware acceleration was not possible. Recently, various forms of parallel projections have become a style choice for digital artists, and they are used to display objects in infographics and in digital art in general.

The purpose of this article is to show how to create and manipulate isometric views in SVG, and how to define these objects using, in particular, the JointJS library. To illustrate SVG’s capabilities in creating parallel projections, we will use isometric projection as an example. This projection is one of the dominant projection types, because it allows you to maintain the relative scale of objects along all axes.

Isometric projection

Let’s define what isometric projection is. First of all, it is a parallel type of projection in which all lines from a “camera” are parallel. It means that the scale of an object does not depend on the distance between the “camera” and the object. And specifically, in isometric (means “equal measure” in greek) projection, scaling along each axis is the same. This is achieved by defining equal angles between all axes.

In the following image, you can see how axes are positioned in isometric projection. Keep in mind that in this article we will be using a left-handed coordinate system.

One of the features of the isometric projection is that it can be deconstructed in three different 2D projections: top, side and front projections. For example, cuboid can be represented by three rectangles on each 2D projection and then combined into one isometric view. The next image represents separate projections of an object using the left-handed coordinate system.

Then we can combine them into one isometric view:

The challenge with SVG is that it contains 2D objects which are located on one XY-plane. But we can overcome this by combining all projections in one plane, and then separately applying transformation to every object.

SVG isometric view transformations

In 3D, to create an isometric view, we can move the camera to a certain position, but SVG is purely a 2D format, so we have to create a workaround to build such a view. We recommend reading Cody Walker’s article that presents a method for creating isometric representations from 2D object views — top, side and front projections. Based on the article, we need to create transformations for each 2D projection of the object separately.

First we need to rotate our plane by 30 degrees. And then we will skew our 2D image by -30 degrees. This transformation will align our axes with the axes of the isometric projection.

Then we need to use a scale operator to scale our 2D projection down vertically by 0.8602. We need to do it due to the fact of isometric projection distortion.

Let’s introduce some SVG features that will help us implement isometric projection. The SVG specification allows users to specify a particular transformation in the transform attribute of an SVG element. This attribute helps us apply linear transformation to the SVG element. To transform 2D projection into an isometric view, we need to apply scale, rotate and skew operators.

To represent the transformation in code, we can use the DOMMatrixReadOnly object, which is a browser API to represent the transformation matrix. Using this interface, we can create a matrix as follows:

const isoMatrix = new DOMMatrixReadOnly()
    .rotate(30)
    .skewX(-30)
    .scale(1, 0.8602);

This interface allows building a transformation matrix using our values, and then we can apply the resulting value to the transform attribute using the matrix function.

In SVG, we can present only one 2D space at a time, so for our conversion, we will be using top projection as a base projection. This is mostly because axes in this projection correspond with axes in a normal SVG viewport.

To demonstrate SVG possibilities, we will be using the JointJS library. We defined a rectangular grid in the XY-plane with a cell width of 20. Let’s define SVG for the elements on the top projection from the example. To properly render this object, we need to specify two polygons for two levels of our object. Also, we can apply a translate transformation for our element in 2D space using DOMMatrix:

// Translate transformation for Top1 Element
const matrix2D = new DOMMatrixReadOnly()
    .translate(200, 200);

<!--Top1 element-->
<polygon joint-selector="body" id="v-4" 
  stroke-width="2" stroke="#333333" fill="#ff0000" 
  fill-opacity="0.7" points="0,0 60,0 60,20 40,20 40,60 0,60" 
  transform="matrix(1,0,0,1,200,200)">
</polygon>

<!--Top2 element-->
<polygon joint-selector="body" id="v-6" 
  stroke-width="2" stroke="#333333" fill="#ff0000" 
  fill-opacity="0.7" points="0,0 20,0 20,40 0,40" 
  transform="matrix(1,0,0,1,240,220)">
</polygon>

Then we can apply our isometric matrix to our elements. Also, we will add a translate transformation to position elements in the right place:

const isoMatrix = new DOMMatrixReadOnly()
    .rotate(30)
    .skewX(-30)
    .scale(1, 0.8602);

const top1Matrix = isoMatrix.translate(200, 200);
const top2Matrix = isoMatrix.translate(240, 220);

For simplicity, let’s assume that our element’s base plane is located on the XY-plane. Therefore, we need to translate the top view, so it will be viewed as it is located on the top of the object. To do it, we can just translate the projection by its Z coordinate on the scaled SVG space as follows. Top1 element has elevation 80, so we should translate it by (-80, -80). Similarly, Top2 element has elevation 40. We can just apply these translations to our existing matrix:

const top1MatrixWithHeight = top1Matrix.translate(-80, -80);
const top2MatrixWithHeight = top1Matrix.translate(-40, -40);

In the end, we will have the following transform attributes for Top1 and Top2 elements. Note that they differ only in the two last values, which represent the translate transformation:

// Top1 element
transform="matrix(0.8660254037844387,0.49999999999999994,-0.8165000081062317,0.47140649947346464,5.9,116.6)"

// Top2 element
transform="matrix(0.8660254037844387,0.49999999999999994,-0.8165000081062317,0.47140649947346464,26.2,184.9)"

To create an isometric view of side and front projections, we need to make a net so we can place all projections on 2D SVG space. Let’s create a net by attaching side and front views similar to the classic cube net:

Then we need to skewX side and front projections by 45 degrees. It will allow us to align the Z axis for all projections. After this transformation, we will get following image:

Then we can apply our isoMatrix to this object:

In every projection, there are parts that have a different 3rd coordinate value. Therefore, we need to adjust this depth coordinate for every projection as we did with the top projection and its Z coordinate. In the end, we will get the following isometric view:

Using JointJS for the Isometric Diagram

JointJS allows us to create and manipulate such objects with ease due to its elements framework and wide set of tools. Using JointJS, we can define and control isometric objects to build powerful isometric diagrams.

Remember the basic isometric transformation from the beginning of the article?

const isoMatrix = new DOMMatrixReadOnly()
    .rotate(30)
    .skewX(-30)
    .scale(1, 0.8602);

In the JointJS library, we can apply this transformation to the whole object which stores all SVG elements, and then simply apply the object-specific transformations on top of this.

Isometric grid rendering

JointJS has great capabilities in the rendering of custom SVG markup. Utilizing JointJS, we can generate a path which is aligned to an untransformed grid, and have it transformed automatically with the grid thanks to the global paper transformation that we mentioned previously. You can see the grid, and how we interpret the coordinate system in the demo below. Note that we can dynamically change the paper transformation which allows us to change the view on the fly:

Creating a custom isometric SVG element

Here we show an custom SVG Isometric shape in JointJS. In our example, we use the isometricHeight property to store information about a third dimension, and then use it to render our isometric object. The following snippet shows how you can call the custom createIsometricElement function to alter object properties:

const element = createIsometricElement({
    isometricHeight: GRID_SIZE * 3,
    size: { width: GRID_SIZE * 3, height: GRID_SIZE * 6 },
    position: { x: GRID_SIZE * 6, y: GRID_SIZE * 6 }
});

In the following demo, you can see that our custom isometric element can be moved like an ordinary element on the isometric grid. You can change dimensions by altering parameters of the createIsometricElement function in the source code (when you click “Edit on CodePen”):

Z-index calculation in isometric diagrams

One of the problems with an isometric view is placing elements respective to their relative position. Unlike in a 2D plane, in an isometric view objects have perceived height and can be placed one behind the other. We can achieve this behavior in SVG by placing them into the DOM in the right order. To define the order in our case, we can use the JointJS z attribute which allows sending the correct element to the background, so that it can be overlapped/hidden by the other element as expected. You can find more information about this problem in a great article by Andreas Hager.

We decided to sort the elements using the topological sorting algorithm. The algorithm consists of two steps. First, we need to create a special graph, and then we need to use a depth-first search for that graph to find the correct order of elements.

As the first step, we need to populate the initial graph — for each object we need to find all objects behind it. We can do that by comparing the positions of their bottom sides. Let’s illustrate this step with images — let’s, for example, take three elements which are positioned like this:

We have marked the bottom side of each object in the second image. Using this data, we will create a graph structure which will model topological relations between elements. In the image, you can see how we define the points on the bottom side — we can find the relative position of all elements by comparing aMax and bMin points. We define that if the x and y coordinates of point bMin are less than the coordinates of point aMax , then object b is located behind object a.

Comparing the three elements from our previous example, we can produce the following graph:

After that, we need to use a variation of the depth-first search algorithm to find the correct rendering order. A depth-first search allows us to visit graph nodes according to the visibility order, starting from the most distant one. Here is a library-agnostic example of the algorithm:

const sortElements = (elements: Rect[]) => {
    const nodes = elements.map((el) => {
        return {
            el: el,
            behind: [],
            visited: false,
            depth: null,
        };
    });

    for (let i = 0; i < nodes.length; ++i) {
        const a = nodes[i].el;
        const aMax = aBBox.bottomRight();

        for (let j = 0; j < nodes.length; ++j) {
            if (i != j) {
                const b = nodes[j].el;
                const bMin = bBBox.topLeft();
                if (bMin.x < aMax.x && bMin.y < aMax.y) {
                    nodes[i].behind.push(nodes[j]);
                }
            }
        }
    }

    const sortedElements = depthFirstSearch(nodes);
    return sortedElements;
};

const depthFirstSearch = (nodes) => {
    let depth = 0;
    let sortedElements = [];

    const visitNode = (node) => {
        if (!node.visited) {
            node.visited = true;

            for (let i = 0; i < node.behind.length; ++i) {
                if (node.behind[i] == null) {
                    break;
                } else {
                    visitNode(node.behind[i]);
                    delete node.behind[i];
                }
            }

            node.depth = depth++;
            sortedElements.push(node.el);
        }
    };

    for (let i = 0; i < nodes.length; ++i) {
        visitNode(nodes[i]);
    }

    return sortedElements;
};

This method can be implemented easily using the JointJS library — in the following CodePen, we use a special JointJS event to recalculate z-indexes of our elements whenever the position of an element is changed. As outlined above, we use a special z property of the element model to specify rendering order and assign it during the depth-first traversal. (Note that the algorithm’s behavior is undefined in the case of intersecting elements, due to the nature of implementation of isometric objects.)

The JointJS demo

We have created a JointJS demo which combines all of these methods and techniques, and also allows you to easily switch between 2D and isometric SVG markup. Crucially, as you can see, the powerful features of JointJS (which allow us to move elements, to connect them with links, and to create tools to edit them, among others) work just as well in the isometric view as they do in 2D.

You can see the demo here.

Throughout this article, we used our open-source JointJS library for illustration. However, since you were so thorough with your exploration, we would like to extend to you an invitation to our no-commitment 30-day trial of JointJS+, an advanced commercial extension of JointJS. It will allow you to experience additional powerful tools for creating delightful diagrams.

How to write a simple JSON visualizer using JointJS+

Arthur Khokhlov — Mon, 31 Oct 2022 16:09:34 +0000

The JSON format - as a widely used form of data storage and representation - lacks a simple and convenient view of complex data, forcing developers to use external tools for data visualization and thus more productive work.

At JointJS, we decided to regularly share code samples to help you create visual applications faster and with less effort, and one of them is a simple JSON visualizer.

This gives us the opportunity to connect with other developers and diagramming enthusiasts, hear their ideas and solve their pain points. We often hear them complain about the lack of an intuitive way to visualize their JSON data.

That's why we created this simple demo application that demonstrates how to use a built-in automatic layout to position nodes and add table-like shapes to organize object properties into tables where values have different styles depending on their type.

We release new demos every Wednesday to help developers get inspired and bring their ideas to life faster. If you want to learn with us, follow us on CodePen or join the conversation on Github.

Happy diagramming!