Stencilsets
MJS Diagram is a set of components for editing and viewing diagrams. It comes with a basic set of stencils (objects) and connectors and is infinitely extensible to enable creation of various diagram types. Stencilset is one of the core concepts within MJS Diagram. It's an object defining available stencils and connector types for each instance of MJS Diagram components.
MJS Diagram is focused on enabling developers to offer diagram editing and viewing to their customers. In each case developers need to deliver support for a certain type or types of diagrams. With this in mind, MJS Diagram is centered around allowing developers to control what users are able to create in each instance of MJS Diagram Editor. This is implemented through the concepts of stencil sets and stencil editor sets.
NOTE
In this document we will focus on the core concepts and bundled stencilsets. We will cover creating custom stencilsets in a separate tutorial.
What are stencilsets and stencil editor sets?
Each stencilset is an instance of the StencilSet class. It defines which stencil types and connector types are avalable for a specific diagram type.
Stencil editor sets define how certain stencilsets should be edited in the MJS Diagram Editor. They are instances of StencilEditorSet.
Stencilsets are used by MJS Diagram Viewer and stencil editor sets are used by MJS Diagram Editor (though stencil editor sets refer stencilsets).
Default stencilset
By defeault MJS Diagram uses basicStencilSet (and basicStencilEditorSet for the Editor). It's a set of core shapes and connectors that can be used for creating general-purpose diagrams.
You can see it in action in the Getting started demo.
Bundled stencilsets
MJS Diagram comes bundled with a number of stencilsets for various common diagram types. This list will expand with time to include more and more diagram types, based on popular demand.
Bundled stencilsets are included as separate files in the MJS Diagram package, so that you only load what you need in each instance.
To include, say, a flowchart stencilset you import it into your module like this:
import * as flowchart from "@markerjs/mjs-diagram/stencilsets/flowchart/flowchart";And then set viewer.stencilSet and editor.stencilEditorSet properties to respective values:
viewer.stencilSet = flowchart.flowchartStencilSet;
...
editor.stencilEditorSet = flowchart.flowchartStencilEditorSet;Here's a list of stencilsets bundled with MJS Diagram:
Mind Map
Mind Map stencilset (mindmap) enables you to add mindmapping capabilities to your web apps.
- Location:
@markerjs/mjs-diagram/stencilsets/mindmap/mindmap - Stencilset:
mindmap.mindMapStencilSet - Stencil editor set:
mindmap.mindMapStencilEditorSet - Demo
Flowchart
Describe your workflows, processes, or algorithms with the Flowchart stencilset (flowchart).
- Location:
@markerjs/mjs-diagram/stencilsets/flowchart/flowchart - Stencilset:
flowchart.flowchartStencilSet - Stencil editor set:
flowchart.flowchartStencilEditorSet - Demo
Network diagram
Define or document your computer network topography with the Network diagram (network).
- Location:
@markerjs/mjs-diagram/stencilsets/network/network - Stencilset:
network.networkStencilSet - Stencil editor set:
network.networkStencilEditorSet - Demo
Organizational Chart
Present your company or team structure with an Org Chart (orgchart).
- Location:
@markerjs/mjs-diagram/stencilsets/orgchart/orgchart - Stencilset:
orgchart.orgchartStencilSet - Stencil editor set:
orgchart.orgchartStencilEditorSet - Demo