[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10088":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":16,"starSnapshotCount":16,"syncStatus":43,"lastSyncTime":44,"discoverSource":45},10088,"Drawflow","jerosoler\u002FDrawflow","jerosoler","Simple flow library 🖥️🖱️","https:\u002F\u002Fjerosoler.github.io\u002FDrawflow\u002F",null,"JavaScript",6043,880,79,246,0,1,5,21,4,39.83,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34,35,36,37,38,39],"dataflow","dataflow-programming","drawflow","editor","flow","flow-based-programming","flowchart","graph-editor","javascript","javascript-library","nodebased","visual-programming","vue","2026-06-12 02:02:16","[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fdrawflow?color=green)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdrawflow)\n![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdy\u002Fdrawflow)\n![npm bundle size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fdrawflow)\n[![GitHub license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fjerosoler\u002FDrawflow)](https:\u002F\u002Fgithub.com\u002Fjerosoler\u002FDrawflow\u002Fblob\u002Fmaster\u002FLICENSE)\n[![Twitter URL](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl?style=social&url=https%3A%2F%2Ftwitter.com%2Fjerosoler)](https:\u002F\u002Ftwitter.com\u002Fjerosoler)\n# Drawflow\n\n![Demo](https:\u002F\u002Fgithub.com\u002Fjerosoler\u002FDrawflow\u002Fraw\u002Fmaster\u002Fdocs\u002Fdrawflow.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:\u002F\u002Fjerosoler.github.io\u002FDrawflow\u002F)\n\n🎨 [THEME EDIT GENERATOR](https:\u002F\u002Fjerosoler.github.io\u002Fdrawflow-theme-generator\u002F)\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 \u002F Import](#export-\u002F-import)\n  - [Export example](#export-example)\n- [Example](#example)\n- [License](#license)\n\n## Features\n- Drag Nodes\n- Multiple Inputs \u002F Outputs\n- Multiple connections\n- Delete Nodes and Connections\n- Add\u002FDelete inputs\u002Foutputs\n- Reroute connections\n- Data sync on Nodes\n- Zoom in \u002F out\n- Clear data module\n- Support modules\n- Editor mode `edit`, `fixed` or `view`\n- Import \u002F Export data\n- Events\n- Mobile support\n- Vanilla javascript (No dependencies)\n- NPM\n- Vue Support component nodes && Nuxt\n\n## Installation\nDownload or clone repository and copy the dist folder, CDN option Or npm.  \n#### Clone\n`git clone https:\u002F\u002Fgithub.com\u002Fjerosoler\u002FDrawflow.git`\n\n#### CDN\n```html\n# Last\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fjerosoler\u002FDrawflow\u002Fdist\u002Fdrawflow.min.css\">\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fjerosoler\u002FDrawflow\u002Fdist\u002Fdrawflow.min.js\">\u003C\u002Fscript>\n# or version view releases https:\u002F\u002Fgithub.com\u002Fjerosoler\u002FDrawflow\u002Freleases\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fdrawflow@x.x.xx\u002Fdist\u002Fdrawflow.min.css\" \u002F>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fdrawflow@x.x.xx\u002Fdist\u002Fdrawflow.min.js\">\u003C\u002Fscript>\n```\n\n#### NPM\n```javascript\nnpm i drawflow\n```\n\n### Typescript\nExternal package. More info [#119](https:\u002F\u002Fgithub.com\u002Fjerosoler\u002FDrawflow\u002Fissues\u002F119)\n```javascript\nnpm install -D @types\u002Fdrawflow\n```\n\n#### Import\n```javascript\nimport Drawflow from 'drawflow'\nimport styleDrawflow from 'drawflow\u002Fdist\u002Fdrawflow.min.css'\n```\n\n#### Require\n```javascript\nvar Drawflow = require('drawflow')\nvar styleDrawflow = require('drawflow\u002Fdist\u002Fdrawflow.min.css')\n```\n\nCreate the parent element of **drawflow**.\n```html\n\u003Cdiv id=\"drawflow\">\u003C\u002Fdiv>\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\u002F\u002F 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\u002F\u002F 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\u002Fout (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'; \u002F\u002F Default\neditor.editor_mode = 'fixed'; \u002F\u002F 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\u002F\u002F 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 & 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>\u003Cinput type=\"text\" df-name>\u003C\u002Fdiv>\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\u002F\u002F Use\neditor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);\n\n\u002F\u002F For vue\nimport component from '~\u002Fcomponents\u002Ftestcomponent.vue'\neditor.registerNode('name', component, props, options);\n\u002F\u002F 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\u002Finput selected\n  `connectionRemoved` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output\u002Finput selected\n  `connectionSelected` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output\u002Finput 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 \u002F 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:\u002F\u002Fgithub.com\u002Fjerosoler\u002FDrawflow\u002Ftree\u002Fmaster\u002Fdocs).  \nThere is also an [example](docs\u002Fdrawflow-element.html) how to use Drawflow in a custom element. (based on [LitElement](https:\u002F\u002Flit-element.polymer-project.org)).  \n\n## License\nMIT License\n","Drawflow 是一个用于创建数据流图的简单JavaScript库。它支持拖拽节点、多输入\u002F输出连接、删除节点与连接等功能，并且可以实现数据同步、缩放、模块支持等特性，还提供了编辑模式切换（编辑、固定或查看）和导入导出数据的能力。该库完全基于原生JavaScript开发，无外部依赖，易于集成到现有项目中，同时也支持Vue组件形式使用，非常适合需要可视化编程界面的应用场景，如工作流程设计、数据处理管道构建等领域。",2,"2026-06-11 03:26:31","top_topic"]