How to Integrate/use Camunda BPMN Model API in ReactJs frontend to edit bpmn diagrams?

1
votes

I am working on a React-Python/Flask app which takes input bpmn diagram image from user & through python scripts convert it into bpmn file which then can be downloaded through flask api on user's device. I am working on react UI. Now i have to edit the diagrams & apply some visualization to them. So how can i use Camunda BPMN Model API in my app.I am new to Camunda & i have gone through Camunda with React docs but i am still confused on where or how to start. Any help is appreciated. Thank you.

1
reactjsbpmncamunda
I am not sure whether I understand you correctly: With input bpmn diagram image you do refer to a picture (with pixels), and not to the BPMN-XML-file, right? So you need to do OCR? If so, you might want to add the appropriate tag to your question. – B--rian
Yes I refered to a Picture with Pixals But i have the Needed python scripts to change them into .bpmn file. Now here i need Camunda APIs to edit this .bpmn file. So no i dont have to tag OCR because i am already converted the image to bpmn. – Anuja

1 Answers

2
votes

I am not professional in Camunda BPMN, but I am doing now research about it. Are you looking for bpmn.js library? Here is an example for BPMN Modeler: https://github.com/bpmn-io/bpmn-js-examples/tree/master/modeler

And this is how you can integrate the library with React, basically, all you need is to provide ref from React.

const containerRef = useRef();

useEffect(() => {
   const bpmnViewer = new BpmnJS({ container: containerRef.current });
}, []);

JSX Template:

<div ref={containerRef}></div>

Example here: https://github.com/bpmn-io/react-bpmn/blob/master/src/index.jsx#L25