Как интегрировать / использовать Camunda BPMN Model API в интерфейсе ReactJs для редактирования диаграмм bpmn?

Question

Я работаю над приложением React-Python / Flask, которое принимает входное изображение диаграммы bpmn от пользователя и через сценарии python преобразует его в файл bpmn, который затем можно загрузить через flask api на устройство пользователя. Я работаю над пользовательским интерфейсом реакции. Теперь мне нужно отредактировать диаграммы и применить к ним некоторую визуализацию. Итак, как я могу использовать Camunda BPMN Model API в моем приложении. Я новичок в Camunda, и я прошел через Camunda с документами React, но я все еще не понимаю, с чего и как начать. Любая помощь приветствуется. Спасибо.

Answer 1

Я не профессионал в Camunda BPMN, но сейчас я изучаю это. Ищете библиотеку bpmn. js? Вот пример для BPMN Modeler: https://github.com/bpmn-io/bpmn-js-examples/tree/master/modeler

И вот как вы можете интегрировать библиотеку с React, в основном, все, что вам нужно, это предоставить ссылку из React.

const containerRef = useRef();

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

Шаблон JSX:

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

Пример здесь: https://github.com/bpmn-io/react-bpmn/blob/master/src/index.jsx#L25