MJS Diagram Demos

Flowchart demo

In this demo, we use the Flowchart stencil set that comes with MJS Diagram to display a flowchart representation of a simple algorithm.

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 Flowchart diagram in this one.

Diagram Viewer

Flowchart-related code

We just import the flowchart stencil set:

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

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

viewer.stencilSet = flowchart.flowchartStencilSet;

Diagram Editor

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

Flowchart-specific code

Import the flowchart stencil set:

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

Then just set the stencilEditorSet:

editor.stencilEditorSet = flowchart.flowchartStencilEditorSet;

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