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 generates a reasonable flowchart by way of drag and drop.

Features

• Drag Nodes
• Multiple Inputs / Outputs
• Multiple connections
• Delete Nodes and Connections
• Add/Delete inputs/outputs
• Reroute connections
• Data sync on Nodes
• Zoom in / out
• Clear data module
• Support modules
• Editor mode edit, fixed or view
• Import / Export data
• Events
• Mobile support
• Vanilla javascript (No dependencies)
• NPM
• Vue Support component nodes && Nuxt

Must Read: Best Pure Flow Chart In CSS & HTML | CSS Process Diagram

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

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