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

Minimap navigation breaks after resizing window
#5

I didn’t manage to load the minimap bpmn in addition to bpmn -js, I tried many things but nothing worked.

When you say :
import minimapModule from “diagram-js-minimap”;
import “diagram-js-minimap/assets/diagram-js-minimap.css”;

Do you have to import them in a js script in the html page or outside ? For me it’s the same thing, or should it be somewhere else ?

I put a sandbox of what I’ve done, can you try to include bpmn minimap or explain me how to integrate it with a sandbox

#6

Unless bpmn-js, the minimap is a module that needs to be bundled before you can use it. Are you familiar with how bundling works?

#7

Currently no I’m not very familiar with bpmn, I understood a few lines of code, but I almost never coded in javascript/nodejs, so I’m quite beginner in these languages. Sorry for the late response I work for an company only the thurday and friday

#8

Then it’s going to be difficult to help you. Get more familiar with JavaScript and its ecosystem first.

#9

Hello I come back after a few weeks to ask for a little help :|, I am now a little more familiar with JS and NodeJS, but there is still some misunderstanding in the ReadMe of your GitHUB repository.
Especially this sentence “Now load the minimap module along with the bpmn-js instance:” and the code below.

Should I put it in a script tag in an HTML page a bit like the starter/modeler.html that’s available on gitHub or is it totally different?

Thanks in advance

#10

Where did you get this sentence from?

Basically “loading” the module means to add it when initializing the Modeler.