![\"x6](\"./flow.svg\")
![](\"https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg\")
English | [简体中文](/README.zh-CN.md)\n\n\n
\n ![\"NPM](\"https://img.shields.io/npm/v/@antv/x6.svg?logo=npm&style=for-the-badge\")
\n ![\"build\"](\"https://img.shields.io/github/actions/workflow/status/antvis/x6/build.yml?branch=master&style=for-the-badge&logo=github\")
![\"coverage\"](\"https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=for-the-badge&token=15CO54WYUV\")
![\"Package](\"https://img.badgesize.io/https://unpkg.com/@antv/x6?compression=gzip&style=for-the-badge\")
![\"NPM](\"https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=for-the-badge\")
![\"MIT](\"https://img.shields.io/github/license/antvis/x6?style=for-the-badge\")
![\"Language\"](\"https://img.shields.io/badge/language-TypeScript-blue.svg?style=for-the-badge\"){kind=icon}
\n ![\"PRs](\"https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=for-the-badge\"){kind=icon}
\n ![\"website\"](\"https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=for-the-badge&logo=google-chrome&logoColor=f5f5f5\")
![\"Ask](\"https://deepwiki.com/badge.svg\"){kind=icon}
\n
\n \n
\n Official Documentation •\n Quick Start •\n Graph Examples •\n FAQ •\n Demo Template •\n Awesome X6\n
\n\nAntV `X6` is a graph editing engine based on HTML and SVG, providing low-cost customization capabilities and out-of-the-box built-in extensions that make it easy to quickly build applications such as DAG diagrams, ER diagrams, flowcharts, lineage graphs, and more. We hope developers can use X6 to rapidly build various graph editing applications they need, making process relationship data controllable, interactive, and visualized.\n\n## ✨ Features\n\nAs a professional graph editing and visualization engine, X6 has the following features:\n\n- 🌱 _Highly Customizable_: Supports customizing node styles and interactions using SVG / HTML / React / Vue / Angular, with a comprehensive `event system` that allows listening to any events occurring within the chart.\n- 🚀 _Out-of-the-Box_: Built-in `10+` graph editing extensions, such as lasso selection, alignment lines, minimap, etc.\n- 🧲 _Data-Driven_: Based on the `MVC` architecture, allowing users to focus more on data logic and business logic.\n- 💯 _Server-Side Rendering_: Supports server-side rendering with good browser compatibility.\n\n## 🔨 Getting Started\n\nYou can install via package managers like NPM or Yarn.\n\n```bash\n# npm\n$ npm install @antv/x6 --save\n\n# yarn\n$ yarn add @antv/x6\n```\n\nAfter successful installation, you can import the `Graph` object using import.\n\n```html\n\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\nIf everything goes smoothly, you will get a simple flowchart canvas as shown below.\n\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3rpsRLQl7dgAAAAAQyAAAAgAemJ7AQ/fmt.avif\")
\n\n## 🧑🏻💻 Local Development\n\n```shell\n# Install project dependencies and initialize build\n$ pnpm install\n\n# Start examples to view results\npnpm run start:examples\n```\n\n## 📮 Contribution\n\nThank you to everyone who has contributed to this project and all supporters! 🙏\n\n\n