JointJS

https://docs.jointjs.com/learn/
Admin
JointJS is a JavaScript library for creating interactive diagramming applications with shapes,...
Tokens:181,688
Snippets:1,955
Trust Score:9.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Quickstart Application with TypeScript

Source: https://docs.jointjs.com/learn/integration/typescript

This example demonstrates a basic JointJS application structure using TypeScript. It highlights the use of type specifications for custom functions, importing types from `@joint/core` and `@joint/plus`.

```typescript
import { dia, ui, util } from "@joint/core";
import {
  JointUIElement,
  JointUIElementView,
  JointUIElementViewOptions,
} from "@joint/plus";

// Define custom element attributes
interface MyElementAttributes extends dia.Element.Attributes {
  customText?: string;
}

// Define custom element model
class MyElement extends dia.Element<MyElementAttributes> {
  defaults(): MyElementAttributes {
    return {
      ...super.defaults(),
      type: "my.Element",
      customText: "Hello",
      position: { x: 100, y: 100 },
      size: { width: 100, height: 40 },
      attrs: {
        rect: { fill: "#2ECC71", stroke: "none" },
        text: {
          text: "Hello",
          fill: "#FFFFFF",
          fontSize: 14,
          fontWeight: "bold",
          textAnchor: "middle",
          x: "50%",
          y: "50%",
          style: {
            textVerticalAlign: "middle",
          },
        },
      },
    };
  }
}

// Define custom element view
class MyElementView extends dia.ElementView<MyElement> {
  // Override the model's `defaults` method to return the default attributes for the element.
  defaults(): dia.ElementView.FullyQualifiedOptions {
    return {
      ...super.defaults(),
      // Use the `customText` attribute to set the text content of the element.
      model: new MyElement({ customText: "Hello JointJS!" }),
    };
  }

  // Override the `render` method to update the element's text content.
  render(): this {
    super.render();
    this.update();
    return this;
  }

  // Override the `update` method to update the element's text content.
  update(): void {
    super.update();
    const text = this.model.get("customText");
    this.model.attr("text/text", text);
  }
}

// Register the custom element and its view
dia.elementRegister(MyElement, { view: MyElementView });

// Create a graph and paper
const graph = new dia.Graph();
const paper = new dia.Paper({
  el: document.getElementById("paper"),
  model: graph,
  width: 600,
  height: 400,
  gridSize: 1,
  background: {
    color: "#F0F0F0",
  },
});

// Create an instance of the custom element
const element = new MyElement({
  position: { x: 100, y: 100 },
  customText: "Hello JointJS!",
});

// Add the element to the graph
graph.add(element);

// Create a scroller
const scroller = new ui.PaperScroller({
  paper,
  autoResizePaper: true,
  cursor: "default",
});

// Bind the scroller to the paper
scroller.render().el.style.transform = "translateZ(0)";

// Bind the scroller to the paper
$(paper.el).append(scroller.render().el);

// Center the paper on the element
scroller.center();

```

--------------------------------

### Install and Open Dialog (ESM)

Source: https://docs.jointjs.com/learn/features/popups-and-menus/dialog

Access the Dialog plugin via the `ui` namespace, create an instance, and call the `open()` method. This example uses ESM imports.

```javascript
import { ui } from '@joint/plus';

const dialog = new ui.Dialog({
    width: 300,
    title: 'My title',
    content: 'This is my dialog box.'
});

dialog.open();

```

--------------------------------

### Install @joint/cli Globally and Download Demo

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Install the @joint/cli tool globally using npm, then use the 'joint download' command to get the 'kitchen-sink/react-ts' demo.

```bash
npm install -g @joint/cli  
joint download kitchen-sink/react-ts  

```

--------------------------------

### Install Visio Plugin with yarn

Source: https://docs.jointjs.com/learn/features/export-import/visio

Install the Visio plugin package using yarn.

```bash
yarn add @joint/format-visio@file:joint-visio.tgz  
```

--------------------------------

### Install Visio Plugin with npm

Source: https://docs.jointjs.com/learn/features/export-import/visio

Install the Visio plugin package using npm.

```bash
npm add joint-visio.tgz  
```

--------------------------------

### Set Production Token and Install Packages (Bun)

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Export the production JointJS npm token to your environment variable and then run `bun install` to install production packages.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"
bun install
```

--------------------------------

### Install Visio Plugin with pnpm

Source: https://docs.jointjs.com/learn/features/export-import/visio

Install the Visio plugin package using pnpm.

```bash
pnpm add ./joint-visio.tgz  
```

--------------------------------

### Set Production Token and Install Packages (NPM)

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Export the production JointJS npm token to your environment variable and then run `npm install` to install production packages.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"
npm install
```

--------------------------------

### Set Production Token and Install Packages (Yarn)

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Export the production JointJS npm token to your environment variable and then run `yarn install` to install production packages.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"
yarn install
```

--------------------------------

### Basic JointJS Application Setup

Source: https://docs.jointjs.com/learn/integration/mxgraph

This snippet shows the fundamental structure for a JointJS application. It includes parsing mxGraph XML, creating JointJS cells, and initializing the graph and paper components. Use this as a starting point for your migration.

```javascript
const doc = parseXML(xml);
const cells = createCells(doc);

const paperContainer = document.getElementById('paper');
const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
    model: graph,
    cellViewNamespace: shapes,
    width: 1040,
    height: 300,
    gridSize: 10,
    drawGrid: { name: 'mesh' },
    async: true,
    sorting: dia.Paper.sorting.APPROX,
    background: { color: '#F3F7F6' }
});
paperContainer.appendChild(paper.el);

graph.addCells(cells);
```

--------------------------------

### All Standard Shapes Example

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/standard

This example demonstrates the usage of all standard shapes available in the JointJS library. Ensure you have the necessary JointJS setup and dependencies.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>JointJS - Standard Shapes</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jointjs@3.6.3/dist/joint.core.min.css" />
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    .joint-paper {
      border: 1px solid #ccc;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/backbone@1.4.1/backbone.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jointjs@3.6.3/dist/joint.min.js"></script>

  <script>
    const graph = new joint.dia.Graph();

    const paper = new joint.dia.Paper({
      el: document.body,
      model: graph,
      width: 1000,
      height: 600,
      gridSize: 10,
      drawGrid: true,
      background: {
        color: '#f0f0f0'
      }
    });

    const rect = new joint.shapes.standard.Rectangle({
      position: { x: 50, y: 50 },
      size: { width: 100, height: 50 },
      attrs: { rect: { fill: '#2ECC71' }, text: { text: 'Rectangle', fill: '#fff' } }
    });

    const ellipse = new joint.shapes.standard.Ellipse({
      position: { x: 200, y: 50 },
      size: { width: 80, height: 40 },
      attrs: { ellipse: { fill: '#3498DB' }, text: { text: 'Ellipse', fill: '#fff' } }
    });

    const circle = new joint.shapes.standard.Circle({
      position: { x: 350, y: 50 },
      size: { radius: 30 },
      attrs: { circle: { fill: '#E74C3C' }, text: { text: 'Circle', fill: '#fff' } }
    });

    const line = new joint.shapes.standard.Line({
      source: { x: 50, y: 150 },
      target: { x: 150, y: 150 },
      attrs: { line: { stroke: '#F39C12', 'stroke-width': 3 } }
    });

    const polyline = new joint.shapes.standard.Polyline({
      vertices: [{ x: 200, y: 150 }, { x: 250, y: 200 }, { x: 300, y: 150 }],
      attrs: { polyline: { stroke: '#9B59B6', 'stroke-width': 3 } }
    });

    const polygon = new joint.shapes.standard.Polygon({
      position: { x: 350, y: 150 },
      size: { width: 70, height: 70 },
      attrs: { polygon: { fill: '#1ABC9C' }, text: { text: 'Polygon', fill: '#fff' } }
    });

    const pathShape = new joint.shapes.standard.Path({
      position: { x: 50, y: 250 },
      size: { width: 100, height: 100 },
      attrs: { path: { d: 'M 10 10 L 90 10 L 90 90 L 10 90 z', fill: '#F1C40F' }, text: { text: 'Path', fill: '#333' } }
    });

    const image = new joint.shapes.standard.Image({
      position: { x: 200, y: 250 },
      size: { width: 100, height: 100 },
      attrs: { image: { 'xlink:href': 'https://via.placeholder.com/100' } }
    });

    const textShape = new joint.shapes.standard.TextBlock({
      position: { x: 350, y: 250 },
      size: { width: 100, height: 50 },
      attrs: { text: { text: 'TextBlock', 'font-size': 14, fill: '#333' } }
    });

    const header = new joint.shapes.standard.HeaderedRectangle({
      position: { x: 50, y: 400 },
      size: { width: 150, height: 70 },
      attrs: { rect: { fill: '#34495E' }, text: { text: 'Headered Rectangle', fill: '#fff' } },
      headerText: 'Header'
    });

    const dev = new joint.shapes.standard.DevNode({
      position: { x: 250, y: 400 },
      size: { width: 120, height: 60 },
      attrs: { rect: { fill: '#7F8C8D' }, text: { text: 'DevNode', fill: '#fff' } }
    });

    graph.addCells([rect, ellipse, circle, line, polyline, polygon, pathShape, image, textShape, header, dev]);
  </script>
</body>
</html>
```

--------------------------------

### Set Production Token and Install Packages (Pnpm)

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Export the production JointJS npm token to your environment variable and then run `pnpm install` to install production packages.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"
pnpm install
```

--------------------------------

### Install Directed Graph Package (yarn)

Source: https://docs.jointjs.com/learn/features/automatic-layouts/directed-graph

Install the Directed graph open-source package using yarn.

```bash
yarn add @joint/layout-directed-graph  
```

--------------------------------

### Install Directed Graph Package (npm)

Source: https://docs.jointjs.com/learn/features/automatic-layouts/directed-graph

Install the Directed graph open-source package using npm.

```bash
npm add @joint/layout-directed-graph  
```

--------------------------------

### Install BPMN Import Plugin with yarn

Source: https://docs.jointjs.com/learn/features/export-import/bpmn/import

Install the BPMN import plugin using yarn by referencing the local tgz file.

```bash
yarn add @joint/format-bpmn-import@file:joint-bpmn-import.tgz  
```

--------------------------------

### Emulate User Interaction to Start Drawing Path

Source: https://docs.jointjs.com/learn/features/vector-editor/path-drawer

Programmatically initiate path drawing by emulating a pointer down event. This example shows how to create a PathDrawer instance and then call its `onPointerDown` method.

```javascript
paper.on('blank:pointerdown', function(event) {
    const vCanvas = V('svg', {
        width: 400,
        height: 400
    }).appendTo(this.paper.el);

    const pathDrawer = this.pathDrawer = new ui.PathDrawer({
        el: vCanvas.node
    });

    pathDrawer.onPointerDown(event);
}, this);

```

--------------------------------

### Install Directed Graph Package (pnpm)

Source: https://docs.jointjs.com/learn/features/automatic-layouts/directed-graph

Install the Directed graph open-source package using pnpm.

```bash
pnpm add @joint/layout-directed-graph  
```

--------------------------------

### Install NPM Packages

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Run `npm install` after configuring your `.npmrc` and `package.json`. NPM will resolve packages from the JointJS registry.

```bash
npm install
```

--------------------------------

### Install Snaplines Plugin (ESM)

Source: https://docs.jointjs.com/learn/features/snap-to-objects/snaplines-for-elements

Import and create an instance of Snaplines using the ui namespace. A paper instance is required.

```javascript
import { ui } from '@joint/plus';

const snaplines = new ui.Snaplines({
    paper: paper
});

```

--------------------------------

### Install Keyboard Plugin (ESM)

Source: https://docs.jointjs.com/learn/features/keyboard-shortcuts

Import and create an instance of the Keyboard plugin using the ui namespace for ESM environments.

```javascript
import { ui } from '@joint/plus';

const keyboard = new ui.Keyboard();
```

--------------------------------

### Install Bun Packages

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Run `bun install` after configuring your `.npmrc` or `bunfig.toml` and `package.json`. Bun will resolve packages from the JointJS registry.

```bash
bun install
```

--------------------------------

### Install BPMN Import Plugin with npm

Source: https://docs.jointjs.com/learn/features/export-import/bpmn/import

Install the BPMN import plugin using npm by adding the tgz file to your project.

```bash
npm add joint-bpmn-import.tgz  
```

--------------------------------

### Install VSM Shapes with pnpm

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/vsm

Install the VSM shapes package using pnpm.

```bash
pnpm add ./joint-vsm-shapes.tgz  
```

--------------------------------

### Install Playwright and Browsers

Source: https://docs.jointjs.com/learn/testing/playwright

Install the Playwright test runner and supported browsers. Ensure you are in the project root directory before running these commands.

```bash
cd project-root

npm i -D @playwright/test@1.22.1

npx playwright install
```

--------------------------------

### Install Dependencies for UMD Distribution

Source: https://docs.jointjs.com/learn/features/export-import/visio

Install necessary dependencies for the UMD distribution of the Visio plugin using npm.

```bash
npm install  
```

--------------------------------

### Angular Component Setup

Source: https://docs.jointjs.com/learn/integration/angular

Initial setup for an Angular component, including necessary imports and decorators. This forms the base for integrating JointJS+.

```typescript
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {}
```

--------------------------------

### Install MSAGL Layout with npm

Source: https://docs.jointjs.com/learn/features/automatic-layouts/msagl

Install the MSAGL layout package using npm. This is the first step before importing and using it in your project.

```bash
npm install @joint/layout-msagl  
```

--------------------------------

### Install BPMN Import Plugin with pnpm

Source: https://docs.jointjs.com/learn/features/export-import/bpmn/import

Install the BPMN import plugin using pnpm by adding the local tgz file to your project.

```bash
pnpm add ./joint-bpmn-import.tgz  
```

--------------------------------

### Install and Render RadioGroup with Modules

Source: https://docs.jointjs.com/learn/features/form-controls/radio-group

Import the RadioGroup from the '@joint/plus/ui' namespace and create a new instance. Render the widget and append its element to the DOM.

```javascript
import { ui } from '@joint/plus';

const radioGroup = new ui.RadioGroup({
    name: 'myRadioGroup',
    options: [{
        content: 'Value 1',
        value: 1
    }, {
        content: 'Value 2',
        value: 2
    }, {
        content: 'Value 3',
        value: 3
    }]
});

document.body.appendChild(radioGroup.render().el);
```

--------------------------------

### Install and Initialize PaperScroller (ES Modules)

Source: https://docs.jointjs.com/learn/features/zoom-and-scroll

Import PaperScroller from '@joint/plus' and initialize it with a Paper instance. Render the PaperScroller and append its element to the DOM.

```javascript
import { dia, shapes, ui } from '@joint/plus';

const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
    width: 2000,
    height: 2000,
    model: graph,
    cellViewNamespace: shapes
});

const paperScroller = new ui.PaperScroller({
    paper: paper
});

document.getElementById('paper').appendChild(paperScroller.render().el);
```

--------------------------------

### New Layers API Example

Source: https://docs.jointjs.com/learn/release-notes/4.2.0

Demonstrates the basic usage of the new Layers API for managing graph elements. This example shows how to add and interact with layers.

```javascript
const graph = new joint.dia.Graph({}, {
    layers: {
        // Enable layers support
        enabled: true
    }
});

const paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    model: graph,
    background: {
        color: '#f9f9f9'
    }
});

// Add a new layer
const layer1 = graph.addLayer({
    id: 'layer-1',
    name: 'My First Layer',
    background: {
        color: '#31d0c2'
    }
});

// Add a new layer with a different z-index
graph.addLayer({
    id: 'layer-2',
    name: 'My Second Layer',
    z: 100,
    background: {
        color: '#888'
    }
});

// Add a cell to a specific layer
const rect1 = new joint.shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 40 },
    attrs: {
        body: { fill: 'blue' },
        label: { text: 'Rect 1', fill: 'white' }
    }
});

layer1.add(rect1);

// Add a cell to the default layer
const rect2 = new joint.shapes.standard.Rectangle({
    position: { x: 300, y: 100 },
    size: { width: 100, height: 40 },
    attrs: {
        body: { fill: 'red' },
        label: { text: 'Rect 2', fill: 'white' }
    }
});

graph.addCell(rect2);

// Toggle layer visibility
setTimeout(() => {
    layer1.toggle();
}, 2000);

// Remove a layer
setTimeout(() => {
    graph.removeLayer('layer-2');
}, 4000);
```

--------------------------------

### Install JointJS Packages

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Install JointJS packages using various package managers after configuring the registry and token.

```npm
npm install @joint/plus
```

```yarn
yarn add @joint/plus
```

```pnpm
pnpm add @joint/plus
```

```bun
bun add @joint/plus
```

--------------------------------

### BPMN Import and Export Example

Source: https://docs.jointjs.com/learn/features/export-import/bpmn

Demonstrates the usage of JointJS+ BPMN import and export plugins. This example shows how to integrate these functionalities into your application.

```javascript
import { dia, ui, shapes } from "@jointjs/rappid";
import { BPMN } from "@jointjs/bpmn";

const graph = new dia.Graph();
const paper = new dia.Paper({
    el: document.getElementById("paper"),
    model: graph,
    width: 1000,
    height: 600,
    gridSize: 10,
    drawGrid: true,
    background: {
        color: "#f8f8f8"
    }
});

const bpmn = new BPMN({
    graph,
    paper
});

// Export BPMN
document.getElementById("export").onclick = function() {
    const xml = bpmn.export();
    console.log(xml);
};

// Import BPMN
document.getElementById("import").onclick = function() {
    // Replace with your BPMN XML string
    const xml = "<bpmn:definitions xmlns:bpmn=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" ... ";
    bpmn.import(xml);
};

// Example BPMN diagram
const bpmnXml = `
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_1" isExecutable="false">
    <bpmn:startEvent id="StartEvent_1" />
    <bpmn:task id="Task_1" name="Task 1" />
    <bpmn:endEvent id="EndEvent_1" />
    <bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
    <bpmn:sequenceFlow id="SequenceFlow_2" sourceRef="Task_1" targetRef="EndEvent_1" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_1" bpmnElement="StartEvent_1">
        <dc:Bounds x="173" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="BPMNShape_Task_1" bpmnElement="Task_1">
        <dc:Bounds x="250" y="80" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="BPMNShape_EndEvent_1" bpmnElement="EndEvent_1">
        <dc:Bounds x="400" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_1" bpmnElement="SequenceFlow_1">
        <di:waypoint x="209" y="120" />
        <di:waypoint x="250" y="120" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_2" bpmnElement="SequenceFlow_2">
        <di:waypoint x="350" y="120" />
        <di:waypoint x="400" y="120" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>
`;

bpmn.import(bpmnXml);

```

--------------------------------

### Install Keyboard Plugin (UMD)

Source: https://docs.jointjs.com/learn/features/keyboard-shortcuts

Include the UMD script in your HTML and access the Keyboard plugin via the joint.ui namespace.

```html
<script src="joint.js"></script>
<script src="joint.ui.keyboard.js"></script>
```

```javascript
const keyboard = new joint.ui.Keyboard();
```

--------------------------------

### Install PathEditor with JavaScript

Source: https://docs.jointjs.com/learn/features/vector-editor/path-editor

Instantiate PathEditor using the ui namespace. Requires a reference to an SVG path element.

```javascript
import { ui } from '@joint/plus';

new ui.PathEditor({
    pathElement: document.querySelector('path')
});

```

--------------------------------

### Navigate to Vue Project Directory

Source: https://docs.jointjs.com/learn/integration/vue

Change the current directory to the newly created Vue project folder to proceed with further setup.

```bash
cd joint-plus-tutorial-vue  

```

--------------------------------

### Download Demo to the Current Directory

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Download the 'kitchen-sink/react-ts' demo directly into the current directory. Use the '--force' option if the directory is not empty.

```bash
npx @joint/cli download kitchen-sink/react-ts .  

```

--------------------------------

### Install MSAGL Layout via NPM for UMD

Source: https://docs.jointjs.com/learn/features/automatic-layouts/msagl

Install the MSAGL layout package using npm, specifically for UMD distribution. This is part of the manual setup for using the UMD version.

```bash
npm add @joint/layout-msagl  
```

--------------------------------

### Open Halo for a Specific Element

Source: https://docs.jointjs.com/learn/quickstart/editing-overlay

This code shows how to programmatically open the Halo for a specific element when the application starts. It uses `paper.findViewByModel()` to get the view of the element.

```javascript
openHalo(paper.findViewByModel(rect1));

```

--------------------------------

### Install and Initialize Navigator (ES Modules)

Source: https://docs.jointjs.com/learn/features/minimap

Import the ui module and create a new Navigator instance using ES modules. Append the navigator's DOM element to a container and render it. This is suitable for modern JavaScript projects using module bundlers.

```javascript
import { ui } from '@joint/plus';

const nav = new ui.Navigator({
    paperScroller,
    width: 300,
    height: 200,
    padding: 10,
    zoomOptions: { max: 2, min: 0.2 }
});

document.getElementById('navigator').appendChild(nav.el);

nav.render();

```

--------------------------------

### Run a Downloaded Demo Application

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Navigate into the downloaded demo's directory and run the application using npm commands. Ensure you have configured the npm registry for @joint/plus.

```bash
cd kitchen-sink-react-ts  
npm install  
npm start  

```

--------------------------------

### Example Data Model for Guided Editing

Source: https://docs.jointjs.com/learn/release-notes/4.2.0

This JSON structure represents a minimal data model for a diagram, capturing essential node information and relationships without visual details. It serves as the single source of truth for generating the visual graph.

```json
{
    "start": {
        "label": "New support ticket",
        "to": [{ "id": "ai-agent" }]
    },
    "ai-agent": {
        "to": [
            { "label": "Solved", "id": "action-1" },
            { "label": "Needs human support", "id": "action-3" }
        ],
        "label": "Customer support AI agent"
    },
    "action-1": {
        "to": [{ "id": "action-2" }],
        "label": "Update Ticket"
    },
    "action-2": {
        "to": [],
        "label": "Send to Slack"
    },
    "action-3": {
        "to": [{ "id": "decision-1" }],
        "label": "Create Issue"
    },
    "decision-1": {
        "to": [
            { "label": "Low priority", "id": "action-4" },
            { "label": "High priority", "id": "action-5" }
        ],
        "label": "Check priority"
    },
    "action-4": {
        "to": [],
        "label": "Send to Slack"
    },
    "action-5": {
        "to": [],
        "label": "Send SMS"
    }
}
```

--------------------------------

### Navigate to Project Directory

Source: https://docs.jointjs.com/learn/integration/svelte

Change into the newly created Svelte project directory.

```bash
cd joint-plus-tutorial-svelte  

```

--------------------------------

### Install and Create Tooltip Instance (ESM)

Source: https://docs.jointjs.com/learn/features/tooltips

Import the Tooltip class from '@joint/plus' and create a new instance with configuration options. This is the recommended approach for modern JavaScript projects.

```javascript
import { ui } from '@joint/plus';

const tooltip = new ui.Tooltip({
    target: '[data-tooltip]',
    direction: 'auto',
    padding: 10
});

```

--------------------------------

### List Available Demos with @joint/cli

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Use this command to see all available demo applications and their variants. This helps in choosing a demo to download.

```bash
npx @joint/cli list  

```

--------------------------------

### Install VSM Shapes with yarn

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/vsm

Install the VSM shapes package using yarn.

```bash
yarn add @joint/shapes-vsm@file:joint-vsm-shapes.tgz  
```

--------------------------------

### Install VSM Shapes with npm

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/vsm

Install the VSM shapes package using npm.

```bash
npm add joint-vsm-shapes.tgz  
```

--------------------------------

### Navigate to Project Directory

Source: https://docs.jointjs.com/learn/integration/react

Change the current directory to the newly created React project.

```bash
cd joint-plus-tutorial-react  

```

--------------------------------

### Initialize and Render Color Palette

Source: https://docs.jointjs.com/learn/features/form-controls/color-palette

Demonstrates how to initialize a new Color Palette with a list of color options and render it into the document body. This is useful for creating color selection UIs.

```javascript
const colorPalette = new joint.ui.ColorPalette({
  content: 'transparent',
  icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABrCAYAAACffRcyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABPxJREFUeNrsnc9rU1kUx+/LS2LTBtI4VMiqjYjiQgQ3IoIUuhvGUmYzUBgV8SdWLS7sooLgxm0XgjKg0P+gMDC7ggjDzGwGOt1psS2WBptioiYVmrbxnviiSc17eaPvvdzz7vcLlyTk5vVyPtzzzv3mtDWq1arYrVwuNyAfxuUYkaNfQEFoWY4ZOaYymczS7jeNRlASUC9NlOMs4tZRTdNGkcCKX4GyID2V4yjipITm5Bisw4oAkrIiFk8tNp9AWekOkNSENVVLfaurq1Q4LCImSisbtao7R5mmWTQMYxPx8l6yRohvb2/3tpk2HrVKcFtA6XT6WSwWKyOk/qlSqfQUCoVTDsBGIk7nJEAKRhRjirXDlP6I024CpGBhUczt3rcFhXtS8HKKeQTh4aHot35Q3vyObW1tpdvNSyQSi8lk8iWu1yFQtGg59rWbJyuZNVzv+4XUx0QABVCa68+/0mJi8oj4/Y99Xlwuioj6BOn8lSHx4UOs9vr0j2vYUYrJ/G++6zOkRKIihn9aQepTzV14viB6Lo5lP0N68mhWnDxRACjFIP1w9YYwNjZMryEBlNeQSmVR7e7e9hoSib44rLasMqLRtb6+vlm7D5ZKpf3ycNfj4qCY2tnZ2dM2t5tmSY4NbtejexKlO9pJBOndbw/ym4cPtd0ArRyMfD4/ZHeo/uaqz61N4vTDGxWPx9dSqdQ8q+tRdXfhGhUOtXRnPH44u3nwwDE/HAykPi9KcB/uSQDFEBJAMYEEUEwgAdT3OA4BQgIoBRwHgGLiOAAUE8fBrXzvmaATPR0W3TgEdPhU5Xo1x+Hy9WbHQR5m5QnZk/XJOa8DAeW2h0A3x8Ht+pD6GJfgAMUcEkDZQSLdmfhbFUgAZQfp9q1/xK+jKyotUXtQTY5DHdLYlZeqrVNrUE2Og8KQtAbV5DgoDklbUI2OAwdIJO16Jhp7HOh1eXLizcbPw1tBrw89E24dB2snSUjZTqwPPRP/pwRXPN3pB4o5JD1AhQBS+EGFBFKoQXFxHLQGxclx0BYUN8dBS1CR9yWRuneflePgVqHpmTCKb83kxWvZyOJSV4PjkJUn0KwK62txgNawZyKfj4vRc0Pi1UpXpx0H9EzYRzAuRn4hSL1hS3fhAaUJJN6gNILEF5RmkFiCoupON0jsQNE5KXnmQlY3SKxAEaS9V2+K+jlJJ0hsQNUhxV4sCB0h1VK+6j0TNcdBprtdjkPgPQ7omQiZ46Bfz4SGJTg/UIDEABQgMQAFSOqD0tVxYAVKZ8eBDSjdHQcWoOA4uFfHeia49Tjo2TMRYschPD0TKMEZgAIkBqAAiQEoQFIfFBwHBqDgODAABceBASg4Dj7cQrzumQhrj0O4eibgODDomUAJzuAeBUhMQF0aOw5IHECVy3FA8lfe/HvXu5P/1h4V+husANVKAMTXmYAACqnPD9EJ3M3hzm0PgW7XCwyU29/6wPWQ+nCPghQAVa1W4whPsHKKuS0oeUPsrVQqPQhfMKJYU8ydQC3bvVkoFE4BVjCQKNYOU5ap6puR46bdrlpfXx82TbNoGMYmQupPunPaSZZm6BveAflkESFTWtlIJpNZkk+mEQtlNU2M6sXEuBxziIlymrPYfKr6JLGifBgELOUgDVpsvpTnDbCQBhVId42QSIasOr6alcvlBqwtNyJHP+IWiJatCnzKqhua1BIUpJ4+CjAAVnYzLhKE5pcAAAAASUVORK5CYII=' 
});

document.body.appendChild(colorPalette.render().el); 
```

--------------------------------

### Install Graphlib Package

Source: https://docs.jointjs.com/learn/features/export-import/graphlib

Install the Graphlib package as an additional project dependency using yarn.

```bash
yarn add @dagrejs/graphlib  
yarn install  
```

--------------------------------

### Install Directed Graph Package

Source: https://docs.jointjs.com/learn/features/export-import/graphlib

Install the @joint/layout-directed-graph package as a project dependency using yarn.

```bash
yarn add @joint/layout-directed-graph  
yarn install  
```

--------------------------------

### Initialize Toolbar with Custom Tools

Source: https://docs.jointjs.com/learn/features/toolbar

Import the Toolbar from the `ui` namespace and create a new instance. Pass `tools` definitions to specify which Widgets should be added to the Toolbar.

```javascript
import { ui } from '@joint/plus';

const toolbar = new ui.Toolbar({
    tools: [
        { type: 'checkbox' },
        { type: 'range', name: 'slider', min: 0, max: 10, step: 1 },
        { type: 'separator' },
        { type: 'toggle', name: 'toggle', label: ''},
        'separator',  // also possible, use defaults
        { type: 'inputText' },
        { type: 'button', name: 'ok', text: 'Ok' },
        { type: 'button', name: 'cancel', text: 'Cancel' },
        { type: 'separator' }
    ]
});

document.getElementById('toolbar-holder').appendChild(toolbar.render().el);
```

--------------------------------

### Initialize Force Directed Layout

Source: https://docs.jointjs.com/learn/features/automatic-layouts/force-directed

Sets up the ForceDirected layout with graph, layout area, and gravity center.

```javascript
const forceLayout = new layout.ForceDirected({
    graph: graph,
    layoutArea: {
        x: 0,
        y: 0,
        width: 800,
        height: 800
    },
    gravityCenter: { x: 400, y: 400 }
});
```

--------------------------------

### Install Pnpm Packages

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Run `pnpm install` after configuring your `.npmrc` and `package.json`. Pnpm will resolve packages from the JointJS registry.

```bash
pnpm install
```

--------------------------------

### Install Yarn Packages

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Run `yarn install` after configuring your `.npmrc` and `package.json`. Yarn will resolve packages from the JointJS registry.

```bash
yarn install
```

--------------------------------

### Download Demo from a GitHub Fork and Branch

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Download a demo ('kitchen-sink/js') from a specific GitHub user's fork and branch ('dev'). This allows testing forks or specific development branches.

```bash
npx @joint/cli download kitchen-sink/js --owner myGitHubUser --branch dev  

```

--------------------------------

### Download Demo to a Custom Destination Folder

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Specify a custom folder name (e.g., 'my-app') when downloading the 'kitchen-sink/react-ts' demo. This allows for better organization of downloaded projects.

```bash
npx @joint/cli download kitchen-sink/react-ts my-app  

```

--------------------------------

### Download a Demo App (React TS) with @joint/cli

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Download the 'kitchen-sink/react-ts' demo application into your current working directory. This command requires the @joint/cli tool to be installed.

```bash
npx @joint/cli download kitchen-sink/react-ts  

```

--------------------------------

### Install MSAGL Layout with pnpm

Source: https://docs.jointjs.com/learn/features/automatic-layouts/msagl

Install the MSAGL layout package using pnpm. This command adds the package as a dependency to your project.

```bash
pnpm add @joint/layout-msagl  
```

--------------------------------

### Initialize and Render Toolbar

Source: https://docs.jointjs.com/learn/quickstart/toolbar

Creates a new Toolbar instance with two button tools ('json' and 'svg') and renders it into the DOM. Ensure the target HTML element is styled appropriately.

```javascript
const toolbar = new ui.Toolbar({
    tools: [
        {
            type: 'button',
            name: 'json',
            text: 'Export JSON'
        },
        {
            type: 'button',
            name: 'svg',
            text: 'Export SVG'
        }
    ]
});
toolbar.render();
document.getElementById('toolbar').appendChild(toolbar.el);

```

--------------------------------

### Get Highlighters from CellView

Source: https://docs.jointjs.com/learn/features/highlighters

Demonstrates how to retrieve highlighters from a CellView. You can get all highlighters, a specific highlighter by ID, or all highlighters of a particular type.

```javascript
import { dia, highlighters } from '@joint/core';  
  
// Get all the highlighters (an array) from the CellView  
dia.HighlighterView.get(cellView);  
  
// Get the highlighter with ID `my-highlighter` from the CellView  
dia.HighlighterView.get(cellView, 'my-highlighter');  
  
// Get all Mask highlighters from the cellView  
highlighters.mask.get(cellView);  
  
// Get Stroke Highlighter with ID `my-highlighter` from the cellView.  
// If there is no such highlighter (ID or Type does not match, `null` is returned).  
highlighters.stroke.get(cellView, 'my-highlighter');  
```

--------------------------------

### Initialize Tree Layout View with Options

Source: https://docs.jointjs.com/learn/features/drag-and-drop/tree-layout-view

Create a TreeLayout object with custom parent and sibling gap values, then initialize the TreeLayoutView with the paper and the created TreeLayout model. Finally, apply the layout.

```javascript
import { ui, layout } from '@joint/plus';  
  
const graphLayout = new layout.TreeLayout({  
    graph: graph,  
    parentGap: 50,  
    siblingGap: 50  
});  
  
const treeLayoutView = new ui.TreeLayoutView({  
    paper: paper,  
    model: graphLayout  
});  
  
graphLayout.layout();  
```

--------------------------------

### Install BPMN Export Plugin with yarn

Source: https://docs.jointjs.com/learn/features/export-import/bpmn/export

Install the BPMN export plugin using yarn. This command adds the plugin to your project dependencies.

```bash
yarn add @joint/format-bpmn-export@file:joint-bpmn-export.tgz  

```

--------------------------------

### Install BPMN Export Plugin with pnpm

Source: https://docs.jointjs.com/learn/features/export-import/bpmn/export

Install the BPMN export plugin using pnpm. This command adds the plugin to your project dependencies.

```bash
pnpm add ./joint-bpmn-export.tgz  

```

--------------------------------

### Install BPMN Export Plugin with npm

Source: https://docs.jointjs.com/learn/features/export-import/bpmn/export

Install the BPMN export plugin using npm. This command adds the plugin to your project dependencies.

```bash
npm add joint-bpmn-export.tgz  

```

--------------------------------

### Create and Render ContextToolbar with Actions (UMD)

Source: https://docs.jointjs.com/learn/features/popups-and-menus/context-toolbar

Instantiate ContextToolbar using the UMD global namespace. Define tools, attach event listeners for actions, and render the toolbar. The target can be set to `this`.

```javascript
const ct = new joint.ui.ContextToolbar({
    tools: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' },
        { action: 'maybe', content: 'Maybe' },
        { action: 'sure', content: 'Sure' }
    ],
    target: this
});

ct.on('action:yes', function() { alert('Yes') });
ct.on('action:no', function() { alert('No') });
ct.on('action:maybe', function() { alert('Maybe') });
ct.on('action:sure', function() { alert('Sure') });

ct.render();
```

--------------------------------

### Install MSAGL Layout with yarn

Source: https://docs.jointjs.com/learn/features/automatic-layouts/msagl

Install the MSAGL layout package using yarn. This command is used to add the package to your project's dependencies.

```bash
yarn add @joint/layout-msagl  
```

--------------------------------

### Inspector Inputs Configuration Example

Source: https://docs.jointjs.com/learn/features/property-editor-and-viewer

Example of an 'inputs' object defining color and range input fields for cell attributes like fill, stroke, and strokeWidth.

```javascript
inputs: {
    attrs: {
        body: {
            fill: {
                type: 'color-palette',
                options: [
                    { content: '#FFFFFF' },
                    { content: '#00FF00' },
                    { content: '#000000' }
                ],
                label: 'Fill color',
                group: 'presentation',
                index: 1
            },
            stroke: {
                type: 'color-palette',
                options: [
                    { content: '#FFFFFF' },
                    { content: '#00FF00' },
                    { content: '#000000' }
                ],
                label: 'Outline color',
                group: 'presentation',
                index: 2
            },
            strokeWidth: {
                type: 'range',
                min: 0,
                max: 50,
                unit: 'px',
                label: 'Outline thickness',
                group: 'presentation',
                index: 3
            }
        }
    }
}
```

--------------------------------

### Clipboard Setup with Keyboard and Selection

Source: https://docs.jointjs.com/learn/features/copy-and-paste

Integrate the Clipboard plugin with Keyboard and Selection plugins to enable copy (Ctrl+C), cut (Ctrl+X), and paste (Ctrl+V) actions. The selection.collection holds the currently selected elements.

```javascript
import { ui } from '@joint/plus';  
  
const clipboard = new ui.Clipboard({ useLocalStorage: false });  
  
const selection = new ui.Selection({ paper: paper });  
const keyboard = new ui.Keyboard;  
  
keyboard.on('ctrl+c', () => clipboard.copyElements(selection.collection, paper.model));  
keyboard.on('ctrl+x', () => clipboard.cutElements(selection.collection, paper.model));  
keyboard.on('ctrl+v', () => clipboard.pasteCells(paper.model));  

```

--------------------------------

### Batch Commands using model.trigger('batch:start')

Source: https://docs.jointjs.com/learn/features/undo-redo

Trigger 'batch:start' and 'batch:stop' events on the model directly to manage command batches. This method is beneficial when the model is not a dia.Graph instance.

```javascript
const model = new mvc.Model();
const commandManager = new dia.CommandManager({ model });

model.trigger('batch:start', { name: 'my-batch' });
model.set('attribute1', 'value1');
model.set('attribute2', 'value2');
model.trigger('batch:stop', { name: 'my-batch' });

// The `undo()` will revert both `model` changes at once.
commandManager.undo();

```

--------------------------------

### Initialize Selection Plugin (Simple)

Source: https://docs.jointjs.com/learn/features/selection

Initializes the Selection plugin with only the paper instance. The default collection will be used.

```javascript
const selection = new joint.ui.Selection({
    paper: paper
});
```

--------------------------------

### Validate Namespace Setup with graph.toJSON()

Source: https://docs.jointjs.com/learn/features/customizing-shapes/cell-namespaces

This snippet shows a method for validating cell namespace configuration by serializing the graph to JSON and then re-initializing the graph from that JSON. If no errors occur, the namespace setup is likely correct.

```javascript
graph.fromJSON(graph.toJSON());  

```

--------------------------------

### Initialize Inspector with Options (ES Modules)

Source: https://docs.jointjs.com/learn/features/property-editor-and-viewer

Import the `Inspector` from the `ui` namespace and create a new instance with specified options. Append the rendered Inspector element to a holder in the DOM.

```javascript
import { ui } from '@joint/plus';

const inspector = new ui.Inspector(options);
document.getElementById('inspector-holder').appendChild(inspector.render().el);
```
Tokens:
Raw