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

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

diagram-js grid

Last synced: 15 days ago
JSON representation

A visual grid for diagram-js

• Host: GitHub
• URL: https://github.com/bpmn-io/diagram-js-grid
• Owner: bpmn-io
• License: mit
• Created: 2023-03-23T10:29:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-05-05T09:53:42.000Z (2 months ago)
• Last Synced: 2025-06-11T20:28:09.279Z (about 1 month ago)
• Topics: diagram-js, grid
• Language: JavaScript
• Homepage:
• Size: 353 KB
• Stars: 11
• Watchers: 7
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bpmn-io - diagram-js-grid - A visual grid for diagram-js (Extensions)

README

        
# diagram-js-grid

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

A minimal visual grid for [diagram-js](https://github.com/bpmn-io/diagram-js).

![Grid](resources/screenshot.png)

## Features

* Shows visual grid

* Supports modeler and viewer

* Hooks into `gridSnapping` activation

## Usage

Extend your diagram-js application with the grid 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 gridModule from 'diagram-js-grid';

var bpmnModeler = new BpmnModeler({

  additionalModules: [

    gridModule

  ]

});

```

## License

MIT