Add diagram-js-minimap to the bpmn-js

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:

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 ?

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: [

await bpmnModeler.importXML(xml);

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

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


Thanks for your reply Max, so if I want to introduced the code above in this code
How can i do ?
Did I need to create a script js or html loaded separately.


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: