Modeler and Viewer


My index.js

import BpmnModeler from 'bpmn-js/lib/Modeler';


var bpmnModeler = new BpmnModeler({
  container: '#js-canvas',
  propertiesPanel: {
    parent: '#js-properties-panel'
  }, ...

var bpmnViewer = new BpmnModeler.NavigatedViewer({
  keyboard: {
    bindTo: document

bpmnViewer.importXML(diagramXML, function (err, warnings) {
  const overlays = bpmnViewer.get("overlays");
  const canvas = bpmnViewer.get("canvas")

  overlays.add("Process_1",'note', {
    position: { bottom: 0, right: 0 },
    html: "<div class=\"diagram-note\">HELLOOOOOOOO</div>"

How can I use both Modeler and Viewer? I have seen some Topics on the forum but they didnt help me. With my Code I get to see this

but the Palette doesnt work anymore I cannot drag any element. What am I doing wrong?

You are using the viewer when importing the diagram. The viewer is read-only. If you want to allow diagram editing/modeling then you need to use the modeler (bpmnModeler.importXML(...)).

Okey this worked with bpmnModeler thanks! How can I add overlays to tasks so that when the user selects a task from the palette he can add a comment if he wants in the overlay?

Please check out the overlays example here. If you have any issues, please create a dedicated topic for it.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.