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
Installation
- Running
Mouse and Keys
Editor
- Options
Modules
Nodes
- Node example
- Register Node
Methods
- Methods example
Events
- Events example
Export / Import
- Export example
Example
License

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 fixed and edit
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

<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();

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

For vue example.

import Vue from 'vue'

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

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 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` or `fixed` mode
`zoom`	Number	1	Default zoom
`zoom_max`	Number	1.6	Default zoom max
`zoom_min`	Number	0.5	Default zoom min
`draggable_inputs`	Boolean	true	Drag nodes on click inputs

Reroute

Active reroute connections. Use before start or import.

editor.reroute = true;

Create point with doble click on line connection. Doble 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
`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-*-*...

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`
`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
`nodeSelected`	id	`id` of Node
`nodeUnselected`	true	Unselect 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
`addReroute`	id	`id` of Node output
`removeReroute`	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
`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.

License

MIT License

drawflow-ie11

Drawflow

Table of contents

Features

Installation

Clone

CDN

NPM

Import

Require

Running

For vue example.

Nuxt

Mouse and Keys

Editor

Editor options

Reroute

Modules

Nodes

Node example

Register Node

Methods

Methods example

Events

Events example

Export / Import

Export example

Example

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads