Drawflow - Simple flow library

Drawflow is a simple javascript flow library that allows you to create data flows easily and quickly.

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

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>

2. HTML

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

3. JAVASCRIPT

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

4. Mouse and Keys

• del key to remove element.
• Right click to show remove options (Mobile long press).
• Left click press to move editor or node selected.
• Ctrl + Mouse Wheel Zoom in/out (Mobile pinch).

5. Editor

You can change the editor to fixed type to block. Only editor can be moved. You can put it before start.

editor.editor_mode = 'edit'; // Default
editor.editor_mode = 'fixed'; // Only scroll

You can also adjust the zoom values.

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

6. Editor options

Reroute

Active reroute connections. Use before start or import.

editor.reroute = true;

Create point with double click on line connection. Double click on point for remove.

7. Modules

Separate your flows in different editors.

editor.addModule('nameNewModule');
editor.changeModule('nameNewModule');
editor.removeModule('nameModule');
// Default Module is Home
editor.changeModule('Home');

RemovedModule if it is in the same module redirects to the Home module

8. Nodes

Adding a node is simple.

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

You can use the attribute df-* in inputs, textarea or select to synchronize with the node data and contenteditable.

Atrributs multiples parents support df-*-*...

9. Methods

Other available functions.

Methods example

editor.removeNodeId('node-4');

10. Events

You can detect events that are happening.

List of available events:

Events example

editor.on('nodeCreated', function(id) {
  console.log("Node created " + id);
})

Export / Import

You can export and import your data.

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