我们如何在 React 应用程序中绘制流程图？

Posted 2023-03-07

【中文标题】我们如何在 React 应用程序中绘制流程图？

【英文标题】：How can we draw a flowchart diagram in an react application?

【发布时间】：2020-03-12 11:36:31

【问题描述】：

在反应应用程序中，我需要绘制如下示例的流程图。该图是基于 json 数据绘制的。是否有任何 npm 包或任何 java 脚本库来解决这个问题。

【问题讨论】：

请求场外资源（如图书馆）是题外话 -> What topics can I ask about here?

【参考方案1】：

您可以使用 flowcharJS。 flowflow.js 是在浏览器和终端中运行的流程图 DSL 和 SVG 渲染器。你可以用这个画一个非常复杂的图表

一个例子是here，库回购是here

在 react 应用程序中，使用基于流程图的 react-simple-flowchart。集成很简单

通过 npm 安装：

npm install react-simple-flowchart

并包含在您的项目中：

import Flowchart from 'react-simple-flowchart';

完整的文档和使用信息here

还有几个其他的库：

Mermaid

js-sequence-diagrams

祝你好运

【讨论】：

你有没有尝试过？我以前看到过，但很难集成到 react 应用程序中

@SoorajJose 我已经编辑了我的答案，以响应用例。

@SoorajJose 你试过什么？你在什么时候感到困惑？如果您可以将此添加到您的问题中，社区将提供更多信息来帮助您。

它与 react-simple-flowchart 一起使用。 here 是我累了的例子