antvis/X6

これは何？

主な機能

• 01SVGとHTMLでノードやエッジを描画します。
• 02SVG、HTML、React、Vue、Angularを使って、ノードのスタイルやインタラクションをカスタマイズできます。
• 03範囲選択、整列ガイド、ミニマップなどの拡張機能を標準で備えています。
• 04包括的なイベントシステムを備えた、データ駆動型のMVCアーキテクチャを採用しています。
• 05サーバーサイドレンダリングに対応しています。

ユースケース

• WebアプリケーションでDAGエディターやワークフローエディターを構築する。
• ER図を作成するツールを開発する。
• フローチャートやリネージグラフを可視化する。
• React、Vue、Angularのフロントエンドにインタラクティブな図表機能を追加する。

クイックスタート

1. 1

   npmでパッケージをインストールする

   npm install @antv/x6 --save
2. 2

   Graphをインポートし、コンテナ要素にグラフを作成する

3. 3

   グラフにノードとエッジを追加する

収録されている特集

トピック

よくある質問

X6 とは？

DAG、ER図、フローチャート、リネージ図の作成に使える、SVGとHTMLベースのTypeScript/JavaScript製グラフ編集・可視化エンジンです。 AntV X6は、SVGとHTMLでノードやエッジを描画するTypeScript製のグラフ編集エンジンです。DAG図、ER図、フローチャート、リネージグラフなどのインタラクティブな図表アプリケーションを、ゼロから作ることなく構築できます。

X6 は無料で使えますか？ライセンスは？

X6 は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

X6 は今もメンテナンスされていますか？

活発にメンテナンス中。X6 の最終コミットは 2026年10月23日 です。

X6 は何に使えますか？

WebアプリケーションでDAGエディターやワークフローエディターを構築する。 ER図を作成するツールを開発する。 フローチャートやリネージグラフを可視化する。 React、Vue、Angularのフロントエンドにインタラクティブな図表機能を追加する。

X6 のインストール方法は？

npmでパッケージをインストールする: npm install @antv/x6 --save Graphをインポートし、コンテナ要素にグラフを作成する グラフにノードとエッジを追加する

X6 はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/antvis/X6