X6 - Web上にSVG出力するドローライブラリ
Web上で図を描きたいと思うことはよくあります。しかし使い勝手の良いものがないので、ドローツールやプレゼンツールで作ってしまいます。しかし画像なので後で編集するのが面倒だったりします。 そこで使ってみたいのがX6です。アニメーションまでサポートしたドローライブラリです。
X6の使い方
こんな感じのドローが簡単にできます。
コードの抜粋です。
const data = {
// 节点
nodes: [
{
id: 'node1',
x: 40,
y: 40,
width: 80,
height: 40,
label: 'Hello',
},
{
id: 'node2',
x: 160,
y: 180,
width: 80,
height: 40,
label: 'World',
},
],
// 边
edges: [
{
source: 'node1',
target: 'node2',
},
],
}
const graph = new Graph({
container: this.container,
})
graph.fromJSON(data);
マウスでドラッグできます。
グリッドを付けて、それに合わせて移動させることも。
少し複雑にした例。線の上に説明を付けています。
アニメーションさせる例。説明なども移動しています。
こちらもアニメーションさせています。テキストの位置が自動的に書き換わります。
バツアイコンをクリックすればノードが消えます。
マウスドラッグでノード同士を結びつけます。
X6は指定したオブジェクトをSVGで書き出します。そのため、JavaScriptとの連携もしやすくなっています。アニメーションやマウスなどとの連携も可能で、インタラクティブなドローが可能です。
X6はTypeScript製のオープンソース・ソフトウェア(MIT License)です。
X6 图编辑引擎 | AntV antvis/X6: ? JavaScript diagramming library that uses SVG and HTML for rendering.