投稿

Drawflow–前端流程绘画软件

Vedu • • 资源分享 • 阅读 3723

Drawflow是一个简单流库。它允许您轻松快速地创建数据流。而我们需要做的只安装一个javascript库和几行代码即可。

演示

如下图

前端流程绘画软件Drawflow

官网

https://github.com/alwinlee/Drawflow

功能

  • 拖动节点
  • 多个输入/输出
  • 多个连接
  • 删除节点和连接
  • 添加/删除输入/输出
  • 重新路由连接
  • 节点上的数据同步
  • 放大/缩小
  • 清除数据模块
  • 支持模块
  • 编辑器模式修复和编辑
  • 导入/导出数据
  • 事件
  • 移动支架
  • Vanilla javascript（无依赖项）
  • NPM
  • Vue支持组件节点和Nuxt

安装和使用

Clone

git clone https://github.com/jerosoler/Drawflow.git

CDN

<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>

NPM

npm i drawflow

Import

import Drawflow from \'drawflow\'
import styleDrawflow from \'drawflow/dist/drawflow.min.css\'

Require

var Drawflow = require(\'drawflow\')
var styleDrawflow = require(\'drawflow/dist/drawflow.min.css\')

Create the parent element of drawflow.

<div id="drawflow">div>

Running

Start drawflow.

var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();

总结

这是一个前端数据流程库，如果同学感兴趣，可以试试！！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/19615.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-01-11 19:06
下一篇 2021-01-12 07:43

相关推荐

发表评论

登录后才能评论