Home

Awesome

npm npm npm bundle size GitHub license Twitter URL

Drawflow

Demo

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

Table of contents

Features

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();
ParameterTypeDescription
idObjectName of module
renderObjectIt's for Vue.
parentObjectIt'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

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

ParameterTypeDefaultDescription
rerouteBooleanfalseActive reroute
reroute_fix_curvatureBooleanfalseFix adding points
curvatureNumber0.5Curvature
reroute_curvature_start_endNumber0.5Curvature reroute first point and las point
reroute_curvatureNumber0.5Curvature reroute
reroute_widthNumber6Width of reroute
line_pathNumber5Width of line
force_first_inputBooleanfalseForce the first input to drop the connection on top of the node
editor_modeTexteditedit for edit, fixed for nodes fixed but their input fields available, view for view only
zoomNumber1Default zoom
zoom_maxNumber1.6Default zoom max
zoom_minNumber0.5Default zoom min
zoom_valueNumber0.1Default zoom value update
zoom_last_valueNumber1Default zoom last value
draggable_inputsBooleantrueDrag nodes on click inputs
useuuidBooleanfalseUse 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);
ParameterTypeDescription
nametextName of module
inputsnumberNumber of de inputs
outputsnumberNumber of de outputs
pos_xnumberPosition on start node left
pos_ynumberPosition on start node top
classtextAdded classname to de node. Multiple classnames separated by space
datajsonData passed to node
htmltextHTML drawn on node or name of register node.
typenodeboolean & textDefault 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');
ParameterTypeDescription
nametextName of module registered.
htmltextHTML to drawn or vue component.
propsjsonOnly for vue. Props of component. Not Required
optionsjsonOnly for vue. Options of component. Not Required

Methods

Other available functions.

MehtodDescription
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
updateNodeDataFromIdUpdate 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:

EventReturnDescription
nodeCreatedidid of Node
nodeRemovedidid of Node
nodeDataChangedidid of Node df-* attributes changed.
nodeSelectedidid of Node
nodeUnselectedtrueUnselect node
nodeMovedidid of Node
connectionStart{ output_id, output_class }id of nodes and output selected
connectionCanceltrueConnection 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
connectionUnselectedtrueUnselect connection
addRerouteidid of Node output
removeRerouteidid of Node output
rerouteMovedidid of Node output
moduleCreatednamename of Module
moduleChangednamename of Module
moduleRemovednamename of Module
clickeventClick event
clickEndeventOnce the click changes have been made
contextmenueventClick second button mouse event
mouseMove{ x, y }Position
mouseUpeventMouseUp Event
keydowneventKeydown event
zoomzoom_levelLevel of zoom
translate{ x, y }Position translate editor
importimportFinish import
exportdataData 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