Drawflow

Drawflow Project Introduction

Drawflow is a straightforward and efficient library designed for creating data flows with ease. This JavaScript library allows users to develop flow-based diagrams with minimal setup, making it particularly useful for those looking to implement such functionality quickly. Below is a comprehensive overview of the project's capabilities and usage.

Features

Drawflow is rich with features aimed at simplifying the creation and management of flow diagrams:

• Drag Nodes: Easily manipulate nodes within the diagram.
• Multiple Inputs/Outputs: Nodes can have multiple input and output connections.
• Connections Management: Create, delete, and reroute connections between nodes.
• Dynamic Interfaces: Add or delete inputs and outputs dynamically.
• Zoom Controls: Zoom in and out of the flow diagram for better visibility.
• Module Support: Organize different flows within separate modules.
• Editor Modes: Operate in edit, fixed, or view modes to control interaction.
• Mobile Support: Crafted with mobile use in mind.
• Integration: Seamless integration with vanilla JavaScript, npm, and Vue/Nuxt.

Installation

Drawflow offers various ways for installation, providing flexibility based on user preference:

• Clone or Download: Access the repository via GitHub and use the files directly.

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

• CDN Options: Quickly include via <script> and <link> tags for the latest or specific version.
• NPM Package: Install Drawflow using npm for easy integration into Node.js projects.

npm i drawflow

Usage

To get started, import Drawflow into your project and initialize it:

1. Include Drawflow:

   <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. Initialize and Run:

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

Editor and Interaction

• Use keyboard shortcuts, such as del key to remove elements, and mouse gestures to interact with the diagram.
• Customize the editor settings including view mode and zoom levels through various options.

Methods and Events

Drawflow provides a wide range of methods to manipulate nodes and connections, as well as event handlers to respond to user interactions. Examples include addNode, removeNodeId, zoom_in, and event listeners like nodeCreated or connectionCreated.

Import/Export Functionality

Easily save and load the flow diagrams. Export your data into JSON format and import it back as needed:

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

License

Drawflow is licensed under the MIT License, providing free use and modification provided proper attribution is given.

Drawflow makes it exceedingly simple to bring complex flow functionalities into your projects with its minimalistic yet feature-complete library. Whether you are building with vanilla JavaScript or using frameworks like Vue or Nuxt, Drawflow affords a capable solution designed to streamline your development process. For more details, examples, and resources, you can explore their GitHub repository.