{"id":22489273,"url":"https://github.com/dash14/v-network-graph","last_synced_at":"2025-08-02T21:32:22.128Z","repository":{"id":37315036,"uuid":"391383190","full_name":"dash14/v-network-graph","owner":"dash14","description":"An interactive network graph visualization component for Vue 3","archived":false,"fork":false,"pushed_at":"2024-02-06T13:12:47.000Z","size":6178,"stargazers_count":459,"open_issues_count":18,"forks_count":43,"subscribers_count":16,"default_branch":"main","last_synced_at":"2024-05-02T03:35:44.955Z","etag":null,"topics":["network-graph","visualization","vue3"],"latest_commit_sha":null,"homepage":"https://dash14.github.io/v-network-graph/","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/dash14.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"dash14","custom":"https://www.buymeacoffee.com/dash14.ack"}},"created_at":"2021-07-31T14:46:04.000Z","updated_at":"2024-06-25T16:13:56.329Z","dependencies_parsed_at":"2023-12-20T15:41:39.090Z","dependency_job_id":"a1965f8e-669a-484a-84f6-b7344c7fcb24","html_url":"https://github.com/dash14/v-network-graph","commit_stats":{"total_commits":703,"total_committers":1,"mean_commits":703.0,"dds":0.0,"last_synced_commit":"e4ec387a3c063b1a1850c4b52a907ef813b76cb0"},"previous_names":[],"tags_count":102,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash14%2Fv-network-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash14%2Fv-network-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash14%2Fv-network-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash14%2Fv-network-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dash14","download_url":"https://codeload.github.com/dash14/v-network-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500221,"owners_count":17930020,"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":["network-graph","visualization","vue3"],"created_at":"2024-12-06T17:19:33.210Z","updated_at":"2024-12-06T17:21:45.468Z","avatar_url":"https://github.com/dash14.png","language":"TypeScript","funding_links":["https://github.com/sponsors/dash14","https://www.buymeacoffee.com/dash14.ack"],"categories":["Components \u0026 Libraries","TypeScript"],"sub_categories":["UI Components"],"readme":"\n# v-network-graph\n\nAn interactive SVG based network-graph visualization component for Vue 3.\n\n\u003cbr/\u003e\n\n![the logo of v-network-graph](./public/main-logo-light.svg#gh-light-mode-only)\n![the logo of v-network-graph](./public/main-logo-dark.svg#gh-dark-mode-only)\n\n[Live examples](https://dash14.github.io/v-network-graph/examples/)\n\n\n[![Version](https://img.shields.io/npm/v/v-network-graph.svg)](https://www.npmjs.com/package/v-network-graph)\n![GitHub package.json dependency version](https://img.shields.io/github/package-json/dependency-version/dash14/v-network-graph/dev/@vue/compiler-sfc?label=Vue)\n[![License](https://img.shields.io/npm/l/v-network-graph.svg)](https://www.npmjs.com/package/v-network-graph)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/v-network-graph)](https://www.npmjs.com/package/v-network-graph)\n[![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/3359-shield.svg)](https://madewithvuejs.com/p/v-network-graph/shield-link)\n\n## Features\n\n* Create a graph according your reactive data dynamically\n* Fully configurable appearance\n* SVG based\n* Pan and zoom viewport\n* Drag nodes\n* Multiple node selection\n* Multiple edge selection\n* Multi-touch support\n* Various events are provided\n* Export as SVG text\n\n## Documentation\n\n* [v-network-graph GitHub Pages](https://dash14.github.io/v-network-graph/)\n  * [Getting Started](https://dash14.github.io/v-network-graph/getting-started.html)\n  * [Examples](https://dash14.github.io/v-network-graph/examples/)\n  * [Reference](https://dash14.github.io/v-network-graph/reference.html)\n\n## Installation\n\nInstall with npm\n\n```sh\nnpm install v-network-graph\n```\n\nand setup in main.ts\n\n```ts\n// main.ts\nimport { createApp } from \"vue\"\nimport VNetworkGraph from \"v-network-graph\"\nimport \"v-network-graph/lib/style.css\"\nimport App from \"./App.vue\"\n\nconst app = createApp(App)\n\napp.use(VNetworkGraph)\napp.mount(\"#app\")\n```\n\n## Installation on Nuxt 3 project\n\n\nAdd css to `nuxt.config.ts`\n\n```ts\n// nuxt.config.ts\nimport { defineNuxtConfig } from \"nuxt3\"\n\n// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config\nexport default defineNuxtConfig({\n  css: [\"v-network-graph/lib/style.css\"],\n})\n```\n\nMake the plugin to `plugins/v-network-graph.ts`\n\n```ts\n// plugins/v-network-graph.ts\nimport { defineNuxtPlugin } from \"#app\"\nimport VNetworkGraph from \"v-network-graph\"\n\nexport default defineNuxtPlugin(nuxtApp =\u003e {\n  nuxtApp.vueApp.use(VNetworkGraph)\n})\n```\n\n## Basic usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\n  const nodes = {\n    node1: { name: \"Node 1\" },\n    node2: { name: \"Node 2\" },\n    node3: { name: \"Node 3\" },\n    node4: { name: \"Node 4\" },\n  }\n  const edges = {\n    edge1: { source: \"node1\", target: \"node2\" },\n    edge2: { source: \"node2\", target: \"node3\" },\n    edge3: { source: \"node3\", target: \"node4\" },\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-network-graph\n    class=\"graph\"\n    :nodes=\"nodes\"\n    :edges=\"edges\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n.graph {\n  width: 800px;\n  height: 600px;\n  border: 1px solid #000;\n}\n\u003c/style\u003e\n```\n\nFor more examples, see [here](https://dash14.github.io/v-network-graph/examples/).\n\n## Motivation and Design Policy\n\nThe requirements for visualizing network graphs are various, including\nthe design and user actions for each component such as nodes, edges,\npaths, etc.\nMany libraries have been made to flexibly achieve these numerous\nrequirements. However, many of these libraries have been around since\nbefore Vue was launched, so there are not many libraries that can be\nused with the concept of reactive programming. This means that using\nthese libraries together with Vue, you need to learn how to use the\ngraph libraries as well as Vue, and also having to design the\nintegration with Vue. These are probably a lot of efforts.\n\nThis component aims to make it easy to realize applications with these\nvarious requirements while keeping the simplicity and reactive\nprogramming style of Vue. Using the power of Vue (especially reactive\nsystem and two-way binding), we hope to help developers quickly\nvisualize interactively manipulable network graphs with less code and\nlower learning costs.\n\nv-network-graph was designed with the following policy:\n\n* Reactive\n\n    All primitive data such as nodes, edges, node positions, and\n    their styles are provided from outside the component, and the\n    component can handle these data reactively with Vue. The\n    developer can modify the data at any time to reactively perform\n    manipulations such as adding/removing objects, moving node\n    positions, changing appearance, etc.\n\n* Highly customizable\n\n    For visualizations, where the requirements vary widely from each\n    application, it will be available a variety of customizations\n    for ease of use. In addition to static specifications, it also\n    supports dynamic changes due to the values ​​of fields contained\n    in node and edge data.\n\n* Extendable\n\n    Network graphs have many types of visualization objects, and in\n    many cases there are application-specific requirements. It is\n    difficult to cover all the requirements with pre-defined\n    functions. Therefore, we also implement a mechanism that allows\n    developers to flexibly add their own SVG elements and actions\n    as needed.\n\nWith the above, we would like to contribute to helping application\ndevelopers to focus on developing application-specific requirements\nfor handling network graphs.\n\n## Roadmap to v1.0 📜\n\nCurrently, working on internal refactoring, and implementing the\nfollowing features.\n\n* Performance improvement when using large network graphs\n* More flexible edge enhancement and customization\n  * Enables flexible replacement of straight lines, bezier curves,\n    whether animation specifications, etc.\n  * Includes support for self-loop edge\n    (Some features are already available)\n* More flexible label display customization\n  * ✅ Adjustments node label position automatically\n  * As the edges extend, the label must also extend more flexibly\n  * Supports display of labels on self-loop edges\n  * ✅ Allows changing the z-order between labels and other objects\n* ✅ Simpler css class name specification overall\n  * To make it easier to override the design\n* Other minor improvements\n* Enrich related documentation\n\nThese are planned to be released in phases, but since this is a\npersonal project for dash14 and is ongoing on the side of other\ncommercial work, I cannot give a detailed timeline.  \nYour support is especially encouraging!  \nI' d appreciate it if you could support this project with a GitHub\nstarring, an issue/PR submission, a code contribution, a message of\ncheer, a sponsorship, or anything else!\n\n## Contributing\n\nIf you find any bugs and/or want to contribute, feel free to submit issues or pull requests.\n\n## License\n\nUnder the MIT license.  \nSee [LICENSE](https://github.com/dash14/v-network-graph/blob/main/LICENSE) file for more details.\n\n## Support me 🌟\n\nI love to hear from people using it, giving me the motivation to keep working on this project.  \nIf you find this library helpful, please consider giving it a star ⭐ on GitHub!\n\nYou may [GitHub Sponsors](https://github.com/sponsors/dash14) or\n[Buy Me a Coffee](https://www.buymeacoffee.com/dash14.ack) if you would like to show\nsome support for this open-source project.\nIt will be greatly appreciated!\n\n[![\"Github Sponsors\"](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge\u0026logo=GitHub-Sponsors\u0026logoColor=#EA4AAA)](https://github.com/sponsors/dash14)\n\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/dash14.ack)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash14%2Fv-network-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdash14%2Fv-network-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash14%2Fv-network-graph/lists"}