MJS Diagram Demos

Organizational Chart demo

In this demo, we use the Org Chart stencil set that comes with MJS Diagram to display organizational structure of a fictional company.

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 an Org Chart in this one.

Diagram Viewer

Org Chart related code

We just import the orgchart stencil set:

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

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

viewer.stencilSet = orgchart.orgchartStencilSet;

Diagram Editor

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

Org Chart specific code

Import the orgchart stencil set:

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

Then just set the stencilEditorSet:

editor.stencilEditorSet = orgchart.orgchartStencilEditorSet;

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