X6 Documentation

X6 is a graph editing visualization engine based on HTML and SVG. Key features include:

• Highly Customizable: Supports using SVG, HTML, React, Vue, or Angular to customize node styles and interactions. It includes a complete event system to listen to any events within the chart.
• Out-of-the-box Extensions: Includes 10+ built-in extensions for graph editing, such as selection boxes, alignment lines, and mini-maps.
• Data Driven: Built on an MVC architecture, allowing developers to focus on data and business logic.
• Server-Side Rendering (SSR): Supports SSR and maintains good browser compatibility.

X6 is a graph editing engine based on HTML and SVG. It is designed for building applications such as DAG (Directed Acyclic Graph) diagrams, ER (Entity-Relationship) diagrams, flowcharts, and lineage graphs.

Key features include:

• High Customizability: Supports using SVG, HTML, React, Vue, or Angular to customize node styles and interactions.
• Out-of-the-box Extensions: Includes over 10 built-in extensions for graph editing, such as selection boxes, alignment lines, and mini-maps.
• Data-Driven: Built on an MVC architecture, allowing developers to focus on data and business logic.
• Event-Driven: Provides the ability to listen to any event occurring within the graph.

A ConnectionPoint works together with an Anchor to determine where an edge begins or ends.

• Start Point: A reference line is drawn from the first path point (or the center of the target node if no path points exist) to the source node's anchor. The intersection of this line and the shape (calculated via the connectionPoint method) is the edge's start point.
• End Point: A reference line is drawn from the last path point (or the center of the source node if no path points exist) to the target node's anchor. The intersection of this line and the shape is the edge's end point.

X6 utilizes several coordinate systems for position calculations. Understanding these is essential for accurate coordinate transformations:

• local: The canvas local coordinate system. By default, it matches the graph system, but it changes as the canvas is zoomed or panned. All node coordinates in the canvas are based on this system.
• graph: The canvas coordinate system (the viewport). It does not change with canvas zooming or panning.
• client: The browser coordinate system. Refers to e.clientX and e.clientY in mouse events.
• page: The page coordinate system. Similar to client, but accounts for horizontal and vertical page scrolling (e.pageX and e.pageY).

When connecting an edge to another edge, EdgeAnchor specifies the anchor point on the target edge. Together with ConnectionPoint, it determines the start and end points of the edge. X6 provides several built-in anchor types:

• ratio: Positions the anchor at a specific ratio along the edge length.
• length: Positions the anchor at a specific distance from the edge start.
• closest: Uses the point on the edge closest to the reference point.
• orth: Uses orthogonal points to maintain perpendicular connections.

In X6, edges are drawn by connecting a reference line from a source anchor to a target anchor. The actual intersection points where the edge meets the node are determined by the connectionPoint strategy.

• Anchor: Defines the reference point on the element (default is center).
• Connection Point: Specifies how to compute the intersection points between the edge line and the element boundary. The default is boundary (intersection with the element boundary). If set to anchor, the edge connects directly to the anchor point itself.

To use X6, import the Graph object, initialize it with a container element, and use addNode and addEdge to build your diagram. The following example creates a simple graph with two nodes and one edge.

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',
});

const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',
});

graph.addEdge({
  source,
  target,
});

Routing processes an edge's waypoints to add additional points, determining the visual path of the edge. You can configure routing in three ways:

1. When adding an edge: Use the router property in graph.addEdge().
2. On an existing edge: Use the edge.setRouter() method.
3. Globally for a graph: Set the connecting.router option when initializing a new Graph instance.

If a router requires no arguments, you can pass a string instead of an object.

To make an HTML node reactive, provide an effect array in the Shape.HTML.register configuration. The effect array should contain the names of the properties (from the node's prop array) that should trigger a re-render. When any property listed in effect changes, the html method is re-executed, and the new DOM returned by the method is used to update the node.

Shape.HTML.register({
  shape: 'custom-html',
  width: 160,
  height: 80,
  effect: ['data'],
  html(cell) {
    const { color } = cell.getData()
    const div = document.createElement('div')
    div.className = 'custom-html'
    div.style.background = color
    return div
  },
})