Value Stream Mapping shapes

The @joint/shapes-vsm package provides you with a set of Value Stream Mapping shapes. The VSM shapes is an independent module, and needs to be installed as an addition to the main JointJS+ package. You can learn about it here.

Elements

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

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

Methods

setLabelAttr()

Method to set the label attributes of a box.

dataBox.setLabelAttr(index: number, attrs: attributes.SVGTextAttributes, opt?: dia.Cell.Options): void;

setBoxAttr()

Function to set the box attributes of a box.

dataBox.setBoxAttr(index: number, attrs: attributes.SVGRectAttributes, opt?: dia.Cell.Options)

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

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

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

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

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

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

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

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

MaterialPull

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Links

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

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

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

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

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

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