MJS Diagram
npm install @markerjs/mjs-diagram
npm install @markerjs/mjs-diagram
`
or
`
yarn add @markerjs/mjs-diagram
`
Usage
> See the below scenario in action and full source code here.
To add a diagram editor to your web app follow these steps:
1. Add or import required modules (@markerjs/mjs-diagram/core, @markerjs/mjs-diagram/editor, and a stencil set (diagram type)).
2. Add a diagram editor web component to your page.
3. Assign a stencil set (diagram type).
4. Setup an event handler for the saveclick event to process the results.
$3
On the page:
`html
`
When page loads:
`js
let editor = document.getElementById('mjsDiaEditor');
// assign imported Flowchart stencil set
editor.stencilEditorSet = flowchartStencilEditorSet;
editor.addEventListener('saveclick', (ev) => {
// process state (represents the created diagram)
console.log(ev.detail.state);
});
`
To add a diagram viewer to your web app follow these steps:
1. Add or import required modules (@markerjs/mjs-diagram/core, @markerjs/mjs-diagram/viewer, and a stencil set (diagram type)).
2. Add diagram viewer web component to your page.
3. Assign a stencil set (diagram type).
4. Load diagram configuration via the show() method.
Here's a simple diagram viewer example:
On your page:
`html
`
When page loads:
`js
let viewer = document.getElementById('mjsDiaViewer');
// assign imported Flowchart stencil set
viewer.stencilSet = flowchartStencilSet;
// load diagram (state)
viewer.show(savedState);
``