react-diagrams：超简单无废话的React流程图库，让前端可视化开发不再复杂

你还在为复杂的流程图实现而烦恼吗？还在为找不到适合React项目的可视化库而头疼吗？本文将为你介绍一款超简单无废话的React流程图库——react-diagrams，让前端可视化开发变得轻松简单。读完本文，你将了解react-diagrams的基本概念、安装方法、核心功能以及实际应用场景，帮助你快速上手并应用到项目中。

什么是react-diagrams

react-diagrams是一个面向流程和过程的图表库，灵感来源于Blender、Labview和Unreal引擎。它采用现代代码库，完全用TypeScript和React编写，利用强大的泛型和先进的软件工程原理，将库分解为多个模块。

该库具有以下特点：

• 可扩展性强：整个库包括其核心都可以扩展、重新布线和重新组装成完全不同的软件，以满足你自己的软件需求。
• HTML节点优先：该库最初是为了表示高级动态节点而编写的，由于复杂的输入需求和用户体验要求，这些节点很难用SVG表示。
• 专为流程设计：该库面向希望在运行时重新连接程序，并希望使软件更具动态性的软件工程师。
• 快速图表编辑：提供的默认值将最高优先级放在尽可能快地编辑图表上。

官方文档：docs/getting-started/using-the-library.md

安装react-diagrams

安装react-diagrams非常简单，你可以选择安装完整版本，也可以选择模块化安装。

完整安装

如果你需要所有功能，可以直接安装完整版本：

yarn add @projectstorm/react-diagrams

这包括所有下面列出的包（并且在概念上和5.0版本中的使用方式基本相同）。

模块化安装

该库现在采用了更加模块化的设计，你可以只导入核心（不包含默认工厂或路由）：

yarn add @projectstorm/react-diagrams-core

它构建在不断发展的react-canvas-core库之上：

yarn add @projectstorm/react-canvas-core

它还使用了：

yarn add @projectstorm/geometry

当然，你还可以添加一些额外的功能：

yarn add @projectstorm/react-diagrams-defaults
yarn add @projectstorm/react-diagrams-routing

快速开始

下面我们将通过一个简单的示例来展示如何使用react-diagrams创建一个基本的流程图。

引入必要的模块

首先，我们需要引入所需的模块：

import createEngine, { 
    DefaultLinkModel, 
    DefaultNodeModel,
    DiagramModel 
} from '@projectstorm/react-diagrams';

import {
    CanvasWidget
} from '@projectstorm/react-canvas-core';

创建引擎实例

接下来，我们创建一个引擎实例，它将引导一个包含所有默认设置的DiagramEngine：

// 创建一个包含所有默认值的引擎实例
const engine = createEngine();

创建节点

然后，我们创建两个节点：

// 节点1
const node1 = new DefaultNodeModel({
    name: 'Node 1',
    color: 'rgb(0,192,255)',
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort('Out');

// 节点2
const node2 = new DefaultNodeModel({
    name: 'Node 2',
    color: 'rgb(255,192,0)',
});
node2.setPosition(300, 200);
let port2 = node2.addInPort('In');

连接节点

现在我们将两个节点的端口连接起来：

// 连接它们并为链接添加标签
const link = port1.link<DefaultLinkModel>(port2);
link.addLabel('Hello World!');

创建图表模型并添加元素

接下来，我们创建一个DiagramModel来包含所有元素，并将它们添加到模型中，然后将模型添加到引擎：

const model = new DiagramModel();
model.addAll(node1, node2, link);
engine.setModel(model);

渲染图表

最后，我们使用React渲染图表：

<CanvasWidget engine={engine} />

通过以上几个简单的步骤，我们就创建了一个基本的流程图。你可以根据自己的需求，进一步定制节点样式、链接样式等。

实际应用场景

react-diagrams可以应用于多种场景，如工作流设计、数据流程图、状态机设计等。以下是一些实际应用的示例：

个人项目示例

以下是使用自定义模型的示例实现（Dylan的个人代码）：

默认模型示例

使用默认模型可以立即开始：

高级功能

react-diagrams还提供了许多高级功能，以满足更复杂的需求：

自定义节点

你可以创建自定义节点来满足特定的业务需求。例如，在diagrams-demo-gallery/demos/demo-custom-node1/目录中，展示了如何创建菱形节点。

链接路由

react-diagrams提供了多种链接路由算法，如直角路由和路径查找路由。你可以根据需要选择合适的路由方式，具体实现可参考packages/react-diagrams-routing/目录。

事件监听

你可以监听图表的各种事件，如节点移动、链接创建等，以便在特定事件发生时执行自定义逻辑。相关示例可参考diagrams-demo-gallery/demos/demo-listeners/目录。

总结

react-diagrams是一款功能强大、易于使用的React流程图库，它具有模块化设计、可扩展性强、支持HTML节点等特点。通过本文的介绍，你已经了解了react-diagrams的基本概念、安装方法、快速开始以及高级功能。希望本文能够帮助你快速上手react-diagrams，并将其应用到实际项目中，让前端可视化开发变得更加简单高效。

如果你对react-diagrams感兴趣，可以访问项目仓库获取更多信息和示例代码：https://gitcode.com/gh_mirrors/re/react-diagrams

如果你觉得本文对你有帮助，请点赞、收藏、关注三连，以便获取更多关于react-diagrams的实用教程和技巧。下期我们将介绍如何自定义节点和链接，敬请期待！