🎉 JointJS has new documentation! 🥳
🎉 JointJS has new documentation! 🥳
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
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/shapes-vsm": "file:joint-vsm-shapes.tgz", // path to file
}
}
import * as VSMShapes from '@joint/shapes-vsm';
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);
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 |
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 |
| setLabelAttr | function |
Function to set the label attributes of a box.
The function parameters are:
|
|||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| setBoxAttr | function |
Function to set the box attributes of a box.
The function parameters are:
|
// 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' });
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |