Drawflow

Simple flow library

Diagram / Flow chartDrag and dropVisual Programming
jerosoler/Drawflowjerosoler.github.io/Drawflow/drawflow

README

Drawflow


Demo

Simple flow library.

Drawflow allows you to create data flows easily and quickly.

Installing only a javascript library and with four lines of code.

⭐ LIVE DEMO

🎨 THEME EDIT GENERATOR

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

Installation

Download or clone repository and copy the dist folder, CDN option Or npm.  

Clone

git clone https://github.com/jerosoler/Drawflow.git

CDN

  1. ```html
  2. # Last
  3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
  4. <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
  5. # or version view releases https://github.com/jerosoler/Drawflow/releases
  6. <link rel="stylesheet" href="https://unpkg.com/drawflow@x.x.xx/dist/drawflow.min.css" />
  7. <script src="https://unpkg.com/drawflow@x.x.xx/dist/drawflow.min.js"></script>
  8. ```

NPM

  1. ```javascript
  2. npm i drawflow
  3. ```

Typescript

External package. More info #119
  1. ```javascript
  2. npm install -D @types/drawflow
  3. ```

Import

  1. ```javascript
  2. import Drawflow from 'drawflow'
  3. import styleDrawflow from 'drawflow/dist/drawflow.min.css'
  4. ```

Require

  1. ```javascript
  2. var Drawflow = require('drawflow')
  3. var styleDrawflow = require('drawflow/dist/drawflow.min.css')
  4. ```

Create the parent element of drawflow.
  1. ```html
  2. <div id="drawflow"></div>
  3. ```

Running

Start drawflow.
  1. ```javascript
  2. var id = document.getElementById("drawflow");
  3. const editor = new Drawflow(id);
  4. editor.start();
  5. ```
Parameter | Type | Description
id | Object | Name of module
render | Object | It's for Vue.
parent | Object | It's for Vue. The parent Instance

For vue 2 example.

  1. ```javascript
  2. import Vue from 'vue'

  4. // Pass render Vue
  5. this.editor = new Drawflow(id, Vue, this);
  6. ```

For vue 3 example.

  1. ```javascript
  2. import { h, getCurrentInstance, render } from 'vue'
  3. const Vue = { version: 3, h, render };

  5. this.editor = new Drawflow(id, Vue);
  6. // Pass render Vue 3 Instance
  7. const internalInstance = getCurrentInstance()
  8. editor.value = new Drawflow(id, Vue, internalInstance.appContext.app._context);
  9. ```

Nuxt

Add to nuxt.config.js file
  1. ```javascript
  2. build: {
  3.     transpile: ['drawflow'],
  4.     ...
  5.   }
  6. ```

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

Editor

You can change the editor to fixed type to block. Only editor can be moved. You can put it before start.
  1. ```javascript
  2. editor.editor_mode = 'edit'; // Default
  3. editor.editor_mode = 'fixed'; // Only scroll
  4. ```
You can also adjust the zoom values.
  1. ```javascript
  2. editor.zoom_max = 1.6;
  3. editor.zoom_min = 0.5;
  4. editor.zoom_value = 0.1;
  5. ```

Editor options


Parameter | Type | Default | Description
reroute | Boolean | false | Active reroute
reroute_fix_curvature | Boolean | false | Fix adding points
curvature | Number | 0.5 | Curvature
reroute_curvature_start_end | Number | 0.5 | Curvature reroute first point and las point
reroute_curvature | Number | 0.5 | Curvature reroute
reroute_width | Number | 6 | Width of reroute
line_path | Number | 5 | Width of line
force_first_input | Boolean | false | Force the first input to drop the connection on top of the node
editor_mode | Text | edit | edit for edit, fixed for nodes fixed but their input fields available, view for view only
zoom | Number | 1 | Default zoom
zoom_max | Number | 1.6 | Default zoom max
zoom_min | Number | 0.5 | Default zoom min
zoom_value | Number | 0.1 | Default zoom value update
zoom_last_value | Number | 1 | Default zoom last value
draggable_inputs | Boolean | true | Drag nodes on click inputs
useuuid | Boolean | false | Use UUID as node ID instead of integer index. Only affect newly created nodes, do not affect imported nodes

Reroute

Active reroute connections. Use before start or import.
  1. ```javascript
  2. editor.reroute = true;
  3. ```
Create point with double click on line connection. Double click on point for remove.

Modules

Separate your flows in different editors.
  1. ```javascript
  2. editor.addModule('nameNewModule');
  3. editor.changeModule('nameNewModule');
  4. editor.removeModule('nameModule');
  5. // Default Module is Home
  6. editor.changeModule('Home');
  7. ```
RemovedModule if it is in the same module redirects to the Home module