Cytoscape.jsで表からデータフロー図を描く

この記事でやったこと

ネットワークグラフを描くJSライブラリ(Cytoscape.js)を使って、データやプロセスの繋がりが記述された表からデータフロー図を描いてみた。

背景

前々からデータフローのような意味が明確なもの（このプロセスのインプットはこれでアウトプットはこれ、このデータはこことここに流れる、etc.）をExcelで図にすることで、内部的には本来の意味が死んでしまい、図形と線と図形の繋がりでしか無くなってしまうことが嫌だった。
PlantUML(DFD無いけど...)みたいな仕組みも根本的には同じ問題を抱えており、結局のところ要素Aと要素Bが繋がっているという情報をテキストで持つのか図形の配置で持つのかというだけの違いに過ぎない。あと、たぶんExcelの方が長文コメント書けたりして表現力が高い。

仕事で大きめのシステム群のデータフローを起こすことになってExcelで作業を始めたものの、以下のようなことがあって嫌になってしまった。

データフローが多いので線がごちゃごちゃになって見にくい
現段階では確定情報ではないものが多く、変更が発生した場合にせっかく見やすく整えた図形の配置とか線の曲がり具合とかが台無しになる可能性が高い
量が多いので絶対どこかで線繋ぐ先ミスる
相当頑張ったところで結局何がどこに繋がっているのかいまいち見にくい図で終わる気がした
より明確に定義を記述した表との二重管理になる

そこで、ゴールデンウィークの宿題として、表からデータフロー図を自動で描いてくれる仕組みを作ってみることにした。

要件

仕事での使いやすさを考え、以下のような要件を想定した。

データやプロセスを記述した表からデータフロー図を作れる
図中の各要素について補足コメントが書ける
図中の各要素に色を付けられる
データやプロセスのまとまりを示すことができる（例：データAとデータBがシステムAに属することが図で表現できる）
データベース、帳票、外的要素、プロセスを図形の違いで描き分けることができる
単一のファイルとしてクライアント等に共有でき、共有先で特殊なアプリケーションをインストールすることなく内容が確認できる
→Office系や画像を除くとたぶんHTML一択

やったこと

技術選定

候補となるライブラリについて、ここがよくまとまっていた。 qiita.com

この中から，実装のしやすさに惹かれてvis.jsを試したが機能が足りなかった。機能の豊富さと拡張性を見てCytoscape.jsを試したところ上手く行きそうだったのでこれを採用した。

要件との対応はこんな感じ

要件	vis.js	Cytoscape.js
データやプロセスを記述した表からデータフロー図を作れる	○	○
図中の各要素について補足コメントが書ける	？	△(拡張機能)
図中の各要素に色を付けられる	○	○
データやプロセスのまとまりを示すことができる（例：データAとデータBがシステムAに属することが図で表現できる）	×	○
データベース、帳票、外的要素、プロセスを図形の違いで描き分けることができる	○	○
単一のファイルとしてクライアント等に共有でき、共有先で特殊なアプリケーションをインストールすることなく内容が確認できる	○	○