antv-x6-editor

X6 v3 グラフエディター

概要

X6 v3 は、フローチャート、DAG、ER 図、組織図、その他のインタラクティブなノード・エッジエディター向けの AntV のダイアグラム編集エンジンです。G2/G6 とは異なり、X6 は 命令型 API を使用します。Graph インスタンスを作成し、graph.addNode() や graph.addEdge() を呼び出して、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 の使用

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

コンテンツ取得サービス

データ可視化に AntV X6 を使用する際、X6 v3 の概念、使い方、API、例などについて知りたい場合は、提供されているコンテキスト取得サービスを利用できます。このスキルを使用すると、GET リクエストによって antv HTTP API サーバーからコンテンツが取得されます。

• ホスト：https://sive.antv.antgroup.com
• エンドポイント：/api/v1/context/retrieve
• メソッド：GET
• パラメーター：query、library、topK、content、maxTokens

クエリでスキルを取得します（ハイブリッド検索 = FTS + ベクトル + RRF 融合）。制約に関するドキュメントも通常のスキルドキュメントとしてインデックス化され、検索結果に自然に表示されます。

パラメーター	型	必須	説明
query	string	✅	検索キーワード。例：flowchart stencil port
library	string	✅	ライブラリ名：g2、g6、x6
topK	number		返す結果の件数（デフォルト：5）
content	boolean		リファレンスドキュメントの Markdown 全文を返すかどうか（デフォルト：true）
maxTokens	number		結果ごとの最大トークン数（デフォルト：無制限）

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

重要なルール

必須：X6 v3 に graph.render() は存在しません

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

必須：変数宣言は使わず、文字列リテラル container: 'container' を使用してください

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

必須：存在するプラグインクラスは 11 種類のみです。コンストラクターオプションは含まれません

✅ プラグインクラス（インポートして graph.use）	❌ プラグインではありません（コンストラクターオプション）
Clipboard、Dnd、Export、History、Keyboard、MiniMap、Scroller、Selection、Snapline、Stencil、Transform	mousewheel、embedding、panning、connecting、translating、interacting、background、grid

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

必須：ノードやエッジを追加した後は、必ず graph.centerContent() を呼び出してください

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

必須：mousewheel、panning、Selection.rubberband では、競合を避けるために修飾キーを使用してください

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

必須：出力は純粋な JavaScript にしてください。TypeScript 構文は使用しないでください

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

必須：HTML ノードには class extends Node ではなく、Shape.HTML.register を使用してください

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

クイックリファレンス

ユーザーの目的	取得クエリ
グラフの初期化、コンテナ、背景	GET /api/v1/context/retrieve?query=graph+init+container+background&library=x6
フローチャート / 承認フロー	GET /api/v1/context/retrieve?query=flowchart+approval&library=x6
DAG / データパイプライン	GET /api/v1/context/retrieve?query=DAG+pipeline+port&library=x6
ER 図 / エンティティ関連	GET /api/v1/context/retrieve?query=ER+diagram+entity+relationship&library=x6
リネージ / データリネージグラフ	GET /api/v1/context/retrieve?query=lineage+data+lineage&library=x6
組織図 / 階層	GET /api/v1/context/retrieve?query=org+chart+hierarchy&library=x6
UML クラス図	GET /api/v1/context/retrieve?query=UML+class+diagram&library=x6
ノード設定 / カスタムノード	GET /api/v1/context/retrieve?query=node+custom+shape+rect+circle&library=x6
エッジ設定 / ルーター / コネクタ	GET /api/v1/context/retrieve?query=edge+router+connector+orth+smooth&library=x6
ポート / 接続	GET /api/v1/context/retrieve?query=ports+connection+layout&library=x6
HTML シェイプノード	GET /api/v1/context/retrieve?query=html+shape+register&library=x6
ステンシル / ドラッグ&ドロップパネル	GET /api/v1/context/retrieve?query=stencil+drag+drop+panel&library=x6
プラグイン: Selection、History、Clipboard	GET /api/v1/context/retrieve?query=Selection+History+Clipboard+plugin&library=x6
プラグイン: MiniMap、Scroller、Snapline	GET /api/v1/context/retrieve?query=MiniMap+Scroller+Snapline+plugin&library=x6
プラグイン: Keyboard、Export、Transform	GET /api/v1/context/retrieve?query=Keyboard+Export+Transform+plugin&library=x6
パン操作 / マウスホイール / 埋め込み	GET /api/v1/context/retrieve?query=panning+mousewheel+embedding&library=x6
ツール (button-remove など)	GET /api/v1/context/retrieve?query=tools+button-remove+hover&library=x6
イベント (click、mouseenter、moved)	GET /api/v1/context/retrieve?query=events+node+click+mouse&library=x6
シリアライゼーション (toJSON、fromJSON)	GET /api/v1/context/retrieve?query=serialization+toJSON+fromJSON&library=x6
アニメーション / グラデーション	GET /api/v1/context/retrieve?query=animation+gradient+defs+marker&library=x6
グループ / ネスト / 埋め込み	GET /api/v1/context/retrieve?query=group+nesting+embedding+parent+child&library=x6

依存関係

• @antv/x6 — X6 v3 ダイアグラム編集エンジン (Graph と 11 個のプラグインクラスをエクスポート)