Drawflow 允许你轻松快速地创建数据流。支持节点拖拽、多重连接、数据节点同步、数据模块清除、移动端设备友好等功能。
特点
-
拖动节点 -
多输入/输出 -
多个连接 -
删除节点和连接 -
添加/删除输入/输出 -
路由连接 -
节点数据同步 -
放大/缩小 -
清除数据模块 -
支持模块 -
编辑模式编辑、固定或查看 -
导入/导出数据 -
事件 -
手机支持 -
Vanilla javascript(无依赖) -
支持NPM、Vue、Nuxt
GitHub数据
-
2.5k stars -
54 watching -
434 forks
开源地址:https://github.com/jerosoler/Drawflow
安装
CDN
# Last
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
# or version view releases https://github.com/jerosoler/Drawflow/releases
<link rel="stylesheet" href="https://unpkg.com/drawflow@x.x.xx/dist/drawflow.min.css" />
<script src="https://unpkg.com/drawflow@x.x.xx/dist/drawflow.min.js"></script>
NPM
npm i drawflow
Typescript
npm install -D @types/drawflow
使用
vue 2
import Vue from 'vue'
// Pass render Vue
this.editor = new Drawflow(id, Vue, this);
vue3
import { h, getCurrentInstance, render } from 'vue'
const Vue = { version: 3, h, render };
this.editor = new Drawflow(id, Vue);
// Pass render Vue 3 Instance
const internalInstance = getCurrentInstance()
editor.value = new Drawflow(id, Vue, internalInstance.appContext.app._context);
Nuxt
build: {
transpile: ['drawflow'],
...
}
体验一下
页面内置一些图标,拖拽就可以使用。
支持自定义主题
页面上的主题风格是可以自定义的。
我修改了一下节点的背景色,效果如下
更多功能广大网友可以继续挖掘。
微信公众号:[开源日记],分享10k+Start的优质开源项目。
原文始发于微信公众号（开源日记）：2.5k stars4行代码就能创建一个数据流工具
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/49835.html
