or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

geometry.mdgraph.mdindex.mdmodel.mdplugins.mdregistry.mdshapes.mdutilities.mdview-system.md
tile.json

tessl/npm-antv--x6

JavaScript diagramming library that uses SVG and HTML for rendering interactive graph visualizations and diagram editing applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@antv/x6@2.18.x

To install, run

npx @tessl/cli install tessl/npm-antv--x6@2.18.0

index.mddocs/

X6

X6 is a professional graph editing and visualization engine based on HTML and SVG, developed by AntV. It provides comprehensive capabilities for building interactive diagram applications including DAG diagrams, ER diagrams, flowcharts, and lineage graphs. The library offers highly customizable node and edge styling through SVG, HTML, React, Vue, and Angular integrations, along with a complete event system for interaction handling.

Package Information

  • Package Name: @antv/x6
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @antv/x6

Core Imports

import { Graph, Node, Edge, Shape, Registry } from "@antv/x6";

For CommonJS:

const { Graph, Node, Edge, Shape, Registry } = require("@antv/x6");

Basic Usage

import { Graph, Node, Edge } from "@antv/x6";

// Create a graph instance
const graph = new Graph({
  container: document.getElementById('graph'),
  width: 800,
  height: 600,
  grid: true,
  panning: true,
  mousewheel: {
    enabled: true,
    modifiers: ['ctrl', 'meta']
  }
});

// Add nodes
const node1 = graph.addNode({
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  label: 'Node 1',
  shape: 'rect'
});

const node2 = graph.addNode({
  x: 300,
  y: 200,
  width: 80,
  height: 40,
  label: 'Node 2',
  shape: 'rect'
});

// Add edge
graph.addEdge({
  source: node1,
  target: node2,
  label: 'Connection'
});

Architecture

X6 is built around several key architectural components:

  • Graph System: Core graph management with rendering, transformation, and viewport control
  • Model-View Architecture: Separation between data model (Cell, Node, Edge) and DOM rendering (CellView, NodeView, EdgeView)
  • Plugin System: Extensible functionality through modular plugins (Selection, History, Keyboard, etc.)
  • Shape System: Built-in and custom shape definitions with SVG/HTML rendering
  • Registry System: Registration and management of all extensions (shapes, tools, connectors, etc.)
  • Event System: Comprehensive event handling for user interactions and model changes

Capabilities

Graph Management

Core graph creation and management functionality for building interactive diagram applications.

class Graph {
  constructor(options: Partial<GraphOptions.Manual>);
  
  // Cell management
  addCell(cell: Cell | Cell[], options?: Model.AddOptions): this;
  removeCell(cell: Cell | string, options?: Collection.RemoveOptions): Cell | null;
  getCells(): Cell[];
  getCellById(id: string): Cell | null;
  
  // Node operations
  addNode(node: Node | Node.Metadata, options?: Model.AddOptions): Node;
  removeNode(node: Node | string, options?: Collection.RemoveOptions): Node | null;
  getNodes(): Node[];
  
  // Edge operations
  addEdge(edge: Edge | Edge.Metadata, options?: Model.AddOptions): Edge;
  removeEdge(edge: Edge | string, options?: Collection.RemoveOptions): Edge | null;
  getEdges(): Edge[];
  
  // Transform operations
  zoom(factor?: number, options?: Transform.ZoomOptions): this | number;
  translate(tx: number, ty: number): this;
  center(options?: Transform.CenterOptions): this;
  fitToContent(options?: Transform.FitToContentFullOptions): Rectangle;
  
  // Plugin management
  use(plugin: Graph.Plugin, ...options: any[]): this;
}

interface GraphOptions.Manual {
  container: HTMLElement;
  width: number;
  height: number;
  grid?: boolean | GridOptions;
  panning?: boolean | PanningOptions;
  mousewheel?: MousewheelOptions;
  background?: BackgroundOptions;
  connecting?: ConnectingOptions;
  highlighting?: HighlightingOptions;
  interacting?: InteractingOptions;
  keyboard?: boolean;
  history?: boolean;
  selecting?: boolean | SelectionOptions;
  snapline?: boolean;
  clipboard?: boolean;
  model?: Model;
}

Graph Management

Node and Edge Models

Data model classes for creating and managing graph elements with full property and attribute control.

class Cell {
  constructor(metadata?: Cell.Metadata);
  
  // Properties
  readonly id: string;
  readonly shape: string;
  
  // Type guards
  isNode(): this is Node;
  isEdge(): this is Edge;
  
  // Property management
  prop(): Cell.Properties;
  prop(key: string): any;
  prop(props: Partial<Cell.Properties>, options?: Cell.SetOptions): this;
  
  // Attribute management
  attr(): CellAttrs;
  attr(key: string): any;
  attr(attrs: CellAttrs, options?: Cell.SetOptions): this;
  
  // Operations
  clone(options?: Cell.CloneOptions): Cell;
  remove(options?: Cell.RemoveOptions): this;
  toJSON(): Cell.Properties;
}

class Node extends Cell {
  // Position and size
  position(): Point.PointData;
  position(x: number, y: number, options?: Node.PositionOptions): this;
  size(): Size;
  size(width: number, height: number, options?: Node.ResizeOptions): this;
  
  // Transformations
  translate(dx: number, dy: number, options?: Node.TranslateOptions): this;
  rotate(angle: number, options?: Node.RotateOptions): this;
  scale(sx: number, sy: number, origin?: Point.PointLike, options?: Node.SetOptions): this;
  
  // Port management
  addPort(port: PortManager.PortMetadata, options?: Node.SetOptions): this;
  removePort(portId: string, options?: Node.SetOptions): this;
  getPorts(): PortManager.Port[];
  getPort(portId: string): PortManager.Port | null;
}

class Edge extends Cell {
  // Terminal management
  getSource(): Edge.TerminalData;
  getTarget(): Edge.TerminalData;
  setSource(source: Edge.TerminalData, options?: Edge.SetOptions): this;
  setTarget(target: Edge.TerminalData, options?: Edge.SetOptions): this;
  
  // Path control
  getVertices(): Point.PointData[];
  setVertices(vertices: Point.PointLike[], options?: Edge.SetOptions): this;
  
  // Labels
  getLabels(): Edge.Label[];
  setLabels(labels: Edge.Label[], options?: Edge.SetOptions): this;
  
  // Routing and connection
  setRouter(router: any, options?: Edge.SetOptions): this;
  setConnector(connector: any, options?: Edge.SetOptions): this;
}

Model System

Built-in Shapes

Comprehensive collection of built-in shapes for nodes and edges with customizable styling.

// Basic shapes
class Rect extends Node {
  static define(config?: Partial<Node.Config>): typeof Rect;
}

class Circle extends Node {
  static define(config?: Partial<Node.Config>): typeof Circle;
}

class Ellipse extends Node {
  static define(config?: Partial<Node.Config>): typeof Ellipse;
}

// Advanced shapes
class Image extends Node {
  static define(config?: Partial<Node.Config>): typeof Image;
}

class HTML extends Node {
  static define(config?: Partial<Node.Config>): typeof HTML;
}

class TextBlock extends Node {
  static define(config?: Partial<Node.Config>): typeof TextBlock;
}

class Path extends Node {
  static define(config?: Partial<Node.Config>): typeof Path;
}

// Edge shape
class Edge extends Edge {
  static define(config?: Partial<Edge.Config>): typeof Edge;
}

// Shape registration
namespace Graph {
  function registerNode(name: string, nodeClass: typeof Node, force?: boolean): typeof Node;
  function registerEdge(name: string, edgeClass: typeof Edge, force?: boolean): typeof Edge;
}

Shape System

Plugin System

Extensible plugin architecture providing additional functionality for graph interaction and editing.

interface Graph.Plugin {
  name: string;
  init(graph: Graph, options?: any): void;
  uninstall?(graph: Graph): void;
}

// Core plugins
class Selection implements Graph.Plugin {
  enable(): this;
  disable(): this;
  select(cells: Cell | Cell[]): this;
  unselect(cells?: Cell | Cell[]): this;
  getSelectedCells(): Cell[];
  isEmpty(): boolean;
}

class History implements Graph.Plugin {
  undo(): this;
  redo(): this;
  canUndo(): boolean;
  canRedo(): boolean;  
  clean(): this;
}

class Keyboard implements Graph.Plugin {
  bindKey(keys: string | string[], callback: Function, action?: 'keypress' | 'keydown' | 'keyup'): this;
  unbindKey(keys: string | string[]): this;
  trigger(event: KeyboardEvent): this;
}

class Clipboard implements Graph.Plugin {
  copy(cells?: Cell[]): this;
  cut(cells?: Cell[]): this;
  paste(options?: any): Cell[];
  clear(): this;
}

class Transform implements Graph.Plugin {
  createHandle(options?: any): HTMLElement;
  updateHandles(): this;
}

Plugin System

Registry System

Registration and management system for all X6 extensions including shapes, connectors, routers, and tools.

class Registry<T> {
  register(name: string, entity: T, force?: boolean): T;
  unregister(name: string): T | null;
  get(name: string): T | null;
  exist(name: string): boolean;
}

// Available registries
const attrRegistry: Registry<AttrDefinition>;
const backgroundRegistry: Registry<BackgroundDefinition>;
const connectionPointRegistry: Registry<ConnectionPointDefinition>;  
const connectorRegistry: Registry<ConnectorDefinition>;
const routerRegistry: Registry<RouterDefinition>;
const filterRegistry: Registry<FilterDefinition>;
const gridRegistry: Registry<GridDefinition>;
const highlighterRegistry: Registry<HighlighterDefinition>;
const markerRegistry: Registry<MarkerDefinition>;
const nodeAnchorRegistry: Registry<NodeAnchorDefinition>;
const edgeAnchorRegistry: Registry<EdgeAnchorDefinition>;
const portLayoutRegistry: Registry<PortLayoutDefinition>;
const portLabelLayoutRegistry: Registry<PortLabelLayoutDefinition>;
const nodeToolRegistry: Registry<NodeToolDefinition>;
const edgeToolRegistry: Registry<EdgeToolDefinition>;

Registry System

View System

Presentation layer architecture for rendering graph elements and handling user interactions in X6's MVC pattern.

class CellView<Entity extends Cell = Cell> extends View<CellViewEventArgs> {
  constructor(cell: Entity, options: Partial<CellViewOptions> = {});
  
  // Core properties
  readonly cell: Entity;
  readonly graph: Graph;
  readonly container: Element;
  
  // Rendering lifecycle
  render(): this;
  update(partialAttrs?: CellAttrs): this;
  resize(): this;
  translate(): this;
  rotate(): this;
  
  // Tool management
  addTools(config: any): this;
  removeTools(): this;
  updateTools(options?: any): this;
}

class NodeView<Entity extends Node = Node> extends CellView<Entity> {
  // Port management
  findPortElem(portId?: string, selector?: string): Element | null;
  renderPorts(): this;
  updatePorts(): this;
}

class EdgeView<Entity extends Edge = Edge> extends CellView<Entity> {
  // Connection management
  getConnection(): Path;
  updateConnection(options?: any): this;
  getConnectionLength(): number;
  getPointAtLength(length: number): Point;
  getPointAtRatio(ratio: number): Point;
}

View System

Common Utilities

Comprehensive collection of utility modules for DOM manipulation, platform detection, and data processing.

namespace Dom {
  function createElement(tagName: string, attrs?: KeyValue, ns?: string): Element;
  function attr(elem: Element, name: string, value?: any): any;
  function addClass(elem: Element, className: string): Element;
  function css(elem: Element, name: string, value?: any): any;
  function getBBox(elem: Element): Rectangle;
  function transform(elem: Element, transform: string): Element;
}

namespace Platform {
  const IS_CHROME: boolean;
  const IS_FIREFOX: boolean;
  const IS_SAFARI: boolean;
  const IS_MOBILE: boolean;
  const IS_TOUCH_DEVICE: boolean;
}

namespace ObjectExt {
  function clone<T>(obj: T): T;
  function merge<T>(...objects: Partial<T>[]): T;
  function get(obj: any, path: string | string[], defaultValue?: any): any;
  function set(obj: any, path: string | string[], value: any): void;
}

Common Utilities

Geometry Utilities

Mathematical utilities for 2D geometry operations, transformations, and calculations.

class Point {
  constructor(x?: number, y?: number);
  x: number;
  y: number;
  
  translate(dx: number, dy: number): this;
  rotate(angle: number, origin?: Point): this;
  scale(sx: number, sy: number, origin?: Point): this;
  distance(point: Point): number;
  equals(point: Point): boolean;
  clone(): Point;
}

class Rectangle {
  constructor(x?: number, y?: number, width?: number, height?: number);
  x: number;
  y: number;
  width: number;
  height: number;
  
  center: Point;
  topLeft: Point;
  topRight: Point;
  bottomLeft: Point;
  bottomRight: Point;
  
  intersectsWithRect(rect: Rectangle): boolean;
  containsPoint(point: Point): boolean;
  containsRect(rect: Rectangle): boolean;
  union(rect: Rectangle): Rectangle;
  inflate(dx: number, dy?: number): Rectangle;
}

class Line {
  constructor(start: Point, end: Point);
  start: Point;
  end: Point;
  
  length(): number;
  angle(): number;
  intersect(line: Line): Point | null;
  closestPoint(point: Point): Point;
  pointAt(t: number): Point;
}

Geometry System

Types

// Core interfaces
interface Cell.Metadata {
  id?: string;
  shape?: string;
  position?: Point.PointLike;
  size?: Size;
  angle?: number;
  attrs?: CellAttrs;
  ports?: PortManager.PortMetadata[];
  data?: any;
  [key: string]: any;
}

interface Node.Metadata extends Cell.Metadata {
  x?: number;
  y?: number;
  width?: number;
  height?: number;
}

interface Edge.Metadata extends Cell.Metadata {
  source?: Edge.TerminalData;
  target?: Edge.TerminalData;
  vertices?: Point.PointLike[];
  labels?: Edge.Label[];
  router?: any;
  connector?: any;
}

// Common types
interface Point.PointLike {
  x: number;
  y: number;
}

interface Point.PointData {
  x: number;
  y: number;
}

interface Size {
  width: number;
  height: number;
}

interface CellAttrs {
  [selector: string]: {
    [attrName: string]: any;
  };
}

// Terminal data for edges
type Edge.TerminalData = 
  | string
  | { cell: string | Cell; port?: string; magnet?: string; }
  | { x: number; y: number; };

// Port definitions
interface PortManager.PortMetadata {
  id?: string;
  group?: string;
  position?: Point.PointLike | string;
  attrs?: CellAttrs;
  args?: any;
  label?: {
    text?: string;
    position?: any;
    attrs?: CellAttrs;
  };
}

interface PortManager.Port extends PortManager.PortMetadata {
  id: string;
  position: Point.PointLike;
}

// Event types  
interface EventArgs {
  'cell:added': { cell: Cell; index: number; options: Model.AddOptions };
  'cell:removed': { cell: Cell; index: number; options: Collection.RemoveOptions };
  'cell:changed': { cell: Cell; options: Cell.SetOptions };
  'node:added': { node: Node; index: number; options: Model.AddOptions };
  'node:removed': { node: Node; index: number; options: Collection.RemoveOptions };
  'node:moved': { node: Node; options: Node.PositionOptions };
  'edge:added': { edge: Edge; index: number; options: Model.AddOptions };
  'edge:removed': { edge: Edge; index: number; options: Collection.RemoveOptions };
  'edge:connected': { edge: Edge; options: Edge.SetOptions };
  'render:done': { stats: any };
  'scale': { sx: number; sy: number; ox: number; oy: number };
  'translate': { tx: number; ty: number };
  'cell:click': { cell: Cell; view: CellView; e: MouseEvent };
  'cell:dblclick': { cell: Cell; view: CellView; e: MouseEvent };
  'cell:mouseenter': { cell: Cell; view: CellView; e: MouseEvent };
  'cell:mouseleave': { cell: Cell; view: CellView; e: MouseEvent };
  [key: string]: any;
}

// Utility types
type Nilable<T> = T | null | undefined;

interface KeyValue<T = any> {
  [key: string]: T;
}

type JSONPrimitive = boolean | number | string | null | undefined;
type JSONValue = JSONPrimitive | JSONObject | JSONArray;

interface JSONObject {
  [key: string]: JSONValue;
}

interface JSONArray extends Array<JSONValue> {}

// View-related types
interface CellViewOptions {
  graph: Graph;
  priority: number;
  isSvgElement: boolean;
  rootSelector: string;
  bootstrap: FlagManagerActions;
  actions: KeyValue<FlagManagerActions>;
  events?: View.Events | null;
  documentEvents?: View.Events | null;
}

interface CellViewEventArgs {
  'view:render': { view: CellView };
  'view:update': { view: CellView; flag: number };
  'view:resize': { view: CellView };
  'view:translate': { view: CellView };
  'view:rotate': { view: CellView };
}

interface ToolsViewOptions {
  tools?: (ToolItem | ToolItem.Config)[];
  className?: string;
  layer?: string;
}

interface ToolItemOptions {
  name?: string;
  className?: string;
  tagName?: string;
  children?: ToolItem[];
}

// Transform types
interface Translation {
  tx: number;
  ty: number;
}

interface Rotation {
  angle: number;
  cx?: number;
  cy?: number;
}

interface Scale {
  sx: number;
  sy: number;
}