{"id":13496169,"url":"https://github.com/antvis/X6","last_synced_at":"2025-03-28T18:31:39.324Z","repository":{"id":37333738,"uuid":"221622743","full_name":"antvis/X6","owner":"antvis","description":"🚀 JavaScript diagramming library that uses SVG and HTML for rendering.","archived":false,"fork":false,"pushed_at":"2024-10-19T02:12:10.000Z","size":2302735,"stargazers_count":5715,"open_issues_count":424,"forks_count":1698,"subscribers_count":60,"default_branch":"master","last_synced_at":"2024-10-29T17:43:21.592Z","etag":null,"topics":["antv","dag","diagram","diagramming","erd","erdiagram","flowchart","graph","graph-editor","javascript","javascript-diagramming-library","svg","typescript","uml-diagram"],"latest_commit_sha":null,"homepage":"https://x6.antv.antgroup.com","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/antvis.png","metadata":{"files":{"readme":"README.en-us.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-14T05:56:07.000Z","updated_at":"2024-10-29T10:03:42.000Z","dependencies_parsed_at":"2022-07-14T07:20:39.171Z","dependency_job_id":"de3c4da8-fbb1-414e-80cc-f9d501c68dfa","html_url":"https://github.com/antvis/X6","commit_stats":{"total_commits":6946,"total_committers":115,"mean_commits":60.4,"dds":0.5603224877627411,"last_synced_commit":"6437549fdf5cadcdf8dcf232c766e5ccfc8b3dda"},"previous_names":[],"tags_count":405,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FX6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FX6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FX6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FX6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/X6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237318604,"owners_count":19290559,"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":["antv","dag","diagram","diagramming","erd","erdiagram","flowchart","graph","graph-editor","javascript","javascript-diagramming-library","svg","typescript","uml-diagram"],"created_at":"2024-07-31T19:01:43.294Z","updated_at":"2025-03-28T18:31:34.307Z","avatar_url":"https://github.com/antvis.png","language":"TypeScript","readme":"[简体中文](/README.md) | English\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"/flow.svg\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cstrong\u003eGraph Editing Engine Of AntV\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003eJavaScript diagramming library that uses SVG and HTML for rendering\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/antvis/X6/actions/workflows/ci.yml\"\u003e\u003cimg alt=\"build\" src=\"https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github\u0026style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://app.codecov.io/gh/antvis/X6\"\u003e\u003cimg alt=\"coverage\" src=\"https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov\u0026style=flat-square\u0026token=15CO54WYUV\"\u003e\u003c/a\u003e\n\u003ca href=\"https://lgtm.com/projects/g/antvis/x6/context:javascript\"\u003e\u003cimg alt=\"Language grade: JavaScript\" src=\"https://img.shields.io/lgtm/grade/javascript/g/antvis/x6.svg?logo=lgtm\u0026style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@antv/x6\"\u003e\u003cimg alt=\"NPM Package\" src=\"https://img.shields.io/npm/v/@antv/x6.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@antv/x6\"\u003e\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@antv/x6?logo=npm\u0026style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/antvis/x6?style=flat-square\" alt=\"MIT License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.typescriptlang.org\"\u003e\u003cimg alt=\"Language\" src=\"https://img.shields.io/badge/language-TypeScript-blue.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/antvis/x6/pulls\"\u003e\u003cimg alt=\"PRs Welcome\" src=\"https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://x6.antv.antgroup.com/\"\u003e\u003cimg alt=\"website\" src=\"https://img.shields.io/static/v1?label=\u0026labelColor=505050\u0026message=website\u0026color=0076D6\u0026style=flat-square\u0026logo=google-chrome\u0026logoColor=0076D6\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🌱 　 Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular to custom nodes and edges\n- 🚀 　 Out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.\n- 🧲 　 Data-driven: base on MVC architecture, you can focus on data logic and business logic\n- 💯 　 Highly-event-driven: you can react on any event that happens inside the graph\n\n## Environment Support\n\n- Modern browsers and Internet Explorer 11 (with polyfills)\n- Server-side Rendering\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eSafari |\n| --- | --- | --- | --- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |\n\n## Installation\n\n```shell\n# npm\n$ npm install @antv/x6 --save\n\n# yarn\n$ yarn add @antv/x6\n```\n\n## Usage\n\n```html\n\u003cdiv id=\"container\" style=\"width: 600px; height: 400px\"\u003e\u003c/div\u003e\n```\n\n```ts\nimport { Graph } from '@antv/x6'\n\nconst graph = new Graph({\n  container: document.getElementById('container'),\n  grid: true,\n})\n\nconst source = graph.addNode({\n  x: 300,\n  y: 40,\n  width: 80,\n  height: 40,\n  label: 'Hello',\n})\n\nconst target = graph.addNode({\n  x: 420,\n  y: 180,\n  width: 80,\n  height: 40,\n  label: 'World',\n})\n\ngraph.addEdge({\n  source,\n  target,\n})\n```\n\n## Links\n\n- [Documents](https://x6.antv.antgroup.com/tutorial/about)\n- [Samples](https://x6.antv.antgroup.com/examples)\n- [Blog](https://www.yuque.com/antv/x6/gcinvi)\n- [Versioning Release Note](https://www.yuque.com/antv/x6/bbfu6r)\n- [FAQ](https://www.yuque.com/antv/x6/be9pfx)\n- [Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)\n- [awesome-x6](https://github.com/lloydzhou/awesome-x6)\n\n## Development\n\n```shell\n# install deps and build\n$ pnpm install\n\n# enter the specified project development and debugging\ncd packages/x6\npnpm run build:watch\n\n# start example to see the effect\ncd examples/x6-example-features\npnpm run start\n```\n\n## Contributing\n\nTo become a contributor, please follow our [contributing guide](/CONTRIBUTING.md). If you are an active contributor, you can apply to be a outside collaborator.\n\n\u003ca href=\"https://github.com/antvis/x6/graphs/contributors\"\u003e\n  \u003cimg src=\"/CONTRIBUTORS.svg\" alt=\"Contributors\" width=\"740\" /\u003e\n\u003c/a\u003e\n\n## License\n\nThe scripts and documentation in this project are released under the [MIT License](/LICENSE).\n","funding_links":[],"categories":["TypeScript","Javascript Libraries","typescript",":file_folder: Browser","Uncategorized"],"sub_categories":["Renderers","Graphical Framework","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2FX6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2FX6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2FX6/lists"}