Author: | jerosoler |
---|---|
Views Total: | 14,945 views |
Official Page: | Go to website |
Last Update: | June 30, 2022 |
License: | MIT |
Preview:

Description:
Drawflow is a JavaScript library to dynamically generate a pretty flowchart via 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.
Install & Download:
# NPM $ npm install drawflow --save
How to use it:
1. Import the drawflow as ES module.
import Drawflow from 'drawflow' import styleDrawflow from 'drawflow/dist/drawflow.min.css'
2. Or Load the Drawflow’s JavaScript and CSS files in 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 where you want 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 editing the flowchart.
editor.start();
6. Add nodes to the flowchart.
- name: node name
- input: the number of inputs
- outputs: the number of outputs
- pos_x: node position (x-axis)
- pos_y: node position (y-axis)
- class: CSS classes appended to the node
- data: JSON data to be passed to the node
- html: HTML content or the name of the reusable node.
- typenode: true for HTML, vue for vue
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 factors.
editor.zoom_max = 1.6; editor.zoom_min = 0.5;
11. More API methods.
// get node from ID editor.getNodeFromId(id) // get nodes from name editor.getNodesFromName(name) // remove a node editor.removeNodeId(id) // 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) // 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) // update connections between nodes editor.updateConnectionNodes(id) // remove a collection between nodes editor.removeConnectionNodeId(id); // get module from node ID editor.getModuleFromNodeId(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('nodeDataChanged', function(id) { // do something }) editor.on('nodeSelected', function(id) { // do something }) editor.on('nodeUnselected', function(id) { // do something }) editor.on('nodeMoved', 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('connectionSelected', function(ouput_id, input_id, ouput_class, input_class) { // do something }) editor.on('connectionUnselected', function() { // do something }) editor.on('connectionStart', function(output_id, output_class) { // do something }) editor.on('connectionCancel', function() { // do something }) editor.on('addReroute', function(id) { // do something }) editor.on('removeReroute', function(id) { // do something }) editor.on('rerouteMoved', function(id) { // do something }) editor.on('moduleCreated', function(name) { // do something }) editor.on('moduleChanged', function(name) { // do something }) editor.on('moduleRemoved', function(name) { // do something }) editor.on('mouseMove', function(x, y) { // do something }) editor.on('mouseUp', function(event) { // do something }) editor.on('keydown', function(event) { // do something }) editor.on('click', function(event) { // do something }) editor.on('clickEnd', function(event) { // do something }) editor.on('contextmenu', function(event) { // do something }) editor.on('zoom', function(zoom_level) { // do something }) editor.on('translate', function(x, y) { // do something }) editor.on('import', function() { // do something }) editor.on('export', function(data) { // do something })
Changelog:
v0.0.59 (06/30/2022)
- Bugfix
v0.0.58 (05/04/2022)
- [Bug] Right click when creating a connection
- [Breaking] Input inside nodes are not editable
v0.0.57 (05/03/2022)
- Fix issue where Safari attempts to select text during drag operations
v0.0.56 (04/28/2022)
- Fix chrome zoom
- Fix reroute points add and remove
v0.0.55 (01/04/2022)
- Fix remove listeners
v0.0.54 (11/29/2021)
- Multiples classname nodes
v0.0.53 (11/11/2021)
- Fix Path disapear on chrome zoom
v0.0.52 (10/27/2021)
- Add new event mouseUp
v0.0.51 (10/20/2021)
- Fix Vue 3 AddNodeImport
v0.0.50 (10/20/2021)
- Add support for Vue 3
v0.0.48 (08/05/2021)
- Fix css zoom
v0.0.47 (08/05/2021)
- Fix Misaligned routes when chrome zoom is not 100%
- Removed unused css
v0.0.46 (08/05/2021)
- Add event nodeDataChanged
v0.0.45 (07/10/2021)
- Add event rerouteMoved
- Fix event importon change module
- Removed old code and comments
v0.0.44 (07/08/2021)
- Fixed the parent instance for Vue
v0.0.43 (07/03/2021)
- Fix container query dom.
v0.0.42 (05/15/2021)
- Fix df-attributes updates
v0.0.41 (05/14/2021)
- Fix df- attribute levels
v0.0.40 (04/05/2021)
- Added ‘view’ editor mode
v0.0.39 (03/19/2021)
- Bugfix
v0.0.38 (02/27/2021)
- Fix: data node null value
v0.0.37 (02/20/2021)
- Use of UUID as node id instead if integer index. Swithable between index and UUID use.
v0.0.35 (02/14/2021)
- add: connectionStart & connectionCancel event
v0.0.34 (01/28/2021)
- add: connectionSelected and connectionUnselected events
v0.0.33 (01/12/2021)
- fix: Drag type select
v0.0.32 (12/08/2020)
- add: Support vue3
v0.0.31 (11/29/2020)
- add: updateNodeDataFromId function
v0.0.30 (11/11/2020)
- fix:zoom on translate canvas
- add:zoom_last_value
v0.0.29 (11/08/2020)
- fix: force_first_input with 0 inputs
v0.0.27 (10/25/2020)
- Added clickEnd event
v0.0.26 (10/16/2020)
- Fix removeNodeOutput and removeNodeInput more than 10 items
v0.0.25 (09/22/2020)
- Added context menu event
v0.0.24 (09/16/2020)
- Fix nodemoved fire event (only on move)
v0.0.23 (08/28/2020)
- Removed console log
v0.0.20 (08/25/2020)
- Fix addConnection reroute
v0.0.20 (08/07/2020)
- Added reroute fix curvatures
v0.0.19 (08/06/2020)
- Added reroute fix curvatures
v0.0.18 (08/02/2020)
- Fix reroute connections back connections
v0.0.17 (08/01/2020)
- Fix removeNodeOutput with reroutes points
v0.0.15 (07/30/2020)
- added removeNodeInput And removeNodeOutput
v0.0.14 (07/28/2020)
- added addNodeOutput and addNodeInput function
v0.0.13 (07/24/2020)
- Add removeSingleConnection
v0.0.11 (07/15/2020)
- Fix Remove connection before node removed
v0.0.10 (07/12/2020)
- Added addConnection API.
v0.0.9 (07/12/2020)
- Update
07/06/2020
- Added ‘import’ event