反应流程图库

Question

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

Answer 1

您可以使用https://github.com/projectstorm/react-diagrams，这是其演示文稿的link。

该实现的视图与您在给定图片中提到的视图非常相似。另外，由于它说它是可定制的，因此您可以根据自己的要求使其看起来像

Answer 2

那里没有太多专门为React构建的流程图和图表库。您还应该寻找generic solutions与React很好地集成。

如果这是出于商业目的，并且/或者您的要求不高，请务必查看yFiles for HTML，这应该能够帮助您达到我在示例图中可以看到的所有要求：

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

该库还带有React Diagram Integration Demo。这使您可以在基于React的应用程序中使用all the features。请参见此full diagram editor app，以获取展示库的许多功能的复杂演示。

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

Answer 3

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

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

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

您还可以使用批注属性为节点或连接器创建标签。请找到以下链接，了解如何向节点或连接器添加标签

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