Press "Enter" to skip to content

Create Data Flows with Drag And Drop Flowchart Builder | Drawflow

Flow diagram allows you to create data streams easily and quickly. Install a JavaScript library only and have four lines of code. Draw flow is a JavaScript library to dynamically generate a reasonable flowchart by way of 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.

How to make use of it:

Install & Download:

# NPM
$ npm install drawflow --save

1. Import the draw flow as the ES module.

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

2. Or Load the Drawflow’s JavaScript and CSS records data within the doc.

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

3. Create a container in the place you need 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 modifying the flowchart.

editor.start();

6. add nodes to the flowchart.

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 components.

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

11. More API strategies.

// remove a node
editor.removeNodeId(id);

// 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)

// 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)

// remove a collection between nodes
editor.removeConnectionNodeId(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('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('moduleCreated', function(name) {
  // do something
})

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

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

editor.on('zoom', function(zoom_level) {
  // do something
})

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

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

Drag And Drop Flowchart Builder, Javascript Interactive Flowchart, Free Flowchart Builder, Diagram Flowchart Builder, Flowchart Diagram Tool


See Demo And Download

Official Website(jerosoler): Click Here

This superior jQuery/javascript plugin is developed by jerosoler. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.