repository·master·Indexed 26 days ago
https://github.com/jerosoler/drawflowA lightweight, vanilla JavaScript library for creating and managing visual data flows. Drawflow supports drag-and-drop nodes, multiple connections, zooming, and import/export of flow data, with specialized integration support for Vue.js and Nuxt.
To use Drawflow, first create a parent container element in your HTML, then instantiate the Drawflow class and call .start().
HTML
<div id="drawflow"></div>JavaScript
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();You can install Drawflow using npm or include it directly via CDN. For TypeScript users, install the type definitions separately.
NPM Installation
npm i drawflowTypeScript Support
npm install -D @types/drawflowCDN Usage Include the CSS and JS files in your HTML:
<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>Drawflow has built-in support for Vue frameworks.
Vue 2 Pass the Vue instance and the render function to the constructor:
import Vue from 'vue'
this.editor = new Drawflow(id, Vue, this);Vue 3
Pass the Vue object containing h and render, and the current instance context:
import { h, getCurrentInstance, render } from 'vue'
const Vue = { version: 3, h, render };
const internalInstance = getCurrentInstance();
this.editor = new Drawflow(id, Vue, internalInstance.appContext.app._context);Nuxt
Add drawflow to the transpile array in your nuxt.config.js:
build: {
transpile: ['drawflow'],
...
}You can customize the editor behavior using various properties. Some common options include:
editor_mode: 'edit' (default), 'fixed' (only editor moves), or 'view' (read-only).zoom_max, zoom_min, zoom_value: Control zoom limits and increments.reroute: Boolean to enable connection rerouting.useuuid: Use UUIDs for node IDs instead of integer indices.curvature: Number for connection line curvature.Example: Changing Editor Mode
editor.editor_mode = 'fixed';You can save the current state of the editor by using editor.export() and restore a previously saved state using editor.import(data). The exported data is a JSON object containing all flow information, including nodes, connections, positions, and classes.
var exportdata = editor.export();
editor.import(exportdata);Modules allow you to separate different flows within the same editor instance.
addModule(name): Creates a new module.changeModule(name): Switches to the specified module.removeModule(name): Deletes a module.changeModule('Home'): Switches to the default 'Home' module.Note: If a removed module is in the same module, it redirects to 'Home'.
You can hook into editor actions using the .on(event, callback) method.
Common Events
nodeCreated: Fired when a node is added (returns id).nodeRemoved: Fired when a node is deleted (returns id).nodeDataChanged: Fired when df-* attributes change (returns id).connectionCreated: Fired when a connection is made (returns { output_id, input_id, output_class, input_class }).export: Fired when data is exported (returns data).Example: Listening for Node Creation
editor.on('nodeCreated', function(id) {
console.log("Node created " + id);
})Nodes can be added using raw HTML or by registering a template for reuse.
Add a Node with HTML
Use the df-* attribute pattern (e.g., df-name) in your HTML to synchronize input/textarea/select elements with the node's data object.
var html = `<div><input type="text" df-name></div>`;
var data = { "name": '' };
editor.addNode('github', 0, 1, 150, 300, 'github', data, html);Register a Node for Reuse
var html = document.createElement("div");
html.innerHTML = "Hello Drawflow!!";
editor.registerNode('test', html);
// Use the registered node
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);Register a Vue Component Node
import component from '~/components/testcomponent.vue'
editor.registerNode('name', component, props, options);
// Use the Vue node
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');editor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);The exported data follows a specific JSON structure where the top-level key is drawflow, containing flow names (e.g., Home, Other). Each flow contains a data object where keys are node IDs. Each node object includes:
id: Unique identifier.name: Node name.data: Custom data associated with the node.class: CSS class applied to the node.html: The inner HTML content of the node.inputs: Object containing input connection details.outputs: Object containing output connection details.pos_x / pos_y: X and Y coordinates.{
"drawflow": {
"Home": {
"data": {}
},
"Other": {
"data": {
"16": {
"id": 16,
"name": "facebook",
"data": {},
"class": "facebook",
"html": "...",
"inputs": {},
"outputs": {
"output_1": {
"connections": [
{
"node": "17",
"output": "input_1"
}
]
}
},
"pos_x": 226,
"pos_y": 138
}
}
}
}
}The following methods are available for manipulating the editor state:
| Method | Description |
|---|---|
zoom_in() | Increment zoom by +0.1 |
zoom_out() | Decrement zoom by -0.1 |
getNodeFromId(id) | Get info of a node by its ID |
getNodesFromName(name) | Return an array of node IDs matching the name |
removeNodeId(id) | Remove a node by ID |
updateNodeDataFromId(id, data) | Update node data element |
addNodeInput(id) | Add an input to a node |
addNodeOutput(id) | Add an output to a node |
removeNodeInput(id, input_class) | Remove a specific input (e.g., input_2) |
removeNodeOutput(id, output_class) | Remove a specific output (e.g., output_2) |
addConnection(id_output, id_input, output_class, input_class) | Add a connection between nodes |
removeSingleConnection(id_output, id_input, output_class, input_class) | Remove a specific connection |
clear() | Clear all data and remove all modules |