Simple MJS Diagram demo
In this demo, we look at the simplest use-case 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 diagram.
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";And then we just get a reference to the viewer element and pass the diagram configuration (created in Diagram Editor).
const viewer = document.getElementById('mjsDiaView');
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";Then get a reference to the editor and restore the saved diagram state (configuration).
const editor = document.getElementById('mjsDia');
editor.restoreState(diagram);Check out an integrated Diagram Viewer/Editor demo on on CodeSandbox for a complete self-contained sample.