or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

geometry.md graph.md index.md model.md plugins.md registry.md shapes.md utilities.md view-system.md

tile.json

Shape System

Comprehensive collection of built-in shapes for nodes and edges with customizable styling and registration system. X6 provides ready-to-use shapes and utilities for creating custom shapes with full SVG and HTML integration.

Capabilities

Shape Registration

System for registering and defining custom shapes that extend the built-in shape classes.

/**
 * Register a custom node shape
 * @param name - Shape name for registration
 * @param nodeClass - Node class or definition
 * @param force - Force overwrite existing registration
 * @returns Registered node class
 */
function registerNode(name: string, nodeClass: typeof Node, force?: boolean): typeof Node;

/**
 * Register a custom edge shape  
 * @param name - Shape name for registration
 * @param edgeClass - Edge class or definition
 * @param force - Force overwrite existing registration
 * @returns Registered edge class
 */
function registerEdge(name: string, edgeClass: typeof Edge, force?: boolean): typeof Edge;

/**
 * Register a custom view for shape rendering
 * @param name - View name for registration
 * @param viewClass - View class or definition
 * @param force - Force overwrite existing registration
 * @returns Registered view class
 */
function registerView(name: string, viewClass: typeof CellView, force?: boolean): typeof CellView;

/**
 * Create a shape class with configuration
 * @param shape - Base shape name
 * @param config - Shape configuration
 * @param options - Creation options
 * @returns Shape class
 */
function createShape(
  shape: string,
  config: Node.Config,
  options?: {
    selector?: string;
    parent?: Node.Definition | typeof Base;
  }
): typeof Base;

// Shape definition interface
interface Node.Config {
  constructorName?: string;
  overwrite?: boolean;
  inherit?: string | Node.Definition;
  markup?: Markup;
  attrs?: CellAttrs;
  propHooks?: Node.PropHook[];
  attrHooks?: Node.AttrHook[];
  data?: KeyValue;
  [key: string]: any;
}

interface Node.Definition {
  constructorName: string;
  defaults: Node.Config;
  markup: Markup;
}

Rectangle Shape

Basic rectangular shape with configurable corner radius and styling.

/**
 * Rectangle shape class
 */
class Rect extends Node {
  /**
   * Define a custom rectangle shape
   * @param config - Rectangle configuration
   * @returns Custom rectangle class
   */
  static define(config?: Partial<Node.Config>): typeof Rect;
  
  /**
   * Create rectangle instance
   * @param metadata - Rectangle metadata
   */
  constructor(metadata?: Rect.Metadata);
}

interface Rect.Metadata extends Node.Metadata {
  // Inherits all Node.Metadata properties
  // Rectangle-specific styling via attrs
  attrs?: {
    body?: {
      fill?: string;
      stroke?: string;
      strokeWidth?: number;
      rx?: number; // Corner radius X
      ry?: number; // Corner radius Y
      [key: string]: any;
    };
    label?: {
      text?: string;
      fill?: string;
      fontSize?: number;
      fontFamily?: string;
      textAnchor?: string;
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Usage Examples:

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

// Use built-in rectangle
const rect = new Shape.Rect({
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  attrs: {
    body: {
      fill: 'lightblue',
      stroke: 'blue',
      rx: 5,
      ry: 5
    },
    label: {
      text: 'Rectangle',
      fill: 'black'
    }
  }
});

// Define custom rectangle
const RoundedRect = Shape.Rect.define({
  attrs: {
    body: {
      fill: 'white',
      stroke: 'gray', 
      strokeWidth: 1,
      rx: 10,
      ry: 10
    }
  }
});

// Register custom rectangle
Graph.registerNode('rounded-rect', RoundedRect);

Circle Shape

Circular shape with radius-based sizing and center positioning.

/**
 * Circle shape class
 */
class Circle extends Node {
  /**
   * Define a custom circle shape
   * @param config - Circle configuration
   * @returns Custom circle class
   */
  static define(config?: Partial<Node.Config>): typeof Circle;
  
  /**
   * Create circle instance
   * @param metadata - Circle metadata
   */
  constructor(metadata?: Circle.Metadata);
}

interface Circle.Metadata extends Node.Metadata {
  attrs?: {
    body?: {
      fill?: string;
      stroke?: string;
      strokeWidth?: number;
      r?: number; // Radius
      cx?: number; // Center X (relative to shape)
      cy?: number; // Center Y (relative to shape)
      [key: string]: any;
    };
    label?: {
      text?: string;
      fill?: string;
      fontSize?: number;
      textAnchor?: string;
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Ellipse Shape

Elliptical shape with separate X and Y radius control.

/**
 * Ellipse shape class
 */
class Ellipse extends Node {
  /**
   * Define a custom ellipse shape
   * @param config - Ellipse configuration
   * @returns Custom ellipse class
   */
  static define(config?: Partial<Node.Config>): typeof Ellipse;
  
  /**
   * Create ellipse instance
   * @param metadata - Ellipse metadata
   */
  constructor(metadata?: Ellipse.Metadata);
}

interface Ellipse.Metadata extends Node.Metadata {
  attrs?: {
    body?: {
      fill?: string;
      stroke?: string;
      strokeWidth?: number;
      rx?: number; // Radius X
      ry?: number; // Radius Y
      cx?: number; // Center X
      cy?: number; // Center Y
      [key: string]: any;
    };
    label?: {
      text?: string;
      fill?: string;
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Polygon Shape

Multi-sided polygon shape with configurable points and styling.

/**
 * Polygon shape class
 */
class Polygon extends Node {
  /**
   * Define a custom polygon shape
   * @param config - Polygon configuration
   * @returns Custom polygon class
   */
  static define(config?: Partial<Node.Config>): typeof Polygon;
  
  /**
   * Create polygon instance
   * @param metadata - Polygon metadata
   */
  constructor(metadata?: Polygon.Metadata);
}

interface Polygon.Metadata extends Node.Metadata {
  attrs?: {
    body?: {
      fill?: string;
      stroke?: string;
      strokeWidth?: number;
      points?: string; // SVG points attribute
      refPoints?: string; // Relative points
      [key: string]: any;
    };
    label?: {
      text?: string;
      fill?: string;
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Polyline Shape

Multi-segment line shape for creating connected line segments.

/**
 * Polyline shape class
 */
class Polyline extends Node {
  /**
   * Define a custom polyline shape
   * @param config - Polyline configuration
   * @returns Custom polyline class
   */
  static define(config?: Partial<Node.Config>): typeof Polyline;
  
  /**
   * Create polyline instance
   * @param metadata - Polyline metadata
   */
  constructor(metadata?: Polyline.Metadata);
}

interface Polyline.Metadata extends Node.Metadata {
  attrs?: {
    body?: {
      stroke?: string;
      strokeWidth?: number;
      fill?: string;
      points?: string; // SVG points attribute
      refPoints?: string; // Relative points
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Image Shape

Image embedding shape with URL loading and scaling capabilities.

/**
 * Image shape class
 */
class Image extends Node {
  /**
   * Define a custom image shape
   * @param config - Image configuration
   * @returns Custom image class
   */
  static define(config?: Partial<Node.Config>): typeof Image;
  
  /**
   * Create image instance
   * @param metadata - Image metadata
   */
  constructor(metadata?: Image.Metadata);
}

interface Image.Metadata extends Node.Metadata {
  attrs?: {
    image?: {
      'xlink:href'?: string; // Image URL
      width?: number;
      height?: number;
      x?: number;
      y?: number;
      preserveAspectRatio?: string;
      opacity?: number;
      [key: string]: any;
    };
    label?: {
      text?: string;
      fill?: string;
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Usage Examples:

import { Shape } from "@antv/x6";

// Image with URL
const imageNode = new Shape.Image({
  x: 100,
  y: 100,
  width: 100,
  height: 80,
  attrs: {
    image: {
      'xlink:href': 'https://example.com/image.png',
      width: 100,
      height: 80
    },
    label: {
      text: 'Image Node',
      refY: '100%',
      refY2: 10
    }
  }
});

// Image with data URI
const dataImageNode = new Shape.Image({
  attrs: {
    image: {
      'xlink:href': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=='
    }
  }
});

HTML Shape

HTML content embedding shape for rich content and custom styling.

/**
 * HTML shape class for embedding HTML content
 */
class HTML extends Node {
  /**
   * Define a custom HTML shape
   * @param config - HTML configuration
   * @returns Custom HTML class
   */
  static define(config?: Partial<Node.Config>): typeof HTML;
  
  /**
   * Create HTML instance
   * @param metadata - HTML metadata
   */
  constructor(metadata?: HTML.Metadata);
}

interface HTML.Metadata extends Node.Metadata {
  html?: string | HTMLElement | ((this: HTML) => string | HTMLElement);
  attrs?: {
    fo?: {
      width?: number;
      height?: number;
      [key: string]: any;
    };
    body?: {
      xmlns?: string;
      style?: string | { [key: string]: any };
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Usage Examples:

import { Shape } from "@antv/x6";

// HTML with string content
const htmlNode = new Shape.HTML({
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  html: `
    <div style="padding: 10px; background: white; border: 1px solid #ccc;">
      <h3>HTML Content</h3>
      <p>This is a custom HTML node.</p>
      <button onclick="alert('Clicked!')">Click me</button>
    </div>
  `
});

// HTML with function content
const dynamicHtmlNode = new Shape.HTML({
  html: function() {
    return `<div>Current time: ${new Date().toLocaleTimeString()}</div>`;
  }
});

// HTML with DOM element
const elementNode = new Shape.HTML({
  html: document.createElement('div')
});

TextBlock Shape

Rich text shape with advanced text layout and formatting capabilities.

/**
 * TextBlock shape class for rich text content
 */
class TextBlock extends Node {
  /**
   * Define a custom text block shape
   * @param config - TextBlock configuration
   * @returns Custom TextBlock class
   */
  static define(config?: Partial<Node.Config>): typeof TextBlock;
  
  /**
   * Create TextBlock instance
   * @param metadata - TextBlock metadata
   */
  constructor(metadata?: TextBlock.Metadata);
}

interface TextBlock.Metadata extends Node.Metadata {
  attrs?: {
    body?: {
      fill?: string;
      stroke?: string;
      strokeWidth?: number;
      [key: string]: any;
    };
    text?: {
      text?: string;
      fill?: string;
      fontSize?: number;
      fontFamily?: string;
      fontWeight?: string | number;
      textAnchor?: 'start' | 'middle' | 'end';
      textWrap?: {
        width?: number | string;
        height?: number | string;
        ellipsis?: boolean;
        breakWord?: boolean;
      };
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Path Shape

Custom SVG path shape for complex vector graphics.

/**
 * Path shape class for custom SVG paths
 */
class Path extends Node {
  /**
   * Define a custom path shape
   * @param config - Path configuration
   * @returns Custom Path class
   */
  static define(config?: Partial<Node.Config>): typeof Path;
  
  /**
   * Create Path instance
   * @param metadata - Path metadata
   */
  constructor(metadata?: Path.Metadata);
}

interface Path.Metadata extends Node.Metadata {
  attrs?: {
    body?: {
      fill?: string;
      stroke?: string;
      strokeWidth?: number;
      d?: string; // SVG path data
      refD?: string; // Relative path data
      [key: string]: any;
    };
    label?: {
      text?: string;
      fill?: string;
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

Usage Examples:

import { Shape } from "@antv/x6";

// Custom path shape
const pathNode = new Shape.Path({
  x: 100,
  y: 100,
  width: 80,
  height: 80,
  attrs: {
    body: {
      fill: 'lightgreen',
      stroke: 'green',
      d: 'M 0 10 L 10 0 L 20 10 L 10 20 Z' // Diamond shape
    },
    label: {
      text: 'Diamond',
      fill: 'black'
    }
  }
});

// Star shape using path
const starPath = 'M 50,5 L 61,35 L 98,35 L 68,57 L 79,91 L 50,70 L 21,91 L 32,57 L 2,35 L 39,35 Z';
const starNode = new Shape.Path({
  attrs: {
    body: {
      d: starPath,
      fill: 'gold',
      stroke: 'orange'
    }
  }
});

Edge Shape

Default edge shape with connection markup and styling capabilities.

/**
 * Default edge shape class
 */
class Edge extends Cell {
  /**
   * Define a custom edge shape
   * @param config - Edge configuration
   * @returns Custom Edge class
   */
  static define(config?: Partial<Edge.Config>): typeof Edge;
  
  /**
   * Create Edge instance
   * @param metadata - Edge metadata
   */
  constructor(metadata?: Edge.Metadata);
}

interface Edge.Config extends Cell.Config {
  router?: any;
  connector?: any;
  labels?: Edge.Label[];
  defaultLabel?: Edge.Label;
}

interface Edge.Metadata extends Cell.Metadata {
  attrs?: {
    line?: {
      stroke?: string;
      strokeWidth?: number;
      strokeDasharray?: string;
      targetMarker?: string | MarkerDefinition;
      sourceMarker?: string | MarkerDefinition;
      [key: string]: any;
    };
    wrap?: {
      [key: string]: any;
    };
    [selector: string]: any;
  };
}

interface MarkerDefinition {
  name: string;
  width?: number;
  height?: number;
  offset?: number;
  [key: string]: any;
}

Usage Examples:

import { Shape } from "@antv/x6";

// Basic edge
const edge = new Shape.Edge({
  source: 'node1',
  target: 'node2',
  attrs: {
    line: {
      stroke: 'blue',
      strokeWidth: 2,
      targetMarker: 'classic'
    }
  }
});

// Custom edge with styling
const styledEdge = new Shape.Edge({
  attrs: {
    line: {
      stroke: '#ff6b6b',
      strokeWidth: 3,
      strokeDasharray: '5 5',
      targetMarker: {
        name: 'block',
        width: 12,
        height: 8
      },
      sourceMarker: {
        name: 'circle',
        r: 4
      }
    }
  }
});

Custom Shape Creation

Utilities and patterns for creating entirely custom shapes.

/**
 * Create a custom shape by extending base classes
 * @param BaseClass - Base shape class to extend
 * @param config - Shape configuration
 * @returns Custom shape class
 */
function createCustomShape<T extends typeof Node>(
  BaseClass: T,
  config: Partial<Node.Config>
): T;

/**
 * Shape creation utility function
 * @param shape - Base shape name
 * @param config - Configuration object
 * @param options - Creation options
 * @returns Shape constructor
 */
function createShape(
  shape: string,
  config: Node.Config,
  options?: {
    selector?: string;
    parent?: Node.Definition | typeof Node;
  }
): typeof Node;

// Shape configuration interfaces
interface ShapeConfig extends Node.Config {
  // Markup definition
  markup?: Markup | string;
  
  // Default attributes
  attrs?: CellAttrs;
  
  // Property hooks for custom behavior
  propHooks?: Array<{
    name: string;
    handler: (this: Node, metadata: any) => any;
  }>;
  
  // Attribute hooks for custom rendering
  attrHooks?: Array<{
    name: string;
    handler: (this: CellView, value: any, attrs: any) => void;
  }>;
}

Usage Examples:

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

// Create custom shape by extending existing shape
const CustomRect = Shape.Rect.define({
  attrs: {
    body: {
      fill: 'rgba(255, 255, 255, 0.8)',
      stroke: '#31d0c6',
      strokeWidth: 2,
      rx: 10,
      ry: 10
    },
    label: {
      fill: '#333',
      fontSize: 14,
      fontWeight: 'bold'
    }
  }
});

// Register the custom shape
Graph.registerNode('custom-rect', CustomRect);

// Create custom shape with markup
const CustomShape = Node.define({
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    {
      tagName: 'circle',
      selector: 'icon'
    },
    {
      tagName: 'text',
      selector: 'label'
    }
  ],
  attrs: {
    body: {
      fill: 'white',
      stroke: '#8f8f8f',
      strokeWidth: 1
    },
    icon: {
      r: 8,
      fill: '#fe854f',
      cx: 16,
      cy: 16
    },
    label: {
      fontSize: 12,
      fill: '#333',
      refX: 32,
      refY: 16,
      textAnchor: 'start',
      textVerticalAnchor: 'middle'
    }
  }
});

Graph.registerNode('custom-shape', CustomShape);

// Use the custom shapes
const customNode = new CustomRect({
  x: 100,
  y: 100,
  width: 100,
  height: 50,
  label: 'Custom Rectangle'
});

const anotherCustomNode = graph.addNode({
  shape: 'custom-shape',
  x: 250,
  y: 100,
  width: 120,
  height: 32,
  label: 'Custom Shape'
});

Types

// Markup definition types
type Markup = 
  | string 
  | Markup.JSONMarkup 
  | (string | Markup.JSONMarkup)[];

namespace Markup {
  interface JSONMarkup {
    tagName: string;
    selector?: string;
    groupSelector?: string | string[];
    namespaceURI?: string;
    attributes?: { [key: string]: any };
    style?: { [key: string]: any };
    className?: string | string[];
    children?: (string | JSONMarkup)[];
    textContent?: string;
  }
}

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

// Shape configuration types
interface Node.Config {
  constructorName?: string;
  overwrite?: boolean;
  inherit?: string | Node.Definition;
  markup?: Markup;
  attrs?: CellAttrs;
  propHooks?: Node.PropHook[];
  attrHooks?: Node.AttrHook[];
  data?: KeyValue;
  [key: string]: any;
}

interface Node.PropHook {
  name: string;
  handler: (this: Node, metadata: any) => any;
}

interface Node.AttrHook {
  name: string;
  handler: (this: CellView, value: any, attrs: any) => void;
}

interface Node.Definition {
  constructorName: string;
  defaults: Node.Config;
  markup: Markup;
}

// Shape-specific metadata interfaces
interface Circle.Metadata extends Node.Metadata {
  attrs?: {
    body?: CircleAttrs;
    label?: TextAttrs;
    [key: string]: any;
  };
}

interface CircleAttrs {
  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  r?: number;
  cx?: number;
  cy?: number;
  [key: string]: any;
}

interface TextAttrs {
  text?: string;
  fill?: string;
  fontSize?: number;
  fontFamily?: string;
  fontWeight?: string | number;
  textAnchor?: 'start' | 'middle' | 'end';
  textVerticalAnchor?: 'top' | 'middle' | 'bottom';
  [key: string]: any;
}

// HTML shape types
interface HTML.Metadata extends Node.Metadata {
  html?: string | HTMLElement | ((this: HTML) => string | HTMLElement);
}

// Path shape types
interface Path.Metadata extends Node.Metadata {
  attrs?: {
    body?: PathAttrs;
    [key: string]: any;
  };
}

interface PathAttrs {
  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  d?: string;
  refD?: string;
  [key: string]: any;
}

// Utility types
interface KeyValue {
  [key: string]: any;
}

Version

Tile

Files

shapes.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Shape System

Capabilities

Shape Registration

Rectangle Shape

Circle Shape

Ellipse Shape

Polygon Shape

Polyline Shape

Image Shape

HTML Shape

TextBlock Shape

Path Shape

Edge Shape

Custom Shape Creation

Types

shapes.mddocs/