JS で Draw.io ちっくなダイアグラムを描く。LogicFlow.js を使ってみた
Draw.io 的なダイアグラムを JS で描ける「LogicFlow.js」というライブラリがあったので使ってみた。
npm パッケージとして必要なモノをインストールして、SPA などに合わせてバインディングも出来るが、今回は CDN で JS と CSS を読み込んで、Vanilla なページで動かしてみた。
- デモ : Practice Logic Flow
- コード : frontend-sandboxes/practice-logic-flow/index.html at master · Neos21/frontend-sandboxes
デモページに簡単なダイアグラムを置いているが、コレは要素をドラッグして位置を移動したり、ラベルを書き換えたりできる。
この情報は全て JSON (JS 内では連想配列) でデータを保持しており、GUI で操作した内容を JSON 形式で出力すればエクスポートも出来るし、その JSON ファイルを input[type="file"] などで読み込ませてレンダリングすればインポートも可能である。
// レンダリングを開始するコード : lf.render() に渡す JSON さえ差し替えればインポートも実現できる
const lf = new Core.default({ ... });
lf.render(data);
// GUI 上のダイアグラムを JSON 形式で取得するコード : コレを JSON ファイルとして保存すればエクスポートも実現できる
const data = lf.getGraphData();
const jsonStr = JSON.stringify(data, null, 2);
お手軽で便利！
