How to clear bpmn canvas

Developers
1

Hi All

Can any one tell me how to clear a whole diagram in a canvas.

Thanks in Advance

2

You can use the Diagram#clear method like this:

bpmnjs.clear();
1 Like
3

Hi,

I am trying to get a diagram to clear as suggested in this thread, but without success. Can you provide some examples? The code I am using looks like this:

var viewer = new BpmnNavigatedViewer({
container: ‘#canvas’,
width: ‘1100px’,
height: ‘600px’
});

var canvas = viewer2.get(‘canvas’);
var Diagram = require(‘diagram-js/lib/Diagram’);
var diagram = new Diagram(canvas);
diagram.clear();

The argument to the Diagram constructor might be wrong, but there is no error.

4

BpmnJS is an instance of Diagram. You can simply do what I posted in my previous comment.

5

Hi Nikku,

Thanks for your reply.

I thought the code snippet I provided made it clear that I was doing what you posted in your previous comment. Correct me if I am wrong. I have an instance of diagram called diagram. What I am saying is that diagram.clear() doesn’t do anything,

Thanks for your help.

6

BpmnJS inherits from Diagram so if you have an instance of BpmnJS you can call its clear method which was inherited from Diagram. There’s no need to create an extra instance of Diagram at any point.

var viewer = new BpmnNavigatedViewer({
  container: '#canvas',
  width: '1100px',
  height: '600px'
});
      
viewer.clear();
7

Thanks for your reply. This works as you describe, and is a lot simpler than I had imagined. I guess I didn’t appreciate the hierarchical relationship between diagram and viewer. Obvious once you know.

Thanks again for your help.