Antv X6 Editor

X6 v3 Graph Editor

Overview

X6 v3 is AntV's diagram editing engine for flowcharts, DAGs, ER diagrams, org charts, and other interactive node-edge editors. Unlike G2/G6, X6 uses an imperative API — you create a Graph instance, then call graph.addNode(), graph.addEdge(), and register plugins via graph.use().

javascriptCopy code
import { Graph } from '@antv/x6';

const graph = new Graph({
  container: 'container',
  background: { color: '#F2F7FA' },
});

const source = graph.addNode({
  shape: 'rect',
  x: 40, y: 40, width: 100, height: 40,
  label: 'Source',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});

const target = graph.addNode({
  shape: 'rect',
  x: 300, y: 200, width: 100, height: 40,
  label: 'Target',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});

graph.addEdge({ source, target, attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } } });
graph.centerContent();

CDN Usage

htmlCopy code
<script src="https://unpkg.com/@antv/x6@3/dist/x6.js"></script>
<script>
  const graph = new X6.Graph({
    container: 'container',
    background: { color: '#F2F7FA' },
  });
  const source = graph.addNode({
    shape: 'rect',
    x: 40, y: 40, width: 100, height: 40,
    label: 'Source',
    attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
  });
  const target = graph.addNode({
    shape: 'rect',
    x: 300, y: 200, width: 100, height: 40,
    label: 'Target',
    attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
  });
  graph.addEdge({ source, target, attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } } });
  graph.centerContent();
</script>

Content Retrieval Service

When using AntV X6 for data visualization, if you need to understand the concepts, usage, API, examples, and other aspects of X6 v3, you can use the provided context retrieval service. When using the skill, content is retrieved via an antv HTTP API server using GET requests.

• Host: https://sive.antv.antgroup.com
• Endpoint: /api/v1/context/retrieve
• Method: GET
• Parameters: query, library, topK, content, maxTokens

Retrieve skills by query (hybrid search = FTS + vector + RRF fusion). Constraints docs are indexed as regular skill documents and will appear in search results naturally.

bashCopy code
curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=flowchart+stencil+port&library=x6"

Critical Rules

MUST: graph.render() does NOT exist in X6 v3

javascriptCopy code
// ❌ WRONG — graph.render() is G6 API, not X6
const graph = new Graph({ container: 'container' });
graph.render();

// ✅ CORRECT — X6 auto-renders on addNode/addEdge/fromJSON
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.addNode({ shape: 'rect', x: 40, y: 40, width: 100, height: 40 });

MUST: Use string literal container: 'container' — no variable declaration

javascriptCopy code
// ❌ WRONG — declaring container variable is forbidden
const container = document.getElementById('container');
const graph = new Graph({ container });

// ✅ CORRECT — string literal, runtime auto-resolves
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });

MUST: Register plugins before using their methods

javascriptCopy code
// ❌ WRONG — calling plugin method without registration
graph.toPNG();       // Error: method not found
graph.select();      // Error: method not found

// ✅ CORRECT — register first, then call
import { Graph, Export, Selection } from '@antv/x6';
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.use(new Export());
graph.use(new Selection({ enabled: true, rubberband: true }));
// Now graph.toPNG() and graph.select() are available

MUST: Only 11 plugin classes exist — NOT constructor options

javascriptCopy code
// ❌ WRONG — importing constructor option as "plugin"
import { Graph, Embedding } from '@antv/x6';  // Embedding doesn't exist!
graph.use(new Embedding());                   // Error: not a constructor

// ✅ CORRECT — embedding is a Graph constructor option
import { Graph, Selection } from '@antv/x6';
const graph = new Graph({
  container: 'container',
  embedding: { enabled: true, findParent: 'bbox' },
  mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl'] },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

MUST: All used classes MUST appear in import statement

javascriptCopy code
// ❌ WRONG — Selection used but not imported
import { Graph } from '@antv/x6';
graph.use(new Selection({...}));  // falls back to window.Selection → Illegal constructor

// ✅ CORRECT — every used class imported
import { Graph, Selection, Keyboard, History } from '@antv/x6';
graph.use(new Selection({ enabled: true, rubberband: true }));
graph.use(new Keyboard({ enabled: true }));
graph.use(new History({ enabled: true }));

MUST: Always call graph.centerContent() after adding nodes/edges

javascriptCopy code
// ❌ WRONG — no centerContent, content drifts to top-left
graph.addNode({ ... });
graph.addEdge({ ... });

// ✅ CORRECT — content centered after all additions
graph.addNode({ ... });
graph.addEdge({ ... });
graph.centerContent();
// OR: graph.zoomToFit({ padding: 20, maxScale: 1 }) — but NOT both

MUST: Always set background color, default node/edge style

javascriptCopy code
// ❌ WRONG — no background, no default styles
const graph = new Graph({ container: 'container' });

// ✅ CORRECT — mandatory background + default styles
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.addNode({
  shape: 'rect', x: 40, y: 40, width: 100, height: 40,
  label: 'Node',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});
graph.addEdge({
  source: 'node-1', target: 'node-2',
  attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } },
});

MUST: mousewheel, panning, Selection.rubberband — use modifiers to avoid conflicts

javascriptCopy code
// ❌ WRONG — panning and mousewheel both grab scroll events
const graph = new Graph({
  panning: { enabled: true },
  mousewheel: { enabled: true },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

// ✅ CORRECT — modifiers separate the interactions
const graph = new Graph({
  panning: { enabled: true, eventTypes: ['leftMouseDown'], modifiers: 'shift' },
  mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl'] },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

MUST: Output pure JavaScript — NO TypeScript syntax

javascriptCopy code
// ❌ WRONG — TypeScript syntax
private width: number = 100;
const node: Node = graph.addNode({...}) as Node;

// ✅ CORRECT — pure JavaScript only
const node = graph.addNode({ shape: 'rect', x: 40, y: 40 });

MUST: Shape.HTML.register for HTML nodes — NOT class extends Node

javascriptCopy code
// ❌ WRONG — class-based HTML node (2.x pattern)
class MyNode extends Node { ... }

// ✅ CORRECT — Shape.HTML.register (3.x pattern)
import { Graph, Shape } from '@antv/x6';
Shape.HTML.register({
  shape: 'my-html',
  effect: ['data'],
  html(node) {
    const div = document.createElement('div');
    div.innerHTML = node.getData().content || '';
    return div;
  },
});

Quick Reference

Dependencies

• @antv/x6 — X6 v3 diagram editing engine (exports Graph + 11 plugin classes)