React流程图库[关闭]

Question

我需要一个流程图库，它可以帮助我在 React 中创建如下所示的流程图。 如果添加类似演示的链接，将不胜感激。

Answer 1

你可以使用https://github.com/projectstorm/react-diagrams，这里是link的演示。

实现的视图看起来与您在给定图片中提到的非常相似。另外因为它说它是可定制的，你可以根据你的要求让它看起来像

Answer 2

Syncfusion 支持在 React 中创建具有自定义形状、标签和端口到端口连接的图表。请查找 Syncfusion Diagram 的在线示例。我们已经创建了类似于提供的屏幕截图的流程图。

请参考以下链接中的示例：

示例链接：https://codesandbox.io/s/wkvjjopv18

您还可以使用注释属性为节点或连接器创建标签。请在下面的链接中找到如何为节点或连接器添加标签

链接：https://ej2.syncfusion.com/react/documentation/diagram/labels#create-annotation

Answer 3

专门为 React 构建的流程和图表库并不多。您还应该寻找与 React 良好集成的 generic solutions。

如果这是在商业环境中和/或您的要求很重要，请务必查看yFiles for HTML，它应该能够帮助您实现我在您的示例图中看到的所有要求：

• 您可以自定义可视化的设计和外观以完全符合您的要求
• 您可以使用自动布局算法根据数据结构动态排列项目，而无需用户手动放置项目
• 您可以向节点和边添加尽可能多的标签、端口（节点上的连接器）。
• 您可以自定义交互，例如禁止在您的图表类型中创建无效结构
• 这是一种白标解决方案，可以嵌入到任何 JavaScript 应用程序中。

该库可帮助您创建react diagramming component，还附带React Diagram Integration Demo。这允许您在 React 驱动的应用程序中使用 all the features。请参阅此full diagram editor app 以获取展示该库许多功能的复杂演示。

^{免责声明：我为创建上述库的公司工作。不过，我不代表我的雇主。答案、问题和意见都是我自己的。}