marker.js

MJS Diagram Documentation: Getting started

Getting started with MJS Diagram

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

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

Installation

npm

Using a modern JavaScript/TypeScript environment? Just run:

npm install @markerjs/mjs-diagram
or
yarn add @markerjs/mjs-diagram

to add MJS Diagram to your project.

From CDN or local file

Just add a script tags referencing the core.js, editor.js and/or viewer.js libraries.

<script src="https://unpkg.com/@markerjs/mjs-diagram/core.js"></script> <script src="https://unpkg.com/@markerjs/mjs-diagram/editor.js"></script> <script src="https://unpkg.com/@markerjs/mjs-diagram/viewer.js"></script>

In this case, we are referencing the library through the UNPKG CDN. For other options, please see the Downloads section.

Usage

To add a diagram editor to your web app follow these steps:

  1. Add a diagram editor web component to your page.
  2. Assign a stencil set (diagram type).
  3. Setup an event hander for the saveclick event to process the results.

Here's a simple example:

On the page:

<mjs-diagram-editor id="mjsDia"></mjs-diagram-editor>

Import MJS Diagram modules:

import * as mjsdcore from "@markerjs/mjs-diagram/core"; import * as mjsde from "@markerjs/mjs-diagram/editor"; import * as flowchart from "@markerjs/mjs-diagram/stencilsets/flowchart/flowchart";

When the page loads:

let editor = document.getElementById('mjsDia'); // assign imported Flowchart stencil set editor.stencilEditorSet = flowchart.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 diagram viewer web component to your page.
  2. Assign a stencil set (diagram type).
  3. Load diagram configuration via the show() method.

Here's a simple example:

On the page:

<mjs-diagram-viewer id="mjsDiaView"></mjs-diagram-viewer>

Import MJS Diagram modules:

import * as mjsdcore from "@markerjs/mjs-diagram/core"; import * as mjsdv from "@markerjs/mjs-diagram/viewer"; import * as flowchart from "@markerjs/mjs-diagram/stencilsets/flowchart/flowchart";

When the page loads:

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

See also

Check out the "getting started" demo for the simplest implementation of MJS Diagram in action.

Next »