Add diagram-js-minimap to the bpmn-js

Users
#1

Hello everyone,
I’m currently installing BPMN on my Pc (debian 9), so I downloaded BPMN-JS, do an installation : download bpmn-js then npm install and modeler.html also to have a graphic rendering on a web page:
(https://github.com/bpmn-io/bpmn-js-examples/blob/61ccfb8727fe7c34bcf48094222fac292a12ca9c/starter/modeler.html)

I would like to add some specificities to the BPMN-Js like for example diagram-js-minimap, when you go to the github page it’s not very precise (or it’s me who misunderstands)
how to add diagram-js-minimap?
Is it necessary to create a js script at the root of the folder, is it necessary to add the code given in a folder or file or in the modeler.html ?

#2

Hi @BRaymond69 and welcome to the forum!

the minimap module is not per-se included in bpmn-js but needs to be loaded separately. You can see an example here:

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

import minimapModule from 'diagram-js-minimap';

var bpmnModeler = new BpmnModeler({
  container: '#canvas',
  additionalModules: [
    minimapModule
  ]
});

await bpmnModeler.importXML(xml);

console.log('Awesome! Ready to navigate!');

Please don’t hesitate to share a code sandbox if you experience an issue.

Best,
Max

#3

Thanks for your reply Max, so if I want to introduced the code above in this code https://codesandbox.io/s/sleepy-robinson-qezsj?file=/index.html
How can i do ?
Did I need to create a script js or html loaded separately.

#4

Hi,

I am not sure I understand the issue?

You can basically take the sandbox and only need to:

  1. Add diagram-js-minimap in the package.json
  2. Import it
    import minimapModule from "diagram-js-minimap";

import "diagram-js-minimap/assets/diagram-js-minimap.css";
  3. Load it after diagram import: bpmnJS.get("minimap").open();

See here: https://codesandbox.io/s/minimap-demo-8ryrk?file=/src/index.js