基礎編 mxGraphとは

記事作成日: 2020-12-13

mxGraphは、インタラクティブなグラフおよびグラフ作成アプリケーションをすばやく作成できるようにするJavaScriptダイアグラム(ドローツール)作成ライブラリです。

ホームページ

• mxGraph 4.2.2(ドキュメント)
• JGraph · GitHub

ライセンス

Apache License 2.0

本記事はmxGraphのバージョン4.2.2の情報に基づいて書かれています。

インストール

以下のページからダウンロードできます。

GitHub - jgraph/mxgraph

npmパッケージマネージャーからも利用できます。

npm install mxgraph --save

ライブラリのロード

<script type="text/javascript">
    mxBasePath = '../src';
</script>
<script type="text/javascript" src="../src/js/mxClient.js"></script>

mxBasePath

css、images、resources、jsディレクトリが置いてあるpathを定義するJavaScript変数です。mxClient.jsをロードする行の前に配置する必要があります。

作成するWebアプリの１つ上の階層にmxGraphのsrc以下をコピーして配置しました。

mxgraph-master/javascript/src

mxClient.js

mxGraphライブラリへのパスです。mxGraphライブラリは8つのパッケージに分かれていて、トップレベルのmxClientクラスには、他のすべてが含まれます（または動的にインポートされます）。