{"id":13402136,"url":"https://github.com/jerosoler/Drawflow","last_synced_at":"2025-03-14T07:32:27.715Z","repository":{"id":37090386,"uuid":"257674029","full_name":"jerosoler/Drawflow","owner":"jerosoler","description":"Simple flow library 🖥️🖱️","archived":false,"fork":false,"pushed_at":"2024-10-19T21:55:00.000Z","size":7434,"stargazers_count":5052,"open_issues_count":264,"forks_count":787,"subscribers_count":72,"default_branch":"master","last_synced_at":"2025-03-10T14:52:04.616Z","etag":null,"topics":["dataflow","dataflow-programming","drawflow","editor","flow","flow-based-programming","flowchart","graph-editor","javascript","javascript-library","nodebased","visual-programming","vue"],"latest_commit_sha":null,"homepage":"https://jerosoler.github.io/Drawflow/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jerosoler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://paypal.me/jerosoler"]}},"created_at":"2020-04-21T17:59:14.000Z","updated_at":"2025-03-10T13:02:07.000Z","dependencies_parsed_at":"2024-01-08T09:04:44.057Z","dependency_job_id":"ed25bcb9-90ef-4e26-8aac-82f60d032d8d","html_url":"https://github.com/jerosoler/Drawflow","commit_stats":{"total_commits":210,"total_committers":13,"mean_commits":"16.153846153846153","dds":"0.11428571428571432","last_synced_commit":"ef8a88cdfbf2010cc0b641b94278be6db413938b"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2FDrawflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2FDrawflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2FDrawflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2FDrawflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jerosoler","download_url":"https://codeload.github.com/jerosoler/Drawflow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243392311,"owners_count":20283563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dataflow","dataflow-programming","drawflow","editor","flow","flow-based-programming","flowchart","graph-editor","javascript","javascript-library","nodebased","visual-programming","vue"],"created_at":"2024-07-30T19:01:11.956Z","updated_at":"2025-03-14T07:32:27.709Z","avatar_url":"https://github.com/jerosoler.png","language":"JavaScript","readme":"[![npm](https://img.shields.io/npm/v/drawflow?color=green)](https://www.npmjs.com/package/drawflow)\n![npm](https://img.shields.io/npm/dy/drawflow)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/drawflow)\n[![GitHub license](https://img.shields.io/github/license/jerosoler/Drawflow)](https://github.com/jerosoler/Drawflow/blob/master/LICENSE)\n[![Twitter URL](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Ftwitter.com%2Fjerosoler)](https://twitter.com/jerosoler)\n# Drawflow\n\n![Demo](https://github.com/jerosoler/Drawflow/raw/master/docs/drawflow.gif)\n\nSimple flow library.\n\nDrawflow allows you to create data flows easily and quickly.\n\nInstalling only a javascript library and with four lines of code.\n\n⭐ [LIVE DEMO](https://jerosoler.github.io/Drawflow/)\n\n🎨 [THEME EDIT GENERATOR](https://jerosoler.github.io/drawflow-theme-generator/)\n\n## Table of contents\n- [Features](#features)\n- [Installation](#installation)\n  - [Running](#running)\n- [Mouse and  Keys](#mouse-and-keys)\n- [Editor](#editor)\n  - [Options](#editor-options)\n- [Modules](#modules)\n- [Nodes](#nodes)\n  - [Node example](#node-example)\n  - [Register Node](#register-node)\n- [Methods](#methods)\n  - [Methods example](#methods-example)\n- [Events](#events)\n  - [Events example](#events-example)\n- [Export / Import](#export-/-import)\n  - [Export example](#export-example)\n- [Example](#example)\n- [License](#license)\n\n## Features\n- Drag Nodes\n- Multiple Inputs / Outputs\n- Multiple connections\n- Delete Nodes and Connections\n- Add/Delete inputs/outputs\n- Reroute connections\n- Data sync on Nodes\n- Zoom in / out\n- Clear data module\n- Support modules\n- Editor mode `edit`, `fixed` or `view`\n- Import / Export data\n- Events\n- Mobile support\n- Vanilla javascript (No dependencies)\n- NPM\n- Vue Support component nodes \u0026\u0026 Nuxt\n\n## Installation\nDownload or clone repository and copy the dist folder, CDN option Or npm.  \n#### Clone\n`git clone https://github.com/jerosoler/Drawflow.git`\n\n#### CDN\n```html\n# Last\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js\"\u003e\u003c/script\u003e\n# or version view releases https://github.com/jerosoler/Drawflow/releases\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/drawflow@x.x.xx/dist/drawflow.min.css\" /\u003e\n\u003cscript src=\"https://unpkg.com/drawflow@x.x.xx/dist/drawflow.min.js\"\u003e\u003c/script\u003e\n```\n\n#### NPM\n```javascript\nnpm i drawflow\n```\n\n### Typescript\nExternal package. More info [#119](https://github.com/jerosoler/Drawflow/issues/119)\n```javascript\nnpm install -D @types/drawflow\n```\n\n#### Import\n```javascript\nimport Drawflow from 'drawflow'\nimport styleDrawflow from 'drawflow/dist/drawflow.min.css'\n```\n\n#### Require\n```javascript\nvar Drawflow = require('drawflow')\nvar styleDrawflow = require('drawflow/dist/drawflow.min.css')\n```\n\nCreate the parent element of **drawflow**.\n```html\n\u003cdiv id=\"drawflow\"\u003e\u003c/div\u003e\n```\n### Running\nStart drawflow.\n```javascript\nvar id = document.getElementById(\"drawflow\");\nconst editor = new Drawflow(id);\neditor.start();\n```\nParameter | Type | Description\n--- | --- | ---\n`id` | Object | Name of module\n`render` | Object | It's for `Vue`.\n`parent` | Object | It's for `Vue`. The parent Instance\n\n### For vue 2 example.\n```javascript\nimport Vue from 'vue'\n\n// Pass render Vue\nthis.editor = new Drawflow(id, Vue, this);\n```\n\n### For vue 3 example.\n```javascript\nimport { h, getCurrentInstance, render } from 'vue'\nconst Vue = { version: 3, h, render };\n\nthis.editor = new Drawflow(id, Vue);\n// Pass render Vue 3 Instance\nconst internalInstance = getCurrentInstance()\neditor.value = new Drawflow(id, Vue, internalInstance.appContext.app._context);\n```\n\n### Nuxt\nAdd to `nuxt.config.js` file\n```javascript\nbuild: {\n    transpile: ['drawflow'],\n    ...\n  }\n```\n\n## Mouse and  Keys\n- `del key` to remove element.\n- `Right click` to show remove options (Mobile long press).\n- `Left click press` to move editor or node selected.\n- `Ctrl + Mouse Wheel` Zoom in/out (Mobile pinch).\n\n## Editor\nYou can change the editor to **fixed** type to block. Only editor can be moved. You can put it before start.\n```javascript\neditor.editor_mode = 'edit'; // Default\neditor.editor_mode = 'fixed'; // Only scroll\n```\nYou can also adjust the zoom values.\n```javascript\neditor.zoom_max = 1.6;\neditor.zoom_min = 0.5;\neditor.zoom_value = 0.1;\n```\n\n### Editor options\n\nParameter | Type | Default | Description\n--- | --- | --- | ---\n`reroute` | Boolean | false | Active reroute\n`reroute_fix_curvature` | Boolean | false | Fix adding points\n`curvature` | Number | 0.5 | Curvature\n`reroute_curvature_start_end` | Number | 0.5 | Curvature reroute first point and las point\n`reroute_curvature` | Number | 0.5 | Curvature reroute\n`reroute_width` | Number | 6 | Width of reroute\n`line_path` | Number | 5 | Width of line\n`force_first_input` | Boolean | false | Force the first input to drop the connection on top of the node\n`editor_mode` | Text | `edit` | `edit` for edit, `fixed` for nodes fixed but their input fields available, `view` for view only\n`zoom` | Number | 1 | Default zoom\n`zoom_max` | Number | 1.6 | Default zoom max\n`zoom_min` | Number | 0.5 | Default zoom min\n`zoom_value` | Number | 0.1 | Default zoom value update\n`zoom_last_value` | Number | 1 | Default zoom last value\n`draggable_inputs` | Boolean | true | Drag nodes on click inputs\n`useuuid` | Boolean | false | Use UUID as node ID instead of integer index. Only affect newly created nodes, do not affect imported nodes\n\n### Reroute\nActive reroute connections. Use before `start` or `import`.\n```javascript\neditor.reroute = true;\n```\nCreate point with double click on line connection. Double click on point for remove.\n\n## Modules\nSeparate your flows in different editors.\n```javascript\neditor.addModule('nameNewModule');\neditor.changeModule('nameNewModule');\neditor.removeModule('nameModule');\n// Default Module is Home\neditor.changeModule('Home');\n```\n`RemovedModule` if it is in the same module redirects to the `Home` module\n\n\n## Nodes\nAdding a node is simple.\n```javascript\neditor.addNode(name, inputs, outputs, posx, posy, class, data, html);\n```\nParameter | Type | Description\n--- | --- | ---\n`name` | text | Name of module\n`inputs` | number | Number of de inputs\n`outputs` | number | Number of de outputs\n`pos_x` | number | Position on start node left\n`pos_y` | number | Position on start node top\n`class` | text | Added classname to de node. Multiple classnames separated by space\n`data` | json | Data passed to node\n`html` | text | HTML drawn on node or `name` of register node.\n`typenode` | boolean \u0026 text | Default `false`, `true` for Object HTML, `vue` for vue\n\nYou can use the attribute `df-*` in **inputs, textarea or select** to synchronize with the node data and **contenteditable**.\n\nAtrributs multiples parents support `df-*-*...`\n\n### Node example\n```javascript\nvar html = `\n\u003cdiv\u003e\u003cinput type=\"text\" df-name\u003e\u003c/div\u003e\n`;\nvar data = { \"name\": '' };\n\neditor.addNode('github', 0, 1, 150, 300, 'github', data, html);\n```\n### Register Node\n\nit's possible register nodes for reuse.\n```javascript\nvar html = document.createElement(\"div\");\nhtml.innerHTML =  \"Hello Drawflow!!\";\neditor.registerNode('test', html);\n// Use\neditor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);\n\n// For vue\nimport component from '~/components/testcomponent.vue'\neditor.registerNode('name', component, props, options);\n// Use for vue\neditor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');\n```\n\nParameter | Type | Description\n--- | --- | ---\n`name` | text | Name of module registered.\n`html` | text | HTML to drawn or `vue` component.\n`props` | json | Only for `vue`. Props of component. `Not Required`\n`options` | json | Only for `vue`. Options of component. `Not Required`\n\n\n\n## Methods\nOther available functions.\n\nMehtod | Description\n--- | ---\n`zoom_in()` | Increment zoom +0.1\n`zoom_out()` | Decrement zoom -0.1\n`getNodeFromId(id)` | Get Info of node. Ex: id: `5`\n`getNodesFromName(name)` | Return Array of nodes id. Ex: name: `telegram`\n`removeNodeId(id)` | Remove node. Ex id: `node-x`\n`updateNodeDataFromId` | Update data element. Ex: `5, { name: 'Drawflow' }`\n`addNodeInput(id)` | Add input to node. Ex id: `5`\n`addNodeOutput(id)` | Add output to node. Ex id: `5`\n`removeNodeInput(id, input_class)` | Remove input to node. Ex id: `5`, `input_2`\n`removeNodeOutput(id, output_class)` | Remove output to node. Ex id: `5`, `output_2`\n`addConnection(id_output, id_input, output_class, input_class)` | Add connection. Ex: `15,16,'output_1','input_1'`\n`removeSingleConnection(id_output, id_input, output_class, input_class)` | Remove connection. Ex: `15,16,'output_1','input_1'`\n`updateConnectionNodes(id)` | Update connections position from Node Ex id: `node-x`\n`removeConnectionNodeId(id)` | Remove node connections. Ex id: `node-x`\n`getModuleFromNodeId(id)` | Get name of module where is the id. Ex id: `5`\n`clearModuleSelected()` | Clear data of module selected\n`clear()` | Clear all data of all modules and modules remove.\n\n### Methods example\n\n```javascript\neditor.removeNodeId('node-4');\n```\n\n## Events\nYou can detect events that are happening.\n\nList of available events:\n\nEvent | Return | Description\n--- | --- | ---\n  `nodeCreated` | id | `id` of Node\n  `nodeRemoved` | id | `id` of Node\n  `nodeDataChanged` | id | `id` of Node df-* attributes changed.\n  `nodeSelected` | id | `id` of Node\n  `nodeUnselected` | true | Unselect node\n  `nodeMoved` | id | `id` of Node\n  `connectionStart` | { output_id, output_class } | `id` of nodes and output selected\n  `connectionCancel` | true | Connection Cancel\n  `connectionCreated` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output/input selected\n  `connectionRemoved` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output/input selected\n  `connectionSelected` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output/input selected\n  `connectionUnselected` | true | Unselect connection\n  `addReroute` | id | `id` of Node output\n  `removeReroute` | id | `id` of Node output\n  `rerouteMoved` | id | `id` of Node output\n  `moduleCreated` | name | `name` of Module\n  `moduleChanged` | name | `name` of Module\n  `moduleRemoved` | name | `name` of Module\n  `click` | event | Click event\n  `clickEnd` | event | Once the click changes have been made\n  `contextmenu` | event | Click second button mouse event\n  `mouseMove` | { x, y } | Position\n  `mouseUp` | event | MouseUp Event\n  `keydown` | event | Keydown event\n  `zoom` | zoom_level | Level of zoom\n  `translate` | { x, y } | Position translate editor\n  `import` | `import` | Finish import\n  `export` | data | Data export\n\n### Events example\n```javascript\neditor.on('nodeCreated', function(id) {\n  console.log(\"Node created \" + id);\n})\n```\n\n## Export / Import\nYou can export and import your data.\n```javascript\nvar exportdata = editor.export();\neditor.import(exportdata);\n```\n### Export example\nExample of exported data:\n```json\n{\n    \"drawflow\": {\n        \"Home\": {\n            \"data\": {}\n        },\n        \"Other\": {\n            \"data\": {\n                \"16\": {\n                    \"id\": 16,\n                    \"name\": \"facebook\",\n                    \"data\": {},\n                    \"class\": \"facebook\",\n                    \"html\": \"\\n        \n\\n          \n Facebook Message\n\\n        \n\\n        \",\n                    \"inputs\": {},\n                    \"outputs\": {\n                        \"output_1\": {\n                            \"connections\": [\n                                {\n                                    \"node\": \"17\",\n                                    \"output\": \"input_1\"\n                                }\n                            ]\n                        }\n                    },\n                    \"pos_x\": 226,\n                    \"pos_y\": 138\n                },\n                \"17\": {\n                    \"id\": 17,\n                    \"name\": \"log\",\n                    \"data\": {},\n                    \"class\": \"log\",\n                    \"html\": \"\\n            \n\\n              \n Save log file\n\\n            \n\\n            \",\n                    \"inputs\": {\n                        \"input_1\": {\n                            \"connections\": [\n                                {\n                                    \"node\": \"16\",\n                                    \"input\": \"output_1\"\n                                }\n                            ]\n                        }\n                    },\n                    \"outputs\": {},\n                    \"pos_x\": 690,\n                    \"pos_y\": 129\n                }\n            }\n        }\n    }\n}\n\n```\n\n## Example\nView the complete example in folder [docs](https://github.com/jerosoler/Drawflow/tree/master/docs).  \nThere is also an [example](docs/drawflow-element.html) how to use Drawflow in a custom element. (based on [LitElement](https://lit-element.polymer-project.org)).  \n\n## License\nMIT License\n","funding_links":["https://paypal.me/jerosoler"],"categories":["Data Visualization","Libraries","JavaScript","Table of Contents","MVC Frameworks and Libraries","javascript","vue","Repository"],"sub_categories":["Flowchart","Libraries \u0026 Node Editors","Runner","Data Visualization","JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerosoler%2FDrawflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerosoler%2FDrawflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerosoler%2FDrawflow/lists"}