[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10078":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":15,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":38,"discoverSource":39},10078,"vue-flow","bcakmakoglu\u002Fvue-flow","bcakmakoglu","A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.","https:\u002F\u002Fvueflow.dev",null,"TypeScript",6650,406,43,11,0,2,18,81,38.83,"MIT License",false,"master",[25,26,27,28,29,30,31,32,33,34],"diagrams","flow","flowchart","javascript","turborepo","typescript","vite","vitepress","vue","vue3","2026-06-12 02:02:16","# Vue Flow 🌊\n\n[![Vue flow](vue-flow.gif)](https:\u002F\u002Fvueflow.dev\u002F)\n![top-language](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Ftop\u002Fbcakmakoglu\u002Fvue-flow)\n![GitHub code size in bytes](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Fcode-size\u002Fbcakmakoglu\u002Fvue-flow)\n![GitHub last commit](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flast-commit\u002Fbcakmakoglu\u002Fvue-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:\u002F\u002Fvueflow.dev\u002Fguide\u002F) \nor jump right into the [examples](https:\u002F\u002Fvueflow.dev\u002Fexamples\u002F).\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:\u002F\u002Fapi.iconify.design\u002Flogos: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- & 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 & 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\u002Fcore\n\n# or\n$ pnpm i @vue-flow\u002Fcore\n\n# or\n$ yarn add @vue-flow\u002Fcore\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 -->\n\u003Cscript setup>\nimport { ref } from 'vue'  \nimport { VueFlow } from '@vue-flow\u002Fcore'\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\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVueFlow v-model:nodes=\"nodes\" v-model:edges=\"edges\">\u003C\u002FVueFlow>\n\u003C\u002Ftemplate>\n```\n\n⚠️ __Make sure to import the necessary styles:__\n\n```css\n\u002F* import the required styles *\u002F\n@import \"@vue-flow\u002Fcore\u002Fdist\u002Fstyle.css\";\n\n\u002F* import the default theme (optional) *\u002F\n@import \"@vue-flow\u002Fcore\u002Fdist\u002Ftheme-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:\u002F\u002Fnodejs.org\u002F)\n- [pnpm v9+](https:\u002F\u002Fpnpm.io\u002F)\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:\u002F\u002Fapi.iconify.design\u002Flogos:discord-icon.svg) Discord\n\n[Join the Vue Flow Discord server!](https:\u002F\u002Fdiscord.gg\u002Frwt6CBk4b5)\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:\u002F\u002Freactflow.dev\u002F)\n  - Vue flow is heavily based on [webkids'](https:\u002F\u002Fwebkid.io\u002F) [ReactFlow](https:\u002F\u002Freactflow.dev\u002F). I wholeheartedly\n    thank them for their amazing work! Without them VueFlow would not exist.\n    Please consider [donating](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fwbkd) or subscribing to [ReactFlow Pro](https:\u002F\u002Freactflow.dev\u002Fpro).\n\n- [D3.js](https:\u002F\u002Fd3js.org\u002F)\n  - D3 makes all the zoom and pan actions in Vue Flow possible.\n\n- [VueUse](https:\u002F\u002Fvueuse.org\u002F)\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\u002Fcore](https:\u002F\u002Freporoster.com\u002Fstars\u002Fbcakmakoglu\u002Fvue-flow)](https:\u002F\u002Fgithub.com\u002Fbcakmakoglu\u002Fvue-flow\u002Fstargazers)\n","Vue Flow 是一个高度可定制的 Vue 3 流程图组件，支持无缝缩放和平移、迷你地图等功能。该项目使用 TypeScript 开发，具有内置的缩放、平移、节点拖动和选择等特性，并且可以自定义节点、边和连接线。它还提供了图形辅助工具和状态组合函数，适用于复杂的应用场景。Vue Flow 的设计注重性能，能够反应式地追踪变化并仅重新渲染必要的元素。适合用于需要创建交互式流程图的应用程序，如数据可视化、工作流管理或系统架构展示等场景。","2026-06-11 03:26:27","top_topic"]