Simple flow library.
Drawflow allows you to create data flows easily and quickly.
Installing only a javascript library and with four lines of code.
- Features
- Installation
- Mouse and Keys
- Editor
- Modules
- Nodes
- Methods
- Events
- Export / Import
- Example
- License
- Drag Nodes
- Multiple Inputs / Outputs
- Multiple connections
- Delete Nodes and Connections
- Data sync on Nodes
- Zoom in / out
- Clear data module
- Support modules
- Editor mode
fixed
andedit
- Import / Export data
- Events
- Mobile support
- Vanilla javascript (No dependencies)
- NPM
- Vue Support component nodes && Nuxt
Download or clone repository and copy the dist folder, CDN option Or npm.
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'
Create the parent element of drawflow.
<div id="drawflow"></div>
Start drawflow.
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
Parameter | Type | Description |
---|---|---|
id |
Object | Name of module |
render |
Object | It's for Vue . |
import Vue from 'vue'
// Pass render Vue
this.editor = new Drawflow(id, Vue);
Add to nuxt.config.js
file
build: {
transpile: ['drawflow'],
...
}
del key
to remove element.Right click
to show remove options (Mobile long press).Left click press
to move editor or node selected.Ctrl + Mouse Wheel
Zoom in/out (Mobile pinch).
You can change the editor to fixed type to block. Only editor can be moved. You can put it before start.
editor.editor_mode = 'edit'; // Default
editor.editor_mode = 'fixed'; // Only scroll
You can also adjust the zoom values.
editor.zoom_max = 1.6;
editor.zoom_min = 0.5;
Separate your flows in different editors.
editor.addModule('nameNewModule');
editor.changeModule('nameNewModule');
editor.removeModule('nameModule');
// Default Module is Home
editor.changeModule('Home');
RemovedModule
if it is in the same module redirects to the Home
module
Adding a node is simple.
editor.addNode(name, inputs, outputs, posx, posy, class, data, html);
Parameter | Type | Description |
---|---|---|
name |
text | Name of module |
inputs |
number | Number of de inputs |
outputs |
number | Number of de outputs |
pos_x |
number | Position on start node left |
pos_y |
number | Position on start node top |
class |
text | Added classname to de node |
data |
json | Data passed to node |
html |
text | HTML drawn on node or name of register node. |
typenode |
boolean & text | Default false , true for Object HTML, vue for vue |
You can use the attribute df-*
in inputs, textarea or select to synchronize with the node data.
Atrributs multiples parents support df-*-*...
var html = `
<div><input type="text" df-name></div>
`;
var data = { "name": '' };
editor.addNode('github', 0, 1, 150, 300, 'github', data, html);
it's possible register nodes for reuse.
var html = document.createElement("div");
html.innerHTML = "Hello Drawflow!!";
editor.registerNode('test', html);
// Use
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);
// For vue
import component from '~/components/testcomponent.vue'
editor.registerNode('name', component, props, options);
// Use for vue
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');
Parameter | Type | Description |
---|---|---|
name |
text | Name of module registered. |
html |
text | HTML to drawn or vue component. |
props |
json | Only for vue . Props of component. Not Required |
options |
json | Only for vue . Options of component. Not Required |
Other available functions.
Mehtod | Description |
---|---|
zoom_in() |
Increment zoom +0.1 |
zoom_out() |
Decrement zoom -0.1 |
getNodeFromId(id) |
Get Info of node. Ex: id: 5 |
getNodesFromName(name) |
Return Array of nodes id. Ex: name: telegram |
removeNodeId(id) |
Remove node. Ex id: node-x |
addConnection(id_output, id_input, output_class, input_class) |
Add connection. Ex: 15,16,'output_1','input_1' |
updateConnectionNodes(id) |
Update connections position from Node Ex id: node-x |
removeConnectionNodeId(id) |
Remove node connections. Ex id: node-x |
getModuleFromNodeId(id) |
Get name of module where is the id. Ex id: 5 |
clearModuleSelected() |
Clear data of module selected |
clear() |
Clear all data of all modules and modules remove. |
editor.removeNodeId('node-4');
You can detect events that are happening.
List of available events:
Event | Return | Description |
---|---|---|
nodeCreated |
id | id of Node |
nodeRemoved |
id | id of Node |
nodeSelected |
id | id of Node |
nodeMoved |
id | id of Node |
connectionCreated |
{ output_id, input_id, output_class, input_class } | id 's of nodes and ouput/input selected |
connectionRemoved |
{ output_id, input_id, output_class, input_class } | id 's of nodes and ouput/input selected |
moduleCreated |
name | name of Module |
moduleChanged |
name | name of Module |
moduleRemoved |
name | name of Module |
mouseMove |
{ x, y } | Position |
zoom |
zoom_level | Level of zoom |
translate |
{ x, y } | Position translate editor |
import |
import |
Finish import |
editor.on('nodeCreated', function(id) {
console.log("Node created " + id);
})
You can export and import your data.
var exportdata = editor.export();
editor.import(exportdata);
Example of exported data:
{
"drawflow": {
"Home": {
"data": {}
},
"Other": {
"data": {
"16": {
"id": 16,
"name": "facebook",
"data": {},
"class": "facebook",
"html": "\n
\n
Facebook Message
\n
\n ",
"inputs": {},
"outputs": {
"output_1": {
"connections": [
{
"node": "17",
"output": "input_1"
}
]
}
},
"pos_x": 226,
"pos_y": 138
},
"17": {
"id": 17,
"name": "log",
"data": {},
"class": "log",
"html": "\n
\n
Save log file
\n
\n ",
"inputs": {
"input_1": {
"connections": [
{
"node": "16",
"input": "output_1"
}
]
}
},
"outputs": {},
"pos_x": 690,
"pos_y": 129
}
}
}
}
}
View the complete example in folder docs.
MIT License