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.