antv-x6-editor

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

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

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

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

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

// ❌ 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

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

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

// ❌ 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

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

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

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

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