Drag And Drop Flowchart Builder – Drawflow

Category: Chart & Graph , Javascript | June 30, 2022
Author:jerosoler
Views Total:14,945 views
Official Page:Go to website
Last Update:June 30, 2022
License:MIT

Preview:

Drag And Drop Flowchart Builder – Drawflow

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

You Might Be Interested In:


Leave a Reply