React 的基于节点的可视化

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'
      }
    ]}
  />
);

🔭 开发

如果你想在本地运行 reaflow，非常简单！

• 克隆仓库
• npm i
• npm start
• 浏览器会打开 Storybook 页面

❤️ 贡献者

感谢所有的贡献者！