[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70621":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":15,"starSnapshotCount":15,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},70621,"flowy","alyssaxuu\u002Fflowy","alyssaxuu","The minimal javascript library to create flowcharts ✨",null,"JavaScript",12048,1048,160,46,0,3,12,71.76,"MIT License",false,"master",true,[24,25,26,27,28,29,30,31,32,33],"diagrams","drag-and-drop","engine","flowchart","javascript","javascript-library","marketing","marketing-automation","minimal","zapier","2026-06-12 04:00:56","\n# Flowy\n\n\n![Demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002Fdv1C56OywrP7Cn20nr\u002Fgiphy.gif)\n\u003Cbr>A javascript library to create pretty flowcharts with ease ✨\n\n[Dribbble](https:\u002F\u002Fdribbble.com\u002Fshots\u002F8576286-Flowy-Flowchart-Engine) | [Twitter](https:\u002F\u002Ftwitter.com\u002Falyssaxuu\u002Fstatus\u002F1199724989353730048) | [Live demo](https:\u002F\u002Falyssax.com\u002Fx\u002Fflowy)\n\n\nFlowy makes creating WebApps with flowchart functionality an incredibly simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by implementing the library into your project. \n\n> You can support this project (and many others) through [GitHub Sponsors](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Falyssaxuu)! ❤️\n\nMade by [Alyssa X](https:\u002F\u002Falyssax.com)\n\n## Table of contents\n- [Features](#features)\n- [Installation](#installation)\n- [Running Flowy](#running-flowy)\n    - [Initialization](#initialization)\n    - [Example](#example)\n- [Callbacks](#callbacks)\n\t- [On grab](#on-grab)\n\t- [On release](#on-release)\n\t- [On snap](#on-snap)\n\t- [On rearrange](#on-rearrange)\n- [Methods](#methods)\n    - [Get the flowchart data](#get-the-flowchart-data)\n    - [Import the flowchart data](#import-the-flowchart-data)\n    - [Delete all blocks](#delete-all-blocks)\n\n\n## Features\nCurrently, Flowy supports the following:\n\n - [x] Responsive drag and drop\n - [x] Automatic snapping\n - [x] Automatic scrolling\n - [x] Block rearrangement\n - [x] Delete blocks\n - [x] Automatic block centering\n - [x] Conditional snapping\n - [x] Conditional block removal\n - [x] Import saved files\n - [x] Mobile support\n - [x] Vanilla javascript (no dependencies)\n - [ ] [npm install](https:\u002F\u002Fgithub.com\u002Falyssaxuu\u002Fflowy\u002Fissues\u002F10)\n \nYou can suggest new features [here](https:\u002F\u002Fgithub.com\u002Falyssaxuu\u002Fflowy\u002Fissues)\n \n\n## Installation\nAdding Flowy to your WebApp is incredibly simple:\n\n1.  Link  `flowy.min.js`  and  `flowy.min.css`  to your project. Through jsDelivr: \n```html\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Falyssaxuu\u002Fflowy\u002Fflowy.min.css\"> \n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Falyssaxuu\u002Fflowy\u002Fflowy.min.js\">\u003C\u002Fscript>\n```\n2.  Create a canvas element that will contain the flowchart (for example,  `\u003Cdiv id=\"canvas\">\u003C\u002Fdiv>`)\n3.  Create the draggable blocks with the  `.create-flowy`  class (for example,  `\u003Cdiv class=\"create-flowy\">Grab me\u003C\u002Fdiv>`)\n\n## Running Flowy\n\n### Initialization\n```javascript\nflowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);\n```\n\nParameter | Type | Description\n--- | --- | ---\n   `canvas` | *javascript DOM element* | The element that will contain the blocks \n   `ongrab` | *function* (optional) |  Function that gets triggered when a block is dragged\n   `onrelease` | *function* (optional) |  Function that gets triggered when a block is released\n   `onsnap` | *function* (optional) |  Function that gets triggered when a block snaps with another one\n   `onrearrange` | *function* (optional) |  Function that gets triggered when blocks are rearranged\n   `spacing_x` | *integer* (optional) |  Horizontal spacing between blocks (default 20px)\n   `spacing_y` | *integer* (optional) |  Vertical spacing between blocks (default 80px)\n\nTo define the blocks that can be dragged, you need to add the class `.create-flowy`\n\n### Example\n**HTML**\n```html\n\u003Cdiv class=\"create-flowy\">The block to be dragged\u003C\u002Fdiv>\n\u003Cdiv id=\"canvas\">\u003C\u002Fdiv>\n```\n**Javascript**\n```javascript\nvar spacing_x = 40;\nvar spacing_y = 100;\n\u002F\u002F Initialize Flowy\nflowy(document.getElementById(\"canvas\"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);\nfunction onGrab(block){\n\t\u002F\u002F When the user grabs a block\n}\nfunction onRelease(){\n\t\u002F\u002F When the user releases a block\n}\nfunction onSnap(block, first, parent){\n\t\u002F\u002F When a block snaps with another one\n}\nfunction onRearrange(block, parent){\n\t\u002F\u002F When a block is rearranged\n}\n```\n## Callbacks\nIn order to use callbacks, you need to add the functions when initializing Flowy, as explained before.\n### On grab\n```javascript\nfunction onGrab(block){\n\t\u002F\u002F When the user grabs a block\n}\n```\nGets triggered when a user grabs a block with the class `create-flowy`\n\nParameter | Type | Description\n--- | --- | ---\n   `block` | *javascript DOM element* | The block that has been grabbed\n   \n### On release\n```javascript\nfunction onRelease(){\n\t\u002F\u002F When the user lets go of a block\n}\n```\nGets triggered when a user lets go of a block, regardless of whether it attaches or even gets released in the canvas.\n\n### On snap\n```javascript\nfunction onSnap(block, first, parent){\n\t\u002F\u002F When a block can attach to a parent\n\treturn true;\n}\n```\nGets triggered when a block can attach to another parent block. You can either prevent the attachment, or allow it by using `return true;`\n\nParameter | Type | Description\n--- | --- | ---\n   `block` | *javascript DOM element* | The block that has been grabbed\n   `first` | *boolean* | If true, the block that has been dragged is the first one in the canvas\n   `parent` | *javascript DOM element* | The parent the block can attach to\n   \n### On rearrange\n```javascript\nfunction onRearrange(block, parent){\n\t\u002F\u002F When a block is rearranged\n\treturn true;\n}\n```\nGets triggered when blocks are rearranged and are dropped anywhere in the canvas, without a parent to attach to. You can either allow the blocks to be deleted, or prevent it and thus have them re-attach to their previous parent using `return true;`\n\nParameter | Type | Description\n--- | --- | ---\n   `block` | *javascript DOM element* | The block that has been grabbed\n   `parent` | *javascript DOM element* | The parent the block can attach to\n   \n## Methods\n### Get the flowchart data\n```javascript\n\u002F\u002F As an object\nflowy.output();\n\u002F\u002F As a JSON string\nJSON.stringify(flowy.output());\n```\nThe JSON object that gets outputted looks like this:\n```json\n{\n\t\"html\": \"\",\n\t\"blockarr\": [],\n\t\"blocks\": [\n\t\t{\n\t\t\t\"id\": 1,\n\t\t\t\"parent\": 0,\n\t\t\t\"data\": [\n\t\t\t\t{\n\t\t\t\t\"name\": \"blockid\",\n\t\t\t\t\"value\": \"1\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"attr\": [\n\t\t\t\t{\n\t\t\t\t\"id\": \"block-id\",\n\t\t\t\t\"class\": \"block-class\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n}\n```\n\nHere's what each property means:\n\nKey | Value type | Description\n--- | --- | ---\n   `html` | *string* | Contains the canvas data\n   `blockarr` | *array* | Contains the block array generated by the library (for import purposes)  \n   `blocks` | *array* | Contains the readable block array\n   `id` | *integer* | Unique value that identifies a block \n   `parent` | *integer* |  The `id` of the parent a block is attached to (-1 means the block has no parent)\n   `data` | *array of objects* |  An array of all the inputs within a certain block\n   `name` | *string* |  The name attribute of the input\n   `value` | *string* |  The value attribute of the input\n   `attr` | *array of objects* |  Contains all the data attributes of a certain block\n### Import the flowchart data\n```javascript\nflowy.import(output)\n```\nAllows you to import entire flowcharts initially exported using the previous method, `flowy.output()`\n\nParameter | Type | Description\n--- | --- | ---\n   `output` | *javascript DOM element* | The data from `flowy.output()`\n   \n#### Warning\n\nThis method accepts raw HTML and does **not** sanitize it, therefore this method is vulnerable to [XSS](https:\u002F\u002Fowasp.org\u002Fwww-community\u002Fattacks\u002FDOM_Based_XSS). The _only_ safe use for this method is when the input is **absolutely** trusted, if the input is _not_ to be trusted the use this method can introduce a vulnerability in your system.\n\n### Delete all blocks\nTo remove all blocks at once use:\n```javascript\nflowy.deleteBlocks()\n```\nCurrently there is no method to individually remove blocks. The only way to go about it is by splitting branches manually.\n#\n Feel free to reach out to me through email at hi@alyssax.com or [on Twitter](https:\u002F\u002Ftwitter.com\u002Falyssaxuu) if you have any questions or feedback! Hope you find this useful 💜\n","Flowy 是一个用于轻松创建流程图的轻量级 JavaScript 库。它提供了响应式拖放、自动对齐、自动滚动、块重排和删除等功能，支持导入保存的文件，并且完全基于原生 JavaScript，无需额外依赖。其简洁的设计使得在 Web 应用中集成流程图功能变得异常简单，适用于构建自动化软件、思维导图工具或简单的编程平台等场景。此外，Flowy 还支持移动端设备，确保了跨平台的用户体验。",2,"2026-06-11 03:33:03","high_star"]