{"id":13522194,"url":"https://github.com/bcakmakoglu/vue-flow","last_synced_at":"2025-05-06T01:21:59.661Z","repository":{"id":37069936,"uuid":"382114726","full_name":"bcakmakoglu/vue-flow","owner":"bcakmakoglu","description":"A highly customizable Flowchart component for Vue 3. Features seamless zoom \u0026 pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.","archived":false,"fork":false,"pushed_at":"2025-04-25T05:55:12.000Z","size":16488,"stargazers_count":4995,"open_issues_count":16,"forks_count":321,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-04-30T09:52:35.459Z","etag":null,"topics":["diagrams","flow","flowchart","javascript","turborepo","typescript","vite","vitepress","vue","vue3"],"latest_commit_sha":null,"homepage":"https://vueflow.dev/","language":"TypeScript","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/bcakmakoglu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"bcakmakoglu"}},"created_at":"2021-07-01T17:52:34.000Z","updated_at":"2025-04-30T08:47:50.000Z","dependencies_parsed_at":"2023-02-19T03:00:20.276Z","dependency_job_id":"fdaf2742-d51c-4ca5-a6ee-34e221ccec56","html_url":"https://github.com/bcakmakoglu/vue-flow","commit_stats":{"total_commits":3728,"total_committers":27,"mean_commits":"138.07407407407408","dds":0.05123390557939911,"last_synced_commit":"fe239b5d8fc07dae429a59a0484b6d232a18286b"},"previous_names":[],"tags_count":449,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Fvue-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Fvue-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Fvue-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Fvue-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bcakmakoglu","download_url":"https://codeload.github.com/bcakmakoglu/vue-flow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252602429,"owners_count":21774760,"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":["diagrams","flow","flowchart","javascript","turborepo","typescript","vite","vitepress","vue","vue3"],"created_at":"2024-08-01T06:00:43.858Z","updated_at":"2025-05-06T01:21:59.641Z","avatar_url":"https://github.com/bcakmakoglu.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bcakmakoglu","https://github.com/sponsors/wbkd"],"categories":["TypeScript","Javascript Libraries","Components \u0026 Libraries"],"sub_categories":["Renderers","UI Components"],"readme":"# Vue Flow 🌊\n\n[![Vue flow](vue-flow.gif)](https://vueflow.dev/)\n![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow)\n![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)\n\n__Vue Flow: A highly customizable Vue 3 Flowchart component.__\n\nYou can find a detailed explanation on how to get started [here](https://vueflow.dev/guide/) \nor jump right into the [examples](https://vueflow.dev/examples/).\n\n## Table of contents\n\n* [⭐️ Features](#-features)\n\n* [🛠 Setup](#-setup)\n\n* [🎮 Quickstart](#-quickstart)\n\n  + [🪴 Vue 2](#-vue-2)\n\n* [🧪 Development](#-development)\n\n  + [🐳 Dev Container](#-dev-container)\n\n* [![discord logo](https://api.iconify.design/logos:discord-icon.svg) Discord](#-discord)\n\n* [💝 Special Thanks](#-special-thanks)\n\n* [⭐ Stargazers](#-stargazers)\n\n## ⭐️ Features\n\n- 👶 __Easy setup__: Get started hassle-free - Built-in zoom- \u0026 pan features, element dragging, selection and much more\n\n- 🎨 __Customizable__: Use your custom nodes, edges and connection lines and expand on Vue Flows' functionality\n\n- 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements\n\n- 🧲 __Utils \u0026 Composition__: Comes with graph helper and state composable functions for advanced uses\n\n- 📦 __Additional Components__:\n\n  - 🖼 Background: With two built-in patterns and some configuration options like height, width or color.\n\n  - 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner\n\n  - 🕹 Controls: Control zoom behavior from a panel on the bottom left\n\n  - 🤖 And (many) more to come...\n\n- 🦾 __Reliable__: Fully written in TypeScript\n\n## 🛠 Setup\n\n```bash\n$ npm i @vue-flow/core\n\n# or\n$ pnpm i @vue-flow/core\n\n# or\n$ yarn add @vue-flow/core\n```\n\n## 🎮 Quickstart\n\nIn Vue Flow, an application structure consists of __nodes__ and __edges__, all of which are categorised as __elements__.\n\n__Each element requires a unique id.__\n\nNodes additionally need an __XY-position__, while edges require a __source__ and a __target__, both represented by node ids.\n\n```vue\n\u003c!-- Flowchart.vue --\u003e\n\u003cscript setup\u003e\nimport { ref } from 'vue'  \nimport { VueFlow } from '@vue-flow/core'\n\nconst nodes = ref([\n  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },\n  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },\n  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },\n  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },\n])\n  \nconst edges = ref([\n  { id: 'e1-2', source: '1', target: '2', animated: true },\n  { id: 'e1-3', source: '1', target: '3' },\n])\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVueFlow v-model:nodes=\"nodes\" v-model:edges=\"edges\"\u003e\u003c/VueFlow\u003e\n\u003c/template\u003e\n```\n\n⚠️ __Make sure to import the necessary styles:__\n\n```css\n/* import the required styles */\n@import \"@vue-flow/core/dist/style.css\";\n\n/* import the default theme (optional) */\n@import \"@vue-flow/core/dist/theme-default.css\";\n```\n\nDo __not__ scope these styles with `scoped` in your component.\n\n### 🪴 Vue 2\n\n**_This library doesn't work with Vue 2._**\n\nVue Flow uses features that are exclusive to Vue 3, therefore\nthere is no support for Vue 2, nor will there be any support in the future, sorry.\n\n## 🧪 Development\n\n### Prerequisites\n\n- [Node.js v20+](https://nodejs.org/)\n- [pnpm v9+](https://pnpm.io/)\n\n```bash\n# install pnpm if you haven't already\n$ npm i -g pnpm\n\n# start examples\n$ pnpm dev\n\n# build all packages\n$ pnpm build\n```\n\n### 🐳 Dev Container\n\nTo start using development containers, install the `Docker` extension\nfor VSCode.\nAfter installing the extension, open the connection menu either\non the bottom left or open it via the commands tab.\nSelect the `Open Folder in Container` option to mount the project.\n\nThe development container will spin up all packages example apps and forward\nthe ports to your machine.\n\n## ![discord logo](https://api.iconify.design/logos:discord-icon.svg) Discord\n\n[Join the Vue Flow Discord server!](https://discord.gg/rwt6CBk4b5)\n\nHere you can ask questions to the community, propose ideas for new features\nor share your work that you have built with Vue Flow.\n\n## 💝 Special Thanks\n\nThis project is built with\n\n- [React Flow](https://reactflow.dev/)\n  - Vue flow is heavily based on [webkids'](https://webkid.io/) [ReactFlow](https://reactflow.dev/). I wholeheartedly\n    thank them for their amazing work! Without them VueFlow would not exist.\n    Please consider [donating](https://github.com/sponsors/wbkd) or subscribing to [ReactFlow Pro](https://reactflow.dev/pro).\n\n- [D3.js](https://d3js.org/)\n  - D3 makes all the zoom and pan actions in Vue Flow possible.\n\n- [VueUse](https://vueuse.org/)\n  - VueUse is a collection of essential vue composition utilities\n\n## ⭐ Stargazers\n\nMany thanks to the kind individuals who leave a star.\nYour support is much appreciated!\n\n[![Stargazers for @vue-flow/core](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcakmakoglu%2Fvue-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbcakmakoglu%2Fvue-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcakmakoglu%2Fvue-flow/lists"}