---
title: "Introduction"
description: "Introduction"
language: "en"
canonical: "https://x6.antv.antgroup.com/en/tutorial/about/"
version: "3.x"
---

[Resource index](/llms.txt)

X6 is a graph editing engine based on HTML and SVG, offering low-cost customization capabilities and out-of-the-box built-in extensions, making it easy for us to quickly build applications such as DAG diagrams, ER diagrams, flowcharts, and lineage graphs.

If you haven't used X6 yet, we recommend experiencing its charm through the [Getting Started Guide](/en/tutorial/getting-started).

<p align="left">
<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/actions/workflow/status/antvis/x6/ci.yml?branch=master&logo=github&style=flat-square" /></a>
<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/@antv/x6.svg?style=flat-square" /></a>
<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=flat-square" /></a>
</p>

<p align="left">
<a href="https://github.com/antvis/X6/blob/master/LICENSE"><img src="https://img.shields.io/github/license/antvis/x6?style=flat-square" alt="MIT License" /></a>
<a href="https://www.typescriptlang.org"><img alt="Language" src="https://img.shields.io/badge/language-TypeScript-blue.svg?style=flat-square" /></a>
<a href="https://github.com/antvis/x6/pulls"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square" /></a>
<a href="https://x6.antv.antgroup.com"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=flat-square&logo=google-chrome&logoColor=0076D6" /></a>
</p>

## ✨ Features

- 🌱  Highly Customizable: Supports customizing node styles and interactions using SVG/HTML/React/Vue/Angular.
- 🚀  Ready to Use: Comes with 10+ built-in graph editing extensions, such as selection, alignment lines, mini-map, etc.
- 🧲  Data-Driven: Based on MVC architecture, allowing users to focus more on data logic and business logic.
- 💯  Event-Driven: Can listen to any events occurring within the graph.

## 🍉 Documentation

- [Getting Started](/en/tutorial/getting-started)
- [Basics](/en/tutorial/basic/graph)
- [Advanced](/en/tutorial/intermediate/connection-point)
- [Plugins](/en/tutorial/plugins/transform)
- [API](/en/api/graph/graph)

The X6 documentation is divided into two parts: documentation and API. It is recommended to read the documentation carefully, as it will help you get started with development. The API documentation is extensive, so you can refer to it when you encounter issues by searching for the relevant documents.

## ❤️ How to Communicate

If you have any questions, suggestions, feedback, or wish to communicate, you can contact us through the following methods:

- Official Recommendation: [GitHub issues](https://github.com/antvis/X6/issues/new/choose)
- Yuque Column: [https://www.yuque.com/antv/blog](https://www.yuque.com/antv/blog)

<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*T_A1Q7etdAUAAAAASHAAAAgAemJ7AQ/original" alt="X6 Graph Editing Community" width="375" />

## 🤝 Contributing

### Bugs

If you encounter any issues while using, please check [issues](https://github.com/antvis/x6/issues) to see if there are similar bugs or suggestions. Before reporting a bug, please ensure you have searched existing issues and read our [FAQ](https://www.yuque.com/antv/x6/tox1ukbz5cw57qfy).

### Code of Conduct

We have a [Code of Conduct](https://github.com/antvis/X6/blob/master/CONTRIBUTING.md) that we hope all contributors will adhere to. Please take the time to read it to understand what is acceptable and what is not.

### Join the Community

Explore the [Community FAQ](https://www.yuque.com/sxd_panda/antv/x6) for common questions and answers collected by the community.

You can also refer to the contribution guidelines below to become a contributor to X6 step by step:

- [How to Participate in X6 Open Source Development](https://www.yuque.com/antv/x6/gcinvi)
- [How to Contribute Code Elegantly on GitHub](https://segmentfault.com/a/1190000000736629?u_atoken=b71f69b7-7d74-4e6c-a373-76e0a36e2c87&u_asession=01aGvG2P10Vrjamv5BFM7yX0X2_OcJ_XmHlitgQC_BVnNLlRLdwpnHYH8ma1b1UKRaX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K93NVUbout2zcDySUWFprtJUe3R9QHfzEvknA4dzJmVTGBkFo3NEHBv0PZUm6pbxQU&u_asig=05FBplinh079EhmRTHTDgrLXp5aawipV_A-9VAsAs841tY8QeTTaaTvFKcH6odRhI4VX2pBdH5ae6FY2MiL2X_4yTqZp2jK-_nBOl2nesFZDM2RmF5JkBT_JWpU60Z6lY1hzgqVxFxj_uE1HnffLBmwa5Sl9NkdZ4_S8RH_A-AooP9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzZMNY1otqX6vcbPyd-A-Ld3WE-pEMt_G6ZtWjng8eWoZH_8T8uYGNepqxdb-gLe1IO3h9VXwMyh6PgyDIVSG1W-dzbV77H9pFSh5eWBVfcZZYGYDqHeX90h_yD6KfDquy8GWlAwW_v4wTa3IAdocwA0iaDksczFnALAG-4HaicdUmWspDxyAEEo4kbsryBKb9Q&u_aref=SU72jL%2FvYl46xrVouxNG%2FiEj5e0%3D)

<a href="https://github.com/antvis/x6/graphs/contributors">
  <img src="https://openomy.app/svg?repo=antvis/X6&chart=bubble&latestMonth=12" target="_blank" alt="Contribution Leaderboard" style="display: block; height: 400px" />
</a>