Drag And Drop Flowchart Builder – Drawflow

Preview:

Description:

Drawflow is a JavaScript library to dynamically generate a pretty flowchart via drag and drop.

More Features:

• Zoom in/out.
• keyboard interactions.
• Preview & Editor mode.
• Predefined node blocks.
• Add/remove/clear nodes.
• Draw connection lines between blocks.
• Responsive and mobile-friendly.
• Import & Export as JSON data.
• Event handlers.

Install & Download:

# NPM
$ npm install drawflow --save

How to use it:

1. Import the drawflow as ES module.

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

2. Or Load the Drawflow’s JavaScript and CSS files in the document.

<link rel="stylesheet" href="/path/to/dist/drawflow.min.css" />
<script src="/path/to/dist/drawflow.min.js"></script>

3. Create a container where you want to render the flowchart.

<div id="drawflow"></div>

4. Initialize the flowchart builder.

var example = document.getElementById("drawflow");
const editor = new Drawflow(example);

5. Start editing the flowchart.

editor.start();

6. Add nodes to the flowchart.

• name: node name
• input: the number of inputs
• outputs: the number of outputs
• pos_x: node position (x-axis)
• pos_y: node position (y-axis)
• class: CSS classes appended to the node
• data: JSON data to be passed to the node
• html: HTML content or the name of the reusable node.
• typenode: true for HTML, vue for vue

editor.addNode(name, inputs, outputs, posx, posy, class, data, html);

7. Register reusable nodes.

var html = document.createElement("div");
html.innerHTML =  "Hello World!";
editor.registerNode('myNode', html);
editor.addNode('newNode', 0, 1, 150, 300, 'newNode', data, 'myNode', true);

8. Export & import chart data.

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

9. Disable the editor mode.

editor.editor_mode = 'fixed';

10. Adjust the min/max zoom factors.

editor.zoom_max = 1.6;
editor.zoom_min = 0.5;

11. More API methods.

// get node from ID
editor.getNodeFromId(id)
// get nodes from name
editor.getNodesFromName(name)
// remove a node
editor.removeNodeId(id)
// add input to node
editor.addNodeInput(id)
// add output to node
editor.addNodeOutput(id);
// remove input from node.
editor.removeNodeInput(id, input_class)
// remove output from node
editor.removeNodeOutput(id, output_class)
// add a connection
editor.addConnection(id_output, id_input, output_class, input_class)
// remove connection
editor.removeSingleConnection(id_output, id_input, output_class, input_class)
// update connections between nodes
editor.updateConnectionNodes(id) 
// remove a collection between nodes
editor.removeConnectionNodeId(id);
// get module from node ID
editor.getModuleFromNodeId(id) 
// clear the data of the selected node
editor.clearModuleSelected();
// clear all data
editor.clear();
// zoom in/out
editor.zoom_in();
editor.zoom_out();

12. Event handlers.

editor.on('nodeCreated', function(id) {
  // do something
})
editor.on('nodeRemoved', function(id) {
  // do something
})
editor.on('nodeDataChanged', function(id) {
  // do something
})
editor.on('nodeSelected', function(id) {
  // do something
})
editor.on('nodeUnselected', function(id) {
  // do something
})
editor.on('nodeMoved', function(id) {
  // do something
})
editor.on('connectionCreated', function(ouput_id, input_id, ouput_class, input_class) {
  // do something
})
editor.on('connectionRemoved', function(ouput_id, input_id, ouput_class, input_class) {
  // do something
})
editor.on('connectionSelected', function(ouput_id, input_id, ouput_class, input_class) {
  // do something
})
editor.on('connectionUnselected', function() {
  // do something
})
editor.on('connectionStart', function(output_id, output_class) {
  // do something
})
editor.on('connectionCancel', function() {
  // do something
})
editor.on('addReroute', function(id) {
  // do something
})
editor.on('removeReroute', function(id) {
  // do something
})
editor.on('rerouteMoved', function(id) {
  // do something
})
editor.on('moduleCreated', function(name) {
  // do something
})
editor.on('moduleChanged', function(name) {
  // do something
})
editor.on('moduleRemoved', function(name) {
  // do something
})
editor.on('mouseMove', function(x, y) {
  // do something
})
editor.on('mouseUp', function(event) {
  // do something
})
editor.on('keydown', function(event) {
  // do something
})
editor.on('click', function(event) {
  // do something
})
editor.on('clickEnd', function(event) {
  // do something
})
editor.on('contextmenu', function(event) {
  // do something
})
editor.on('zoom', function(zoom_level) {
  // do something
})
editor.on('translate', function(x, y) {
  // do something
})
editor.on('import', function() {
  // do something
})
editor.on('export', function(data) {
  // do something
})

Changelog:

v0.0.59 (06/30/2022)

• Bugfix

v0.0.58 (05/04/2022)

• [Bug] Right click when creating a connection
• [Breaking] Input inside nodes are not editable

v0.0.57 (05/03/2022)

• Fix issue where Safari attempts to select text during drag operations

v0.0.56 (04/28/2022)

• Fix chrome zoom
• Fix reroute points add and remove

v0.0.55 (01/04/2022)

• Fix remove listeners

v0.0.54 (11/29/2021)

• Multiples classname nodes

v0.0.53 (11/11/2021)

• Fix Path disapear on chrome zoom

v0.0.52 (10/27/2021)

• Add new event mouseUp

v0.0.51 (10/20/2021)

• Fix Vue 3 AddNodeImport

v0.0.50 (10/20/2021)

• Add support for Vue 3

v0.0.48 (08/05/2021)

• Fix css zoom

v0.0.47 (08/05/2021)

• Fix Misaligned routes when chrome zoom is not 100%
• Removed unused css

v0.0.46 (08/05/2021)

• Add event nodeDataChanged

v0.0.45 (07/10/2021)

• Add event rerouteMoved
• Fix event importon change module
• Removed old code and comments

v0.0.44 (07/08/2021)

• Fixed the parent instance for Vue

v0.0.43 (07/03/2021)

• Fix container query dom.

v0.0.42 (05/15/2021)

• Fix df-attributes updates

v0.0.41 (05/14/2021)

• Fix df- attribute levels

v0.0.40 (04/05/2021)

• Added ‘view’ editor mode

v0.0.39 (03/19/2021)

• Bugfix

v0.0.38 (02/27/2021)

• Fix: data node null value

v0.0.37 (02/20/2021)

• Use of UUID as node id instead if integer index. Swithable between index and UUID use.

v0.0.35 (02/14/2021)

• add: connectionStart & connectionCancel event

v0.0.34 (01/28/2021)

• add: connectionSelected and connectionUnselected events

v0.0.33 (01/12/2021)

• fix: Drag type select

v0.0.32 (12/08/2020)

• add: Support vue3

v0.0.31 (11/29/2020)

• add: updateNodeDataFromId function

v0.0.30 (11/11/2020)

• fix:zoom on translate canvas
• add:zoom_last_value

v0.0.29 (11/08/2020)

• fix: force_first_input with 0 inputs

v0.0.27 (10/25/2020)

• Added clickEnd event

v0.0.26 (10/16/2020)

• Fix removeNodeOutput and removeNodeInput more than 10 items

v0.0.25 (09/22/2020)

• Added context menu event

v0.0.24 (09/16/2020)

• Fix nodemoved fire event (only on move)

v0.0.23 (08/28/2020)

• Removed console log

v0.0.20 (08/25/2020)

• Fix addConnection reroute

v0.0.20 (08/07/2020)

• Added reroute fix curvatures

v0.0.19 (08/06/2020)

• Added reroute fix curvatures

v0.0.18 (08/02/2020)

• Fix reroute connections back connections

v0.0.17 (08/01/2020)

• Fix removeNodeOutput with reroutes points

v0.0.15 (07/30/2020)

• added removeNodeInput And removeNodeOutput

v0.0.14 (07/28/2020)

• added addNodeOutput and addNodeInput function

v0.0.13 (07/24/2020)

• Add removeSingleConnection

v0.0.11 (07/15/2020)

• Fix Remove connection before node removed

v0.0.10 (07/12/2020)

• Added addConnection API.

v0.0.9 (07/12/2020)

• Update

07/06/2020

• Added ‘import’ event