[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70686":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":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":16,"starSnapshotCount":16,"syncStatus":40,"lastSyncTime":41,"discoverSource":42},70686,"G6","antvis\u002FG6","antvis","♾ A Graph Visualization Framework in JavaScript.","https:\u002F\u002Fg6.antv.antgroup.com\u002F",null,"TypeScript",12149,1630,206,318,0,6,20,47,18,44.64,"MIT License",false,"v5",true,[27,28,29,30,31,32,33,34,35,36],"data-visualization","graph","graph-analytics","graph-drawing","graph-visualization","hacktoberfest","network","tree","visual-analytics","visualization","2026-06-12 02:02:42","\u003Cimg src=\"https:\u002F\u002Fgw.alipayobjects.com\u002Fzos\u002Fantfincdn\u002FR8sN%24GNdh6\u002Flanguage.svg\" width=\"18\"> English | [简体中文](.\u002FREADME.zh-CN.md)\n\n\u003Ch1 align=\"center\">\n\u003Cb>G6: A Graph Visualization Framework in TypeScript\u003C\u002Fb>\n\u003C\u002Fh1>\n\n![](https:\u002F\u002Fuser-images.githubusercontent.com\u002F6113694\u002F45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png)\n\n\u003Cp align=\"center\">\n\u003Ca href=\"https:\u002F\u002Ftrendshift.io\u002Frepositories\u002F9709\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F9709\" alt=\"antvis%2FG6 | Trendshift\" style=\"width: 250px; height: 55px;\" width=\"250\" height=\"55\"\u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n[![npm Version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@antv\u002Fg6.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@antv\u002Fg6)\n[![Build Status](https:\u002F\u002Fgithub.com\u002Fantvis\u002FG6\u002Factions\u002Fworkflows\u002Fbuild.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fantvis\u002FG6\u002Factions\u002Fworkflows\u002Fbuild.yml)\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002Fantvis\u002FG6\u002Fgraph\u002Fbadge.svg?token=OvIk06tCPa)](https:\u002F\u002Fcodecov.io\u002Fgh\u002Fantvis\u002FG6)\n[![npm Download](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@antv\u002Fg6.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@antv\u002Fg6)\n![typescript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flanguage-typescript-blue.svg)\n[![npm License](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@antv\u002Fg6.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@antv\u002Fg6)\n[![Ask DeepWiki](https:\u002F\u002Fdeepwiki.com\u002Fbadge.svg)](https:\u002F\u002Fdeepwiki.com\u002Fantvis\u002FG6)\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fg6.antv.antgroup.com\u002Fen\">Introduction\u003C\u002Fa> •\n  \u003Ca href=\"https:\u002F\u002Fg6.antv.antgroup.com\u002Fen\u002Fexamples\">Examples\u003C\u002Fa> •\n  \u003Ca href=\"https:\u002F\u002Fg6.antv.antgroup.com\u002Fen\u002Fmanual\u002Fgetting-started\u002Fquick-start\">Quick Start\u003C\u002Fa> •\n  \u003Ca href=\"https:\u002F\u002Fg6.antv.antgroup.com\u002Fen\u002Fapi\u002Fgraph\u002Fmethod\">API\u003C\u002Fa>\n\u003C\u002Fp>\n\n[G6](https:\u002F\u002Fgithub.com\u002Fantvis\u002Fg6) is a graph visualization engine. It provides basic capabilities for graph visualization and analysis such as drawing, layout, analysis, interaction, animation, themes, and plugins. With G6, users can quickly build their own graph visualization and analysis applications, making relational data simple, transparent, and meaningful.\n\n\u003Cimg src='https:\u002F\u002Fmdn.alipayobjects.com\u002Fhuamei_qa8qxu\u002Fafts\u002Fimg\u002FA*_PJ5SZELwq0AAAAAAAAAAAAADmJ7AQ\u002Foriginal' width=550 alt='' \u002F>\n\n\u003Cimg src='https:\u002F\u002Fgw.alipayobjects.com\u002Fmdn\u002Frms_f8c6a0\u002Fafts\u002Fimg\u002FA*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 alt='' \u002F>\n\n\u003Cimg src='https:\u002F\u002Fgw.alipayobjects.com\u002Fmdn\u002Frms_f8c6a0\u002Fafts\u002Fimg\u002FA*zau8QJcVpDQAAAAAAAAAAABkARQnAQ' height=200 alt='' \u002F>\u003Cimg src='https:\u002F\u002Fgw.alipayobjects.com\u002Fmdn\u002Frms_f8c6a0\u002Fafts\u002Fimg\u002FA*RIlETY_S6IoAAAAAAAAAAABkARQnAQ' height=200 alt='' \u002F>\n\n\u003Cimg src='https:\u002F\u002Fgw.alipayobjects.com\u002Fmdn\u002Frms_f8c6a0\u002Fafts\u002Fimg\u002FA*cDzXR4jIWr8AAAAAAAAAAABkARQnAQ' height=150 alt='' \u002F>\u003Cimg src='https:\u002F\u002Fgw.alipayobjects.com\u002Fmdn\u002Frms_f8c6a0\u002Fafts\u002Fimg\u002FA*HTasSJGC4koAAAAAAAAAAABkARQnAQ' height=150 alt='' \u002F>\n\n\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F6113694\u002F44995293-02858600-afd5-11e8-840c-349e4730d63d.gif\" height=150 alt='' \u002F>\u003Cimg src=\"https:\u002F\u002Fgw.alipayobjects.com\u002Fmdn\u002Frms_f8c6a0\u002Fafts\u002Fimg\u002FA*I9OdTbXJIi0AAAAAAAAAAABkARQnAQ\" height=150 alt='' \u002F>\u003Cimg src=\"https:\u002F\u002Fgw.alipayobjects.com\u002Fmdn\u002Frms_f8c6a0\u002Fafts\u002Fimg\u002FA*xoufSYcjK2AAAAAAAAAAAABkARQnAQ\" height=150 alt='' \u002F>\n\n## ✨ Features\n\nG6, as a professional graph visualization engine, boasts the following features:\n\n- **Rich Elements**: It comes with a variety of built-in node, edge, and Combo UI elements with extensive style configurations, supports data callbacks, and has a flexible mechanism for extending custom elements.\n- **Controllable Interactions**: It includes more than 10 built-in interaction behaviors and offers a rich array of events, facilitating the expansion of custom interactive behaviors.\n- **High-Performance Layout**: The engine features more than 10 common graph layouts, some of which leverage GPU and Rust parallel computing for enhanced performance, and it supports custom layout development.\n- **Convenient Plugins**: Optimized built-in plugin functionality and performance, with flexible extensibility, making it easier to implement customized business capabilities.\n- **Multiple Theme and Palettes**: Provides two sets of built-in themes, light and dark, that integrate over 20 popular community color palettes based on the AntV new color scheme.\n- **Multi-Environment Rendering**: Harnessing the power of [G](https:\u002F\u002Fgithub.com\u002Fantvis\u002Fg), it supports rendering in Canvas, SVG, and WebGL, as well as server-side rendering with Node.js; it also offers plugin packages that provide powerful 3D rendering and spatial interactions based on WebGL.\n- **React Ecosystem**: By utilizing the React front-end ecosystem, it supports React nodes, significantly enriching the presentational styles of G6 nodes.\n\n## 🔨 Getting Started\n\nG6 is usually installed via a package manager such as npm or Yarn.\n\n```bash\n$ npm install @antv\u002Fg6\n```\n\nThe `Graph` object then can be imported from G6.\n\n```html\n\u003Cdiv id=\"container\">\u003C\u002Fdiv>\n```\n\n```js\nimport { Graph } from '@antv\u002Fg6';\n\n\u002F\u002F Get the Data.\nconst data = {\n  nodes: [\n    \u002F* your nodes data *\u002F\n  ],\n  edges: [\n    \u002F* your edges data *\u002F\n  ],\n};\n\n\u002F\u002F Create the Graph instance.\nconst graph = new Graph({\n  container: 'container',\n  data,\n  node: {\n    palette: {\n      type: 'group',\n      field: 'cluster',\n    },\n  },\n  layout: {\n    type: 'force',\n  },\n  behaviors: ['drag-canvas', 'drag-node'],\n});\n\n\u002F\u002F Render the Graph.\ngraph.render();\n```\n\nAll goes well, you can get the following lovely graph!\n\n\u003Cimg src=\"https:\u002F\u002Fmdn.alipayobjects.com\u002Fhuamei_qa8qxu\u002Fafts\u002Fimg\u002FA*ue4iTYurc6sAAAAAAAAAAAAADmJ7AQ\u002Ffmt.webp\" height=\"300\" \u002F>\n\n## 🌍 Ecosystem\n\n- **Ant Design Charts**: A React chart library based on G2, G6, X6, L7.\n- **Graphin**: A simple React wrapper based on G6, as well as an SDK for developing graph visualization applications.\n\nFor more ecosystem open-source projects, contributions are welcome. Please feel free to submit a PR for inclusion.\n\n## 📮 Contributing\n\nThis project exists thanks to all the people who contribute.\n\nAnd thank you to all our backers! 🙏\n\n\u003Ca href=\"https:\u002F\u002Fopenomy.app\u002Fgithub\u002Fantvis\u002FG6\" target=\"_blank\" style=\"display: block; width: 100%;\" align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fopenomy.app\u002Fsvg?repo=antvis\u002FG6&chart=bubble&latestMonth=3\" target=\"_blank\" alt=\"Contribution Leaderboard\" style=\"display: block; width: 100%;\" \u002F>\n \u003C\u002Fa>\n\n- **Issue Reporting**: If you encounter any issues with G6 during use, please feel free to submit an issue, along with the minimal sample code that can reproduce the problem.\n- **Contribution Guide**: Information on how to get involved in the [development and contribution](https:\u002F\u002Fg6.antv.antgroup.com\u002Fen\u002Fmanual\u002Fcontribute) to G6.\n- **Ideas Discussion**: Discuss your ideas on GitHub Discussions or in the DingTalk group.\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fmdn.alipayobjects.com\u002Fhuamei_qa8qxu\u002Fafts\u002Fimg\u002FA*CQoGSoFBzaUAAAAAAAAAAAAADmJ7AQ\u002Ffmt.webp\" height=\"256\" \u002F>\n\u003C\u002Fdiv>\n\n## 📄 License\n\n[MIT](.\u002FLICENSE).\n","G6 是一个用 TypeScript 编写的图可视化框架。它提供了绘制、布局、分析、交互、动画、主题和插件等基本功能，支持用户快速构建自己的图可视化与分析应用。G6 的核心特点包括丰富的内置图形元素、灵活的自定义能力以及强大的数据处理和渲染性能。适用于需要展示复杂关系数据的场景，如社交网络分析、流程图绘制、知识图谱展示等领域。",2,"2026-06-11 03:33:36","high_star"]