reaflow

<div align="center"> <img width="650" src="https://yellow-cdn.veclightyear.com/835a84d5/b13e3180-db44-4b6b-af3a-5568dcf3751a.png"> <br /> React 的基于节点的可视化 <br /><br /> <a href="https://github.com/reaviz/reaflow/workflows/build/"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/0731bddf-3f93-4fec-9a4a-35d2a7652649.svg?branch=master" /> </a> <a href="https://npm.im/reaflow"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/1707a5af-6592-464b-b62a-3feeaf530cf3.svg" /> </a> <a href="https://npm.im/reaflow"> <img src="https://badgen.net/npm/dw/reaflow" /> </a> <a href="https://github.com/reaviz/reaflow/blob/master/LICENSE"> <img src="https://badgen.now.sh/badge/license/apache2" /> </a> <a href="https://discord.gg/tt8wGExq35"> <img src="https://img.shields.io/discord/773948315037073409?label=discord"> </a> <a href="https://opencollective.com/reaviz"> <img alt="Open Collective 支持者和赞助商" src="https://img.shields.io/opencollective/all/reaviz?label=backers"> </a> </div>

REAFLOW 是一个模块化的图表引擎，用于构建静态或交互式编辑器。该库功能丰富且模块化，允许展示复杂的可视化效果，具有完全的可定制性。

🚀 快速链接

查看文档和演示
从更新日志了解更新内容

💎 其他项目

Reagraph - 用于大型 WebGL 网络图的开源库。
Reablocks - 基于 Tailwind 的 React 开源组件库。
Reaviz - React 数据可视化的开源库。
Reachat - 用于构建 React LLM/聊天界面的开源库。

✨ 特性

利用 ELKJS 实现复杂的自动布局
简单的节点/边/端口自定义
缩放/平移/居中控制
节点/端口的拖放连接和重排
节点/边的嵌套
基于邻近度的节点连接辅助
节点/边选择辅助
撤销/重做辅助

📦 使用方法

通过 NPM 安装包：

npm i reaflow --save

通过 Yarn 安装包：

yarn add reaflow

将组件导入到你的应用中并添加一些节点和边：

import React from 'react';
import { Canvas } from 'reaflow';

export default () => (
  <Canvas
    maxWidth={800}
    maxHeight={600}
    nodes={[
      {
        id: '1',
        text: '1'
      },
      {
        id: '2',
        text: '2'
      }
    ]}
    edges={[
      {
        id: '1-2',
        from: '1',
        to: '2'
      }
    ]}
  />
);