# diagram-js-minimap

> A minimap for diagram-js

Latest version **5.4.1** (published 2026-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install diagram-js-minimap
pnpm add diagram-js-minimap
yarn add diagram-js-minimap
bun add diagram-js-minimap
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 5.4.1 |
| Published | 2026-08-11 |
| First published | 2017-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 122.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Philipp Fromme |
| Maintainers | bpmn-io-admin, nikku, barmac, philippfromme, maxtru, skaiir-camunda, vsgoulart, barinali, ev-camunda, jarekdanielak, alekseymanetov |
| Keywords | diagram-js, minimap |

## Links

- npm: https://www.npmjs.com/package/diagram-js-minimap
- Repository: https://github.com/bpmn-io/diagram-js-minimap
- Homepage: https://github.com/bpmn-io/diagram-js-minimap#readme
- Issues: https://github.com/bpmn-io/diagram-js-minimap/issues
- npm.io page: https://npm.io/package/diagram-js-minimap

## Dependencies (3)

- [min-dom](https://npm.io/package/min-dom.md) ^5.3.0
- [min-dash](https://npm.io/package/min-dash.md) ^5.0.0
- [tiny-svg](https://npm.io/package/tiny-svg.md) ^4.1.4

## Recent versions

- 5.4.1 (latest) — 2026-08-11
- 5.4.0 — 2026-07-06
- 5.3.0 — 2026-02-05
- 5.2.0 — 2024-11-07
- 5.1.0 — 2024-05-30
- 5.0.0 — 2024-05-30
- 4.1.0 — 2023-03-23
- 4.0.1 — 2023-01-18
- 4.0.0 — 2023-01-16
- 3.0.0 — 2022-09-30
- 2.1.1 — 2022-02-11
- 2.1.0 — 2022-02-09
- 2.0.4 — 2020-12-07
- 2.0.3 — 2019-10-04
- 2.0.2 — 2019-10-02
- … 22 more at https://npm.io/package/diagram-js-minimap/versions

## README

# diagram-js Minimap

[![Build Status](https://github.com/bpmn-io/diagram-js-minimap/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-minimap/actions/workflows/CI.yml)

A minimap for diagram-js.

![Minimap](resources/screenshot.png)


## Features

* See the whole diagram in the minimap
* Highlight current viewport
* Click/drag/scroll the minimap to navigate the diagram


## Usage

Extend your diagram-js application with the minimap module. We'll use [bpmn-js](https://github.com/bpmn-io/bpmn-js) as an example:

```javascript
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:

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

Please see [this example](https://github.com/bpmn-io/bpmn-js-examples/tree/master/minimap) for a more detailed instruction.


## Configuration

The minimap can be configured via the `minimap` configuration option:

```javascript
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)
  }
});
```

To keep modeling responsive on large diagrams, the minimap batches (debounces)
element additions, removals and changes into a single update, and does not
update at all while it is closed. It rebuilds from the active root the next time
it is opened. User interactions (drag, zoom, click) and viewport changes always
update immediately.


## License

MIT

---
_Source: https://npm.io/package/diagram-js-minimap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._