Embedding images in a diagram

Users
1

Hi, thank you for the awesome tool. It’s fantastic to use and it’s been super useful to my team.

We use this a lot for user flows in our application (if user clicks here, then he gets there, then he sees a loader and gets there…)

It works with text, but we’d love to be able to illustrate the steps with screenshots. When we say “show this page” in an Activity, we would like to be able to add a screenshot of the page. It makes the diagrams so much easier to tell at a glance what the flow is.

Is there an existing plugin for this? I haven’t found any.
If none exists, what do you think about such a feature?

Many thanks!

2

Hi @pierpo and welcome to the forum,

thanks for the feedback :heart:, that is great to hear :slight_smile:

Have you tried overlays? See a very very simple example: https://codesandbox.io/s/img-overlay-kj1j8?file=/src/index.js and the documentation: https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays.

Regards
Max

1 Like
3

Hi, thank you for your quick answer :slight_smile:

This would work indeed! The problem is that we have non-developers using the tool as well. We don’t want to edit our diagrams through code.

Given your solution, is there any way to have a way to add the overlays through the UI?
Also, would exporting the .bpmn file save the overlays?

Many thanks :slight_smile:

4

Hi,

you would need to develop a bpmn-js or camunda-modeler plugin, that could then be used by these non-developers. This is possible (incl. saving links to images in a custom extension in the .bpmn file).
(But I am not aware of any existing plugin that you could re-use)

A starting point could be https://github.com/bpmn-io/bpmn-js-embedded-comments, which is a bpmn-js extension allowing to add comments to elements (incl. an overlay showing these comments).

Regards
Max

1 Like
5

So essentially you’d like to have a way to drag and drop images on the canvas, add and remove them and associate elements with them, i.e. via associations?

1 Like
6

Thanks, that’s a very good starting point. I might give it a try :slight_smile:

7

Yes! Not necessarily with associations, but that’s the idea indeed :slight_smile: