diagram-js Minimap

A minimap for diagram-js.

Features

• See the whole diagram in the minimap
• Highlight current viewport
• Click/drag/scroll the minimap to navigate the diagram
• Optimized to not impact modeling performance

Usage

Extend your diagram-js application with the minimap module. We'll use bpmn-js as an example:

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

import minimapModule from 'diagram-js-minimap';

var bpmnModeler = new BpmnModeler({
  additionalModules: [
    minimapModule
  ]
});

For proper styling integrate the embedded style sheet:

<link rel="stylesheet" href="diagram-js-minimap/assets/diagram-js-minimap.css" />

Please see this example for a more detailed instruction.

Configuration

The minimap can be configured via the minimap configuration option:

var bpmnModeler = new BpmnModeler({
  additionalModules: [
    minimapModule
  ],
  minimap: {
    open: true,             // open the minimap by default (default: false)
    debounceDelay: 100,     // batch element updates within this delay, in ms (default: 100)
    debounceSkipDelay: 2000 // force a refresh at least every this delay, in ms (default: 2000)
  }
});

License

MIT