{"id":22377046,"url":"https://github.com/jerosoler/drawflow","last_synced_at":"2026-10-18T23:11:42.834Z","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":6122,"open_issues_count":272,"forks_count":889,"subscribers_count":80,"default_branch":"master","last_synced_at":"2026-09-22T23:47:20.702Z","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":"2026-09-22T20:33:49.000Z","dependencies_parsed_at":"2024-01-08T09:04:44.057Z","dependency_job_id":"5b881807-0348-4ccb-856a-797bd4eb78cb","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,"purl":"pkg:github/jerosoler/Drawflow","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","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2FDrawflow/sbom","scorecard":{"id":516052,"data":{"date":"2025-08-11","repo":{"name":"github.com/jerosoler/Drawflow","commit":"ef8a88cdfbf2010cc0b641b94278be6db413938b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.9,"checks":[{"name":"Code-Review","score":1,"reason":"Found 4/22 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"40 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-qxrj-hx23-xp82","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T01:51:11.847Z","repository_id":37090386,"created_at":"2025-08-20T01:51:11.847Z","updated_at":"2025-08-20T01:51:11.847Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38343411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-18T02:00:06.448Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-12-04T22:12:34.351Z","updated_at":"2026-10-18T23:11:42.065Z","avatar_url":"https://github.com/jerosoler.png","language":"JavaScript","funding_links":["https://paypal.me/jerosoler"],"categories":[],"sub_categories":[],"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","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"}