如絲般順滑！4 行代碼就能創(chuàng)建一個數(shù)據(jù)流工具！

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

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

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

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

<div id="drawflow">div>

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

import?Vue?from?'vue'//?Pass?render?Vuethis.editor = new Drawflow(id, Vue);

import?*?as?Vue?from?'vue'//?Pass?render?Vuethis.editor = new Drawflow(id, Vue);

build:?{????transpile:?['drawflow'],????...  }

editor.addModule('nameNewModule');editor.changeModule('nameNewModule');editor.removeModule('nameModule');//?Default?Module?is?Homeeditor.changeModule('Home');

var?html?=?`
"text"?df-name>
`;var?data?=?{?"name":?''?};editor.addNode('github', 0, 1, 150, 300, 'github', data, html);

var?html?=?document.createElement("div");html.innerHTML?=??"Hello?Drawflow!!";editor.registerNode('test',?html);//?Useeditor.addNode('github',?0,?1,?150,?300,?'github',?data,?'test',?true);//?For?vueimport?component?from?'~/components/testcomponent.vue'editor.registerNode('name',?component,?props,?options);//?Use?for?vueeditor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');

editor.on('nodeCreated',?function(id)?{??console.log("Node?created?"?+?id);})