とあるものが必要なきがしてので、どのように作るのがいいか検討していた。
GUIが欲しかったので
表が得意そうなライブラリが豊富なjavascriptで書くことにして、
javascriptで書くのがつらそうなコアのバックグラウンド処理は
webassemblyとか使おうかなという方針になった。
まずはライブラリを探していた。
作図系ツール・ライブラリまとめ · GitHub
10+ JavaScript libraries to draw your own diagrams (2019 edition)
自分のイメージするGUI操作感からすると、シーケンス図やフローチャート、ブロックダイアグラムといった類
最終的に操作感がよさそうなのとデモの完成度に惹かれて以下のライブラリを使うことにした。
github.com
これ自体は描写部分のシンプルなライブラリで、
描写をもっと拡張したり、オリジナルの要素を追加したいときは
ライブラリのクラス(クラスのようなもの)を継承して実装する。
例として以下のbpmn-jsがdiagram-jsを利用したツール
demo.bpmn.io
この要素をクリックした右上にContextPadPaletteがあるのがとてもよい。
公式にはdiagram-jsじゃなくてbpmn-jsを使うことを推している気がするが
Walkthrough | bpmn.io
bpmn-jsには
ライセンスが独自でめんどくさい。
読む限りは、基本的に？ロゴを右下に表示しておけばいいきがするが。。
また、bpnm-jsのGUIがすこしだけ自分のイメージとは違うので
diagram-jsから拡張していくことにした。
