MJS Diagram — add interactive diagrams and diagramming to your web apps

MJS Diagram is a set of web components for creating and dislplaying interactive diagrams, such as Flowcharts, Mind Maps, Network Diagrams, and other.

MJS Diagram is extensible and enables you to add your own diagram types.

Installation

npm install @markerjs/mjs-diagram
Copy

or

yarn add @markerjs/mjs-diagram
Copy

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.

Here's a simple example:

On the page:

<mjs-diagram-editor id="mjsDiaEditor"></mjs-diagram-editor>
Copy

When page loads:

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);
});
Copy

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:

<mjs-diagram-viewer id="mjsDiaViewer"></mjs-diagram-viewer>
Copy

When page loads:

let viewer = document.getElementById('mjsDiaViewer');
// assign imported Flowchart stencil set
viewer.stencilSet = flowchartStencilSet;
// load diagram (state)
viewer.show(savedState);
Copy

Demos

Check out MJS Diagram demos here.

More docs and tutorials

For docs and tutorials head over to the official website.

License

Linkware (see LICENSE for details) - the UI displays a small link back to the marker.js website which should be retained.

Alternative licenses are available through the marker.js website.