Simple MJS Diagram demo
In this demo, we look at the simplest use-cases for MJS Diagram.
NOTE
MJS Diagram is in early (alpha) stages of its lifecycle and under heavy development. Not all of its features are implemented or polished yet. And a lot will change before the stable release, including inevitable 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>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 = mjsdiagram.mindMapStencilSet;
viewer.show(diagram);Here, config is the output state from marker.js 2.
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 get a reference to the editor, set its stencil set, and restore the saved diagram state (configuration).
const editor = document.getElementById('mjsDia');
editor.stencilEditorSet = mjsdiagramEditor.mindMapStencilEditorSet;
editor.restoreState(diagram);Check out an integrated Diagram Viewer/Editor demo on on CodeSandbox for a complete self-contained sample.