Github
文档
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 inpm start- 浏览器会打开 Storybook 页面
❤️ 贡献者
感谢所有的贡献者！
