Draw grid as background for canvas?

Developers
1

hi,

I loved the implementation of BPMN-IO, It is very easy for user experience. Easy to Handle.
If I want to add one feature as to implement grid lines as #js-canvas background.

What I want to achieve is look like

It should appear as the background over we can drop shapes for better user experience.

How to achieve this. Please suggest some help

Answer

As of 2019 we offer grid snapping (core) as well as a visual grid (optional) as part of our editing toolkits.

The visual grid looks like this:

image

Read this post on how to enable it.

2

Hi,

I think good places to start looking are this answer that refers to several examples on how to customize look and feel and also this post regarding creating SVG grid.

Hope this helps to get started.

Cheers,
Vladimir

3

There is a visual grid feature in bpmn-js that is not active by default. You can include it easily: https://codesandbox.io/s/bpmn-js-visual-grid-76eh4

2 Likes
4