Repolode
Submit
antvis

antvis/X6

A TypeScript/JavaScript graph editing and visualization engine built on SVG and HTML for DAG, ER, flowchart and lineage diagrams.

View on GitHubWebsite
Stars
6,752
Forks
1,895
Open issues
156
Last commit
15 days ago

What is it?

AntV X6 is a graph editing engine written in TypeScript that renders nodes and edges with SVG and HTML. It is aimed at building interactive diagram applications such as DAG diagrams, ER diagrams, flowcharts and lineage graphs without starting from scratch.

Nodes can be styled and made interactive using plain SVG or HTML, or through React, Vue and Angular. The library follows an MVC-style, data-driven model so application code can focus on data and business logic, and it exposes an event system that covers events occurring within the chart.

Out of the box, X6 includes more than ten editing extensions such as lasso selection, alignment lines and a minimap. It is installed from npm as @antv/x6 and supports server-side rendering.

Key features

  • 01Renders nodes and edges with SVG and HTML.
  • 02Custom node styles and interactions via SVG, HTML, React, Vue or Angular.
  • 03Built-in extensions including lasso selection, alignment lines and minimap.
  • 04Data-driven MVC architecture with a comprehensive event system.
  • 05Supports server-side rendering.

Use cases

  • Building DAG or workflow editors in a web application.
  • Creating entity-relationship (ER) diagram tools.
  • Developing flowchart or lineage graph visualizations.
  • Adding interactive diagramming to a React, Vue or Angular front end.

Quick start

  1. 1

    Install the package with npm

    npm install @antv/x6 --save
  2. 2

    Import Graph and create a graph in a container element

  3. 3

    Add nodes and an edge to the graph

In collections

Diagrams, charts & animated visualizationsData science courses & tools

Topics

#graph-editor#diagramming#visualization#svg#typescript#flowchart#dag#data-visualization#antv#diagram

FAQ

What is X6?
A TypeScript/JavaScript graph editing and visualization engine built on SVG and HTML for DAG, ER, flowchart and lineage diagrams. AntV X6 is a graph editing engine written in TypeScript that renders nodes and edges with SVG and HTML. It is aimed at building interactive diagram applications such as DAG diagrams, ER diagrams, flowcharts and lineage graphs without starting from scratch.
Is X6 free to use? What license does it have?
X6 is open source under the MIT license. Check the license terms before using it in commercial products.
Is X6 still maintained?
Actively maintained. The last commit to X6 was on Oct 23, 2026.
What can I use X6 for?
Building DAG or workflow editors in a web application. Creating entity-relationship (ER) diagram tools. Developing flowchart or lineage graph visualizations. Adding interactive diagramming to a React, Vue or Angular front end.
How do I install X6?
Install the package with npm: npm install @antv/x6 --save Import Graph and create a graph in a container element Add nodes and an edge to the graph
Where can I get X6?
The source code and installation instructions are on GitHub: https://github.com/antvis/X6

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects