MJS Diagram Documentation: Viewer vs. Editor

Viewer vs. Editor

MJS Diagram consists of two main components: DiagramViewer and DiagramEditor. As the names suggest the former is used for viewing diagrams created with the latter (or via code).

In terms code modules the package consists of three main parts (not counting the stencilsets): core, viewer, and editor. "core" is used by both "viewer" and "editor" and is always required and should be your first import.

import * as mjsdcore from "@markerjs/mjs-diagram/core"; import * as mjsdv from "@markerjs/mjs-diagram/viewer"; import * as mjsde from "@markerjs/mjs-diagram/editor"; // then import stencilsets and other things

If you are doing both diagram editing and viewing on the same page/in the same component you import all three dependencies. And when you only do one or the the other you import "core" and then "viewer" or "editor" accordingly.

Depending on what you are actually doing you may not need both viewer and editor in your app.

When do I only need DiagramViewer or only DiagramEditor?

DiagramViewer provides a component for scalable interactive viewing of diagrams created with DiagramEditor or manually in code. While it's arguably the best way to view diagrams, it is worth mentioning that Editor can render diagrams into static images. If that's the route you chose, you don't need DiagramViewer in your codebase.

Conversely, you may create diagrams in code (the diagrams are JSON based), or you may create diagrams once in an external project (or one of the demos) and only want to display those diagrams in a scalable interactive fashion using the DiagramViewer. In this case, there's no point in importing the "editor".