{"id":13445692,"url":"https://github.com/alibaba/butterfly","last_synced_at":"2025-05-13T20:22:14.171Z","repository":{"id":37359323,"uuid":"155510481","full_name":"alibaba/butterfly","owner":"alibaba","description":"🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field.    (基于JavaScript/React/Vue2的流程图组件)","archived":false,"fork":false,"pushed_at":"2024-05-20T07:24:26.000Z","size":10905,"stargazers_count":4563,"open_issues_count":176,"forks_count":609,"subscribers_count":72,"default_branch":"master","last_synced_at":"2025-04-28T11:53:02.734Z","etag":null,"topics":["bpmn","butterfly","connectivity","dag","diagram","diagramming","edge","flow","flow-dag","flow-layout","flowchart","mindmap","react","svg","tree","treemap-diagram","vue"],"latest_commit_sha":null,"homepage":"https://butterfly-dag.gitee.io/butterfly-dag/home","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/alibaba.png","metadata":{"files":{"readme":"README.en-US.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2018-10-31T06:37:09.000Z","updated_at":"2025-04-27T06:15:18.000Z","dependencies_parsed_at":"2024-04-14T07:41:47.279Z","dependency_job_id":"1fe67ca4-894c-4ded-9b96-6b9cba633871","html_url":"https://github.com/alibaba/butterfly","commit_stats":{"total_commits":1013,"total_committers":55,"mean_commits":"18.418181818181818","dds":0.4531095755182626,"last_synced_commit":"a44f36a23a81aa513579e35a007f309ba8f5e0d7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbutterfly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbutterfly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbutterfly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbutterfly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alibaba","download_url":"https://codeload.github.com/alibaba/butterfly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311332,"owners_count":21569008,"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":["bpmn","butterfly","connectivity","dag","diagram","diagramming","edge","flow","flow-dag","flow-layout","flowchart","mindmap","react","svg","tree","treemap-diagram","vue"],"created_at":"2024-07-31T05:00:37.958Z","updated_at":"2025-04-28T11:53:19.358Z","avatar_url":"https://github.com/alibaba.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries","Javascript Libraries","vue","Repository","Uncategorized"],"sub_categories":["Flowchart","Renderers","JavaScript","项目收集","Data Visualization","Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://noonnightstorm.github.io\"\u003e\n    \u003c!-- \u003cimg width=\"900\" src=\"http://img.alicdn.com/tfs/TB1TlngGFYqK1RjSZLeXXbXppXa-844-474.png\"\u003e --\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eJavaScript Diagramming library which concentrate on flow layout canvas\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Build Status](https://dev.azure.com/noonnightstorm/butterfly/_apis/build/status/alibaba.butterfly?branchName=master)](https://dev.azure.com/noonnightstorm/butterfly/_build/latest?definitionId=1\u0026branchName=master)\n[![CircleCI](https://img.shields.io/circleci/project/github/alibaba/butterfly/master.svg?style=flat-square)](https://circleci.com/gh/alibaba/butterfly)\n[![npm package](https://img.shields.io/npm/v/butterfly-dag.svg?style=flat-square)](https://www.npmjs.org/package/butterfly-dag)\n[![NPM downloads](http://img.shields.io/npm/dm/butterfly-dag.svg?style=flat-square)](http://npmjs.com/butterfly-dag)\n[![Dependencies](https://img.shields.io/david/alibaba/butterfly.svg?style=flat-square)](https://david-dm.org/alibaba/butterfly)\n[![DevDependencies](https://img.shields.io/david/dev/alibaba/butterfly.svg?style=flat-square)](https://david-dm.org/alibaba/butterfly?type=dev)\n\n\n\u003c/div\u003e\n\nEnglish | [简体中文](./README.md)\n\n## ✨ Features\n* Simple \u0026 Powerful \u0026 Rich DEMO\n* Manage the canvas in all aspects, developers only need to focus more on customized needs\n* Use DOM/REACT/VUE to customize elements: flexibility and excellent expandability\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"900\" src=\"https://img.alicdn.com/imgextra/i3/O1CN018CrqXz1KRK7Euhj6X_!!6000000001160-2-tps-1155-1081.png\"\u003e\n\u003c/p\u003e\n\n## 🚀DEMO\n\n### LOCAL DEMO\n\n```\ngit clone git@github.com:alibaba/butterfly.git\nnpm install\ncd example\nnpm install\nnpm start\n```\n\n### ONLINE DEMO\n\n[Official website](https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis)\n\n## 📦 Install\n```\nnpm install butterfly-dag\n```\n\n## 🔨 Quick Start\n\n### Import Method\n```\n// Full version, including jQuery and lodash internally\nimport {Canvas, Group, Node, Edge} from 'butterfly-dag';\nimport 'butterfly-dag/dist/index.css';\n\n// If your project uses jQuery and lodash, in order to reduce the size of the project, we suggest:\nimport {Canvas, Group, Node, Edge} from 'butterfly-dag/pack/index.js';\nimport 'butterfly-dag/pack/index.css';\n```\n\n### Create Canvas\n```\nimport {Canvas} from 'butterfly-dag';\nlet canvas = new Canvas({\n  root: dom,              //canvas root dom (require)\n  zoomable: true,         //enable zoom canvas (option)\n  moveable: true,         //enable move canvas (option)\n  draggable: true,        //enable drag nodes (options)\n});\ncanvas.draw({\n  groups: [],  // group  data\n  nodes: [],  // nodes data\n  edges: []  // edges data\n})\n```\n\n## 🔗 API Document\n* * *__!!! 3.x API documentation, please go to__*[here](https://github.com/alibaba/butterfly/blob/master/README.en-US.md);\n* [Canvas](./docs/en-US/canvas.md)\n* [Group](./docs/en-US/group.md)\n* [Node](./docs/en-US/node.md)\n* [Edge](./docs/en-US/edge.md)\n* [Endpoint](./docs/en-US/endpoint.md)\n* [Minimap](./docs/en-US/minimap.md#endpoint-api)\n* [Tooltips \u0026 Menu](./docs/en-US/tooltip.md)\n* [Layout](./docs/en-US/layout.md)\n* Plugins\n  * [arrow](./docs/en-US/plugins-arrows.md)\n  * [pannel](./docs/en-US/plugins-pannel.md)\n* React \u0026 Vue Support\n  * [React butterfly](./docs/en-US/react.md) [No maintenance, it is recommended to use native version]\n  * [Vue2 butterfly](./docs/en-US/vue.md)\n\n## 🎨Excellent Cases\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"900\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01d7WHVs1vkEDzWRRlW_!!6000000006210-2-tps-2400-8172.png\"\u003e\n\u003c/p\u003e\n\n## ⌨️Business-specific React Extension Components\n* [Data/Table-Field mapping](https://github.com/aliyun/react-data-mapping/blob/master/README.en-US.md)\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"49%\" src=\"https://img.alicdn.com/imgextra/i4/O1CN012ecl7n25IsnZeXw1d_!!6000000007504-1-tps-595-411.gif\"\u003e\n  \u003cimg width=\"49%\" src=\"https://img.alicdn.com/imgextra/i2/O1CN017Gcu0Y1mbgIHcgqwr_!!6000000004973-1-tps-595-411.gif\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"49%\" src=\"https://img.alicdn.com/imgextra/i2/O1CN011xYzxM1ZenzfVE0Xq_!!6000000003220-1-tps-595-411.gif\"\u003e\n  \u003cimg width=\"49%\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01Nt9rpo25y6NlRMUtR_!!6000000007594-1-tps-595-411.gif\"\u003e\n\u003c/p\u003e\n\n* [Blood Map](https://github.com/aliyun/react-lineage-dag): Suitable for table blood dag, table field blood dag, business chain blood dag and other blood dag\n\u003cimg width=\"98%\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01ou8wTq20SQv4AnedD_!!6000000006848-1-tps-1337-761.gif\"\u003e\n\n* [Visual Modeling](https://github.com/aliyun/react-visual-modeling/blob/master/README.en-US.md): Suitable for UML, database modeling, data warehouse construction\n\u003cimg width=\"98%\" src=\"https://img.alicdn.com/imgextra/i4/O1CN01VZxfyl1pOLc15k7XM_!!6000000005350-1-tps-1665-829.gif\"\u003e\n\n* Scheduling Diagram(doing)\n* [Monitoring](https://github.com/aliyun/react-monitor-dag/blob/master/README.en-US.md): Suitable for the status display of task flow, data flow and other business\n\u003cimg width=\"98%\" src=\"https://img.alicdn.com/imgextra/i2/O1CN01eJigoL1gd9tjRSvdi_!!6000000004164-1-tps-1665-826.gif\"\u003e\n\n* Butterfly-Editor(doing)\n\n## 🤝 How to contribute\nWe welcome all contributors, please read the [Contribution Guide](./docs/en-US/CONTRIBUTING.md) before becoming a Contributor.\n\nIf you already know, come to [Issues](https://github.com/alibaba/butterfly/issues) or [Pull requests](https://github.com/alibaba/butterfly/pulls) to become contributors, and let's grow and be better and better together.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2Fbutterfly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falibaba%2Fbutterfly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2Fbutterfly/lists"}