All Projects → bpmn-io → diagram-js-minimap

bpmn-io / diagram-js-minimap

Licence: MIT License
A minimap for diagram-js

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to diagram-js-minimap

atom-minimap-linter
Atom package to display linter markers on minimap
Stars: ✭ 26 (+30%)
Mutual labels:  minimap
rocket-league-replay-analysis
UNMAINTAINED - Creating videos for Analyzing Rocket League Replays (https://gitlab.com/enzanki_ars/rocket-league-replay-analysis)
Stars: ✭ 24 (+20%)
Mutual labels:  minimap
NewWorldMinimap
Opensource Minimap for Amazon's New World.
Stars: ✭ 195 (+875%)
Mutual labels:  minimap
postit-js
Create post-it boards - built with diagram-js
Stars: ✭ 60 (+200%)
Mutual labels:  diagram-js

diagram-js Minimap

Build Status

A minimap for diagram-js.

Minimap

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 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.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].