MJS Diagram Demos

Network diagram demo

In this demo, we use the Network Diagram stencil set that comes with MJS Diagram to display a network diagram of a safe network setup for travellers.

MJS Diagram consists of two core parts: Diagram Viewer and Diagram Editor. We have covered the usage of both in the Getting started. We will focus on the only difference for displaying a Network diagram in this one.

Diagram Viewer

Network diagram related code

We just import the network stencil set:

import * as network from "@markerjs/mjs-diagram/stencilsets/network/network";

And then we just set the viewer's stencilSet to one for network diagrams.

viewer.stencilSet = network.networkStencilSet;

Diagram Editor

We can create diagrams either in code or use Diagram Editor for an interactive WYSIWYG experience.

Network diagram specific code

Import the network stencil set:

import * as network from "@markerjs/mjs-diagram/stencilsets/network/network";

Then just set the stencilEditorSet:

editor.stencilEditorSet = network.networkStencilEditorSet;

Check out an integrated Diagram Viewer/Editor demo on on CodeSandbox for a complete self-contained sample.