https://github.com/bpmn-io/diagram-js-minimap

A minimap for diagram-js
https://github.com/bpmn-io/diagram-js-minimap

diagram-js minimap

Last synced: 3 months ago
JSON representation

A minimap for diagram-js

• Host: GitHub
• URL: https://github.com/bpmn-io/diagram-js-minimap
• Owner: bpmn-io
• License: mit
• Created: 2017-03-30T13:14:10.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2024-04-08T09:54:14.000Z (7 months ago)
• Last Synced: 2024-04-14T11:10:10.681Z (7 months ago)
• Topics: diagram-js, minimap
• Language: JavaScript
• Homepage:
• Size: 1.61 MB
• Stars: 32
• Watchers: 11
• Forks: 18
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bpmn-io - diagram-js-minimap - Render a minimap of your diagram (Extensions)

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

```

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

## License

MIT