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().

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

<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.