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.