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.