Module editor

The editor module contains everything pertaining to diagram editing.

The core class here is DiagramEditor. It represents the editor web component.

Example

Here's a basic scenario for adding a Flowchart editor on your page.

In the markup part add the diagram editor web component:

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

Then in your code configure it to use the flowchart stencil editor set:

import * as mjsde from "@markerjs/mjs-diagram/editor";
import * as flowchart from "@markerjs/mjs-diagram/stencilsets/flowchart/flowchart";
...
const editor = document.getElementById("mjsDiaEditor");
editor.stencilEditorSet = flowchart.flowchartStencilEditorSet;
editor.addEventListener("saveclick", (ev) => {
  // process the created diagram
  // the diagram state (configuration) is in ev.detail.state
});
Copy