Drawflow

Simple flow library.

Drawflow allows you to create data flows easily and quickly.

Installing only a javascript library and with four lines of code.

⭐ LIVE DEMO

🎨 THEME EDIT GENERATOR

Features

Drag Nodes
Multiple Inputs / Outputs
Multiple connections
Delete Nodes and Connections
Add/Delete inputs/outputs
Reroute connections
Data sync on Nodes
Zoom in / out
Clear data module
Support modules
Editor mode edit, fixed or view
Import / Export data
Events
Mobile support
Vanilla javascript (No dependencies)
NPM
Vue Support component nodes && Nuxt

Installation

Download or clone repository and copy the dist folder, CDN option Or npm.

Clone

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

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

External package. More info #119

npm install -D @types/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();

Parameter	Type	Description
`id`	Object	Name of module
`render`	Object	It's for `Vue`.
`parent`	Object	It's for `Vue`. The parent Instance

For vue 2 example.

import Vue from 'vue'

// Pass render Vue
this.editor = new Drawflow(id, Vue, this);

For vue 3 example.

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

Add to nuxt.config.js file

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

Mouse and Keys

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

Editor

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;
editor.zoom_value = 0.1;

Editor options

Parameter	Type	Default	Description
`reroute`	Boolean	false	Active reroute
`reroute_fix_curvature`	Boolean	false	Fix adding points
`curvature`	Number	0.5	Curvature
`reroute_curvature_start_end`	Number	0.5	Curvature reroute first point and las point
`reroute_curvature`	Number	0.5	Curvature reroute
`reroute_width`	Number	6	Width of reroute
`line_path`	Number	5	Width of line
`force_first_input`	Boolean	false	Force the first input to drop the connection on top of the node
`editor_mode`	Text	`edit`	`edit` for edit, `fixed` for nodes fixed but their input fields available, `view` for view only
`zoom`	Number	1	Default zoom
`zoom_max`	Number	1.6	Default zoom max
`zoom_min`	Number	0.5	Default zoom min
`zoom_value`	Number	0.1	Default zoom value update
`zoom_last_value`	Number	1	Default zoom last value
`draggable_inputs`	Boolean	true	Drag nodes on click inputs
`useuuid`	Boolean	false	Use UUID as node ID instead of integer index. Only affect newly created nodes, do not affect imported nodes

Reroute

Active reroute connections. Use before start or import.

editor.reroute = true;

Create point with double click on line connection. Double click on point for remove.

Modules

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

Nodes

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. Multiple classnames separated by space
`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 and contenteditable.

Atrributs multiples parents support df-*-*...

Node example

var html = `
<div><input type="text" df-name></div>
`;
var data = { "name": '' };

editor.addNode('github', 0, 1, 150, 300, 'github', data, html);

Register Node

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`

Methods

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`
`updateNodeDataFromId`	Update data element. Ex: `5, { name: 'Drawflow' }`
`addNodeInput(id)`	Add input to node. Ex id: `5`
`addNodeOutput(id)`	Add output to node. Ex id: `5`
`removeNodeInput(id, input_class)`	Remove input to node. Ex id: `5`, `input_2`
`removeNodeOutput(id, output_class)`	Remove output to node. Ex id: `5`, `output_2`
`addConnection(id_output, id_input, output_class, input_class)`	Add connection. Ex: `15,16,'output_1','input_1'`
`removeSingleConnection(id_output, id_input, output_class, input_class)`	Remove 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.

Methods example

editor.removeNodeId('node-4');

Events

You can detect events that are happening.

List of available events:

Event	Return	Description
`nodeCreated`	id	`id` of Node
`nodeRemoved`	id	`id` of Node
`nodeDataChanged`	id	`id` of Node df-* attributes changed.
`nodeSelected`	id	`id` of Node
`nodeUnselected`	true	Unselect node
`nodeMoved`	id	`id` of Node
`connectionStart`	{ output_id, output_class }	`id` of nodes and output selected
`connectionCancel`	true	Connection Cancel
`connectionCreated`	{ output_id, input_id, output_class, input_class }	`id`'s of nodes and output/input selected
`connectionRemoved`	{ output_id, input_id, output_class, input_class }	`id`'s of nodes and output/input selected
`connectionSelected`	{ output_id, input_id, output_class, input_class }	`id`'s of nodes and output/input selected
`connectionUnselected`	true	Unselect connection
`addReroute`	id	`id` of Node output
`removeReroute`	id	`id` of Node output
`rerouteMoved`	id	`id` of Node output
`moduleCreated`	name	`name` of Module
`moduleChanged`	name	`name` of Module
`moduleRemoved`	name	`name` of Module
`click`	event	Click event
`clickEnd`	event	Once the click changes have been made
`contextmenu`	event	Click second button mouse event
`mouseMove`	{ x, y }	Position
`mouseUp`	event	MouseUp Event
`keydown`	event	Keydown event
`zoom`	zoom_level	Level of zoom
`translate`	{ x, y }	Position translate editor
`import`	`import`	Finish import
`export`	data	Data export

Events example

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

Export / Import

You can export and import your data.

var exportdata = editor.export();
editor.import(exportdata);

Export example

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

Example

View the complete example in folder docs.
There is also an example how to use Drawflow in a custom element. (based on LitElement).

License

MIT License