Simple MJS Diagram demo
In this demo, we look at the simplest use-cases for MJS Diagram.
NOTE
MJS Diagram is in the preview stages of its lifecycle and under heavy development. Not all of the features listed here are implemented or polished yet. And a lot will change before the stable release, including potential breaking changes.
Subscribe to our newsletter to be notified of the progress of MJS Diagram development.
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.