MJS Diagram Mind Map demo
In this demo, we look at the Mind Map stencil set for MJS Diagram.
MJS Diagram consists of two core parts: Diagram Viewer and Diagram Editor. Let's look at basic uses of both.
Diagram Viewer
Diagram Viewer is a scalable interactive viewer for diagrams created with MJS Diagram Editor or in code. Here it is in action displaying a simple mind map for a ficitonal project.
Code
All it takes is adding a Diagram Viewer web component to your page:
<mjs-diagram-viewer id="mjsDiaView"></mjs-diagram-viewer>Then we need to import MJS Diagram modules into our app with something like this:
import * as mjsdcore from "@markerjs/mjs-diagram/core";
import * as mjsdv from "@markerjs/mjs-diagram/viewer";
import * as mindmap from "@markerjs/mjs-diagram/stencilsets/mindmap/mindmap";And then we just get a reference to the viewer element, set its stencilSet to one for mind maps, and pass the diagram configuration (created in Diagram Editor).
const viewer = document.getElementById('mjsDiaView');
viewer.stencilSet = mindmap.mindMapStencilSet;
viewer.show(diagram);Here, diagram is the output MJS Diagram Editor (or manually create diagram state).
Diagram Editor
We can create diagrams either in code or use Diagram Editor for an interactive WYSIWYG experience.
Code
Again, we add a Diagram Editor component to our page:
<mjs-diagram-editor id="mjsDia"></mjs-diagram-editor>Then import MJS Diagram Editor related modules:
import * as mjsdcore from "@markerjs/mjs-diagram/core";
import * as mjsde from "@markerjs/mjs-diagram/editor";
import * as mindmap from "@markerjs/mjs-diagram/stencilsets/mindmap/mindmap";Then get a reference to the editor, set its stencil set, and restore the saved diagram state (configuration).
const editor = document.getElementById('mjsDia');
editor.stencilEditorSet = mindmap.mindMapStencilEditorSet;
editor.restoreState(diagram);Check out an integrated Diagram Viewer/Editor demo on on CodeSandbox for a complete self-contained sample.