Value Stream Mapping shapes

JointJS+ provides a set of Value Stream Mapping shapes. The VSM shapes are contained in an independent module, and needs to be installed as an addition to the main JointJS+ package.

Installation

The VSM shapes plugin is an independent module distributed as part of the JointJS+ archive:

1. Unzip the archive and navigate to the build/package-vsm folder inside.
2. Copy the joint-vsm-shapes.tgz file and paste it into the root of your package.

Then, install the VSM shapes package (@joint/shapes-vsm) using your package manager:

npm

npm add joint-vsm-shapes.tgz

pnpm

pnpm add ./joint-vsm-shapes.tgz

yarn

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

Now, you can import functionality from @joint/shapes-vsm into your application as necessary:

• JointJS
• JointJS+

import { dia, shapes as defaultShapes } from '@joint/core';
import * as VSMShapes from '@joint/shapes-vsm';

The following example creates a diagram with a single VSM shape next to a standard shape:

const shapes = { ...VSMShapes, ...defaultShapes };

const graph = new dia.Graph({}, { cellNamespace: shapes });

const paper = new dia.Paper({
    model: graph,
    el: document.getElementById('app') as HTMLDivElement,
    width: 300,
    height: 300,
    cellViewNamespace: shapes
});

graph.fromJSON({ cells: [
    { type: "VSMTruck" },
    { type: "standard.Rectangle", size: { width: 100, height: 20 }, position: { x: 10, y: 120 } }
]});

Note that the type attribute of each VSM shape is prefixed with VSM, so remember to include it when creating an instance:

const truck = new VSMTruck();
truck.addTo(graph);

const operator = new VSMOperator();
operator.addTo(graph);

There is also a UMD version available

Place the UMD distribution of the plugin into the root of your package:

1. Navigate to the build/package-vsm/dist folder inside the unzipped JointJS+ archive.
2. Copy the joint-vsm-shapes.js file and paste it into the root of your package.

Include joint-vsm-shapes.js in your HTML:

• JointJS
• JointJS+

index.html

<script src="joint.js"></script>
<script src="joint-vsm-shapes.js"></script>

Access VSM shapes through the joint.shapes namespace:

index.js

const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });

const paper = new joint.dia.Paper({
    model: graph,
    el: document.getElementById('app') as HTMLDivElement,
    width: 300,
    height: 300,
    cellViewNamespace: joint.shapes
});

graph.fromJSON({ cells: [
    { type: "VSMTruck" },
    { type: "standard.Rectangle", size: { width: 100, height: 20 }, position: { x: 10, y: 120 } }
]});

Shapes

Here is an example with all provided VSM shapes:

Open Sandbox