Rendering static or dynamic BPMN component in React

I am trying to render a BPMN component without any interactive parts that let’s you compose flow elements on the screen. It should only render static data on the below codesandbox -

https://codesandbox.io/p/sandbox/nameless-grass-98fwsp-forked-n7yqmf?file=%2Fsrc%2FApp.tsx

Also I am trying to find if the nodeBadges can have hardcoded colors is it possible to do so?

but for some reason i don’t see the diagram where am I going wrong?

Update - I do got it working but i had to fetch the diagram inside the useEffect
I have two requirements now -

  1. For the static BPMN viewer -
    is there any way that i can pass a string to my state bpmnXml from the parent and the diagrams get loaded

  2. Create dynamic diagrams as well such that i can add nodes(badges) to the shapes such that it can be marked with different colours.


like green 1 and. blue 1 in the above image

I just want to know the feasibility of the above.

Update -

I have figured the 1st point.

I only need to know if 2nd can be achieved.

@philippfromme @nikku anyone please?

@noobDev31 You can checkout react-bpmn to see a basic integration of bpmn-js into React. It should be fairly straight forward to migrate the example to hooks.

In a nutshell:

  • Use a ref for a DOM element to mount the BPMN editor to.
  • Save the editor itself in a ref for future use
  • React to external XML to change and badge meta-data
  • Use the existing BpmnViewer#importXML and overlay apis to update the editor contents when your component props change.
1 Like

is it necessary to use react-bpmn can i do it without that?

@noobDev31 Check this link

It’s an archived repository @Hadi_Jami :sweat_smile:
but yes thanks the code is something I can take inspiration from :slight_smile: