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

// ❌ WRONG — graph.render() is G6 API, not X6const graph = new Graph({ container: 'container' });graph.render();
// ✅ CORRECT — X6 auto-renders on addNode/addEdge/fromJSONconst graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });graph.addNode({ shape: 'rect', x: 40, y: 40, width: 100, height: 40 });

// ❌ WRONG — declaring container variable is forbiddenconst container = document.getElementById('container');const graph = new Graph({ container });
// ✅ CORRECT — string literal, runtime auto-resolvesconst graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });

// ❌ WRONG — calling plugin method without registrationgraph.toPNG();       // Error: method not foundgraph.select();      // Error: method not found
// ✅ CORRECT — register first, then callimport { 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

// ❌ 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 optionimport { 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 }));

// ❌ WRONG — Selection used but not importedimport { Graph } from '@antv/x6';graph.use(new Selection({...}));  // falls back to window.Selection → Illegal constructor
// ✅ CORRECT — every used class importedimport { 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 }));

// ❌ WRONG — no centerContent, content drifts to top-leftgraph.addNode({ ... });graph.addEdge({ ... });
// ✅ CORRECT — content centered after all additionsgraph.addNode({ ... });graph.addEdge({ ... });graph.centerContent();// OR: graph.zoomToFit({ padding: 20, maxScale: 1 }) — but NOT both

// ❌ WRONG — no background, no default stylesconst graph = new Graph({ container: 'container' });
// ✅ CORRECT — mandatory background + default stylesconst 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 } },});

// ❌ WRONG — panning and mousewheel both grab scroll eventsconst graph = new Graph({  panning: { enabled: true },  mousewheel: { enabled: true },});graph.use(new Selection({ enabled: true, rubberband: true }));
// ✅ CORRECT — modifiers separate the interactionsconst 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 }));

// ❌ WRONG — TypeScript syntaxprivate width: number = 100;const node: Node = graph.addNode({...}) as Node;
// ✅ CORRECT — pure JavaScript onlyconst node = graph.addNode({ shape: 'rect', x: 40, y: 40 });

// ❌ 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;  },});