Drag And Drop Flowchart Builder – Drawflow

Category: Chart & Graph , Javascript | October 16, 2020
Author:jerosoler
Views Total:205 views
Official Page:Go to website
Last Update:October 16, 2020
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('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('addReroute', function(id) {
  // do something
})

editor.on('removeReroute', function(id) {
  // do something
})

editor.on('moduleCreated', function(name) {
  // do something
})

editor.on('moduleChanged', function(name) {
  // do something
})

editor.on('mouseMove', function(x, y) {
  // do something
})

editor.on('keydown', function(event) {
  // do something
})

editor.on('click', 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('output', function(data) {
  // do something
})

Changelog:

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