Drawflow–前端流程绘画软件

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

发表评论

登录后才能评论