如何在 ReactJs 前端集成/使用 Camunda BPMN 模型 API 来编辑 bpmn 图？答案

【问题标题】：How to Integrate/use Camunda BPMN Model API in ReactJs frontend to edit bpmn diagrams?如何在 ReactJs 前端集成/使用 Camunda BPMN 模型 API 来编辑 bpmn 图？
【发布时间】：2020-05-07 22:19:53
【问题描述】：

我正在开发一个 React-Python/Flask 应用程序，该应用程序从用户那里获取输入的 bpmn 图图像并通过 python 脚本将其转换为 bpmn 文件，然后可以通过用户设备上的 flask api 下载该文件。我正在研究反应 UI。现在我必须编辑图表并对它们应用一些可视化。那么我如何在我的应用程序中使用 Camunda BPMN 模型 API。我是 Camunda 的新手，我已经使用 React 文档浏览了 Camunda，但我仍然对从何处或如何开始感到困惑。任何帮助表示赞赏。谢谢。

【问题讨论】：

我不确定我是否理解正确：使用 输入 bpmn 图表图像，您确实指的是图片（带像素），而不是 BPMN-XML 文件，正确的？所以你需要做OCR？如果是这样，您可能需要为您的问题添加适当的标签。
是的，我指的是带有 Pixals 的图片，但我有需要的 python 脚本将它们更改为 .bpmn 文件。现在在这里我需要 Camunda API 来编辑这个 .bpmn 文件。所以不，我不必标记 OCR，因为我已经将图像转换为 bpmn。

标签： reactjs bpmn camunda

【解决方案1】：

我不是 Camunda BPMN 的专业人士，但我现在正在研究它。您在寻找 bpmn.js 库吗？以下是 BPMN 建模器的示例： https://github.com/bpmn-io/bpmn-js-examples/tree/master/modeler

这就是将库与 React 集成的方式，基本上，您只需要从 React 提供 ref。

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

【讨论】：

感谢您的帮助但是没有，我尝试过 bpmn.js，但它不符合我的应用程序的要求。这就是我研究 Camunda BPMN API 的原因。