JointJS+ vsm

shapes.vsm

The VSM plugin provides you with a set of Value Stream Mapping shapes. The VSM plugin is an independent module, and needs to be installed as an addition to the main JointJS+ package.

VSM Demo source code

Installation

Place the VSM plugin installable package in your project. The following package.json example places the package in the root of the project. Next, run npm install to install the dependency.

{
    "dependencies": {
        "@joint/vsm-shapes": "file:joint-vsm-shapes.tgz", // path to file
    }
}

Usage

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

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 } }
]});

The type attribute of each vsm shape is prefixed with VSM, so remember to include this when creating an instance.

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

const operator = new VSMOperator();
operator.addTo(graph);
shapes.vsm.CustomerSupplier

The CustomerSupplier shape can represent both the customer or the supplier depending on its placement in a value stream map. The input for the value stream is the supplier, and the endpoint of the value stream is the customer.

The supplier is denoted if the shape is placed at the upper-left of the diagram, and upper-right placement denotes the customer.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.DataBox

The DataBox shape represents the significant data in a value stream map. Placement of the DataBox under other icons provides the additional information required to analyze the system.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
boxes SVGRectElement Selector for all rect boxes
labels SVGTextElement Selector for all box labels

API

setLabelAttr function Function to set the label attributes of a box. The function parameters are:

index number The number by index of the box label to target.
attrs attributes.SVGTextAttributes Text attributes for the label.
opt? dia.Cell.Options Cell options.
setBoxAttr function Function to set the box attributes of a box. The function parameters are:

index number The number by index of the box to target.
attrs attributes.SVGRectAttributes Rect attributes for the box.
opt? dia.Cell.Options Cell options.

Usage

// Set the label text of the first box to be 'Data Box'
dataBox.setLabelAttr(0, { text: 'Data Box' });

// Set the amount of boxes to 4
dataBox.set('count', 4);

// Set the fill color of the first box
dataBox.setBoxAttr(0, { fill: 'lightgray' });
shapes.vsm.DedicatedProcess

The DedicatedProcess shape represents fixed and continuous internal material flow through a department, process, operation, or machine in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
header SVGRectElement Rect header of shape
label SVGTextElement Shape text
shapes.vsm.ElectronicInformationFlow

The ElectronicInformationFlow shape shows a digital information flow such as the internet in a value stream map.

Supported attrs properties:

Selector Node Description
line SVGPathElement Visible connection of the link
wrapper SVGPathElement An invisible, interactive wrapper around the connection used to make clicking on the link easier
shapes.vsm.FIFOLane

The FIFOLane shape shows a First-in-First-Out inventory system in a value stream map. The max capacity can be written underneath the icon.

Supported attrs properties:

Selector Node Description GroupSelector
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
outline SVGPathElement Path outline of shape
rectIcon SVGRectElement Rectangle icon of shape icons
triangleIcon SVGPathElement Triangle icon of shape icons
ellipseIcon SVGEllipseElement Ellipse icon of shape icons
label SVGTextElement Shape text
shapes.vsm.GoSee

The GoSee shape indicates when information is being collected through physical observation in a value stream map. For example, information collected by a supervisor.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.InformationFlow

The InformationFlow shape represents a general information flow in a value stream map.

Supported attrs properties:

Selector Node Description
line SVGPathElement Visible connection of the link
outline SVGPathElement Path outline of shape
shapes.vsm.KaizenBurst

The KaizenBurst shape represents the problem areas in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.KanbanPost

The KanbanPost shape is used to show the location for collecting Kanban signals in a value stream map. It is usually placed near a supermarket.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.LoadLevelling

The LoadLevelling shape can batch Kanbans over time in a value stream map. It levels out the volume.

Supported attrs properties:

Selector Node Description GroupSelector
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
outline SVGPathElement Path outline of shape
cross1Icon SVGPathElement Path icon of shape icons
cross2Icon SVGPathElement Path icon of shape icons
circle1Icon SVGCircleElement Circle icon of shape icons
circle2Icon SVGCircleElement Circle icon of shape icons
label SVGTextElement Shape text
shapes.vsm.ManualInfo

The ManualInfo shape represents manual information flow in a value stream map. For example, discussions, memos, reports, etc.

Supported attrs properties:

Selector Node Description
line SVGPathElement Visible connection of the link
wrapper SVGPathElement An invisible, interactive wrapper around the connection used to make clicking on the link easier
shapes.vsm.MaterialBatchKanban

The MaterialBatchKanban shape represents Kanban cards arriving or being sent in batches in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
label SVGTextElement Shape text
shapes.vsm.MaterialFlow

The MaterialFlow shape represents a material flow in a value stream map.

Supported attrs properties:

Selector Node Description
line SVGPathElement Visible connection of the link
outline SVGPathElement Path outline of shape
material SVGPathElement Path material of shape
shapes.vsm.MaterialKanban

The MaterialKanban shape represents a Kanban card arriving or being sent in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.MaterialPull

The MaterialPull shape is used when supermarkets connect to a downstream process in a value stream map. The objective is to remove the materials from the supermarket physically.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGEllipseElement Ellipse body of shape
arrow SVGPathElement Path arrow of shape
label SVGTextElement Shape text
shapes.vsm.Operator

The Operator shape represents a person or worker in a value stream map. The amount of operators can also be noted in the ellipse.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGEllipseElement Ellipse body of shape
cap SVGPathElement Path cap of shape
label SVGTextElement Shape text
shapes.vsm.ProductionBatchKanban

The ProductionBatchKanban shape represents the production needed in batches to supply parts to customers in a value stream map.

Supported attrs properties:

Selector Node Description GroupSelector
root SVGGElement Container for all shape nodes
bodyBottom SVGPathElement Path bottom of shape bodies
bodyMiddle SVGPathElement Path middle of shape bodies
body SVGPathElement Path body of shape bodies
label SVGTextElement Shape text
shapes.vsm.ProductionControl

The ProductionControl shape represents a central production scheduling or control department in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
label SVGTextElement Shape text
shapes.vsm.ProductionKanban

The ProductionKanban shape represents the production needed to supply parts to customers in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.PullArrow

The PullArrow shape represents physical removal of stored inventory from supermarkets in a value stream map.

Supported attrs properties:

Selector Node Description
wrapper SVGPathElement An invisible, interactive wrapper around the connection used to make clicking on the link easier
line SVGPathElement Visible connection of the link
shapes.vsm.ResourcePlanning

The ResourcePlanning shape represents an inventory scheduling symbol in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
top SVGEllipseElement Ellipse top of shape
label SVGTextElement Shape text
shapes.vsm.RoundedInventory

The RoundedInventory shape can represent basic inventory between 2 processes and stored inventory in a value stream map. Additional details such as the count can also be placed underneath the symbol.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
icon SVGPathElement Icon of shape
label SVGTextElement Shape text
shapes.vsm.SafetyStock

The SafetyStock shape represents temporary safety stock that is used to prevent shortages in the case of system failure in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.SequencePullBall

The SequencePullBall shape represents a pull system that offers instructions to processes to manufacture a required product in a value stream map. The objective is to eliminate the need for supermarket storage.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
outer SVGEllipseElement Outer ellipse of shape
inner SVGEllipseElement Inner ellipse of shape
label SVGTextElement Shape text
shapes.vsm.SharedProcess

The SharedProcess shape represents a process, department, operation, or work center shared by other value stream families in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
header SVGRectElement Rect header of shape
label SVGTextElement Shape text
shapes.vsm.Shipment

The Shipment shape shows the transport of materials from the supplier to the customer in a value stream map.

Supported attrs properties:

Selector Node Description
line SVGPathElement Visible connection of the link
shapes.vsm.SignalKanban

The SignalKanban shape represents when a reorder point is reached, and another batch of parts must be produced in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
icon SVGTextElement Icon text
label SVGTextElement Shape text
shapes.vsm.Subprocess

The Subprocess shape represents a manufacturing subprocess in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
stripes SVGPathElement Path stripes of shape
label SVGTextElement Shape text
shapes.vsm.Supermarket

The Supermarket shape represents the end point of a kanban loop in a value stream map. It is also known as a Kanban stock point. It shows where downstream customers can get the Inventory they need as the supplier provides it.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.SupermarketParts

The SupermarketParts shape represents the parts of a supermarket in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
label SVGTextElement Shape text
shapes.vsm.TimelineProcessing

The TimelineWaiting shape shows processing times in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
line SVGPathElement Path line of shape
label SVGTextElement Shape text
shapes.vsm.TimelineTotal

The TimelineTotal shape shows waiting times and processing times in a value stream map. It also helps calculation of lead time and total cycle time.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of shape
line SVGPathElement Path line of shape
label SVGTextElement Shape text
labelTotalWaiting SVGTextElement Total waiting text
labelTotalProcessing SVGTextElement Total processing text
shapes.vsm.TimelineWaiting

The TimelineWaiting shape shows waiting times in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
line SVGPathElement Path line of shape
label SVGTextElement Shape text
shapes.vsm.TriangleInventory

The TriangleInventory shape can represent basic inventory between 2 processes and stored inventory in a value stream map. Additional details such as the count can also be placed underneath the symbol.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
icon SVGPathElement Icon of shape
label SVGTextElement Shape text
shapes.vsm.Truck

The Truck shape represents external shipments to customers or from suppliers in a value stream map. The shipment frequency may be noted.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
background SVGPathElement Path background of shape
body SVGPathElement Path body of shape
label SVGTextElement Shape text
shapes.vsm.Workcell

The Workcell shape represents the integration of multiple processes into one manufacturing work cell in a value stream map.

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of shape
label SVGTextElement Shape text