Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。

electron-vizの使い方

electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。

例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。

二つに分かれるサンプル。

さらに複雑なチャート。

クラス図風。

electron-vizを使えばエディタとビューワーが一体型になっているので作成しながらその結果を素早く確認できます。念入りに作った挙げ句、思った表示と違ったという悲劇は避けられるでしょう。

electron-vizはElectron/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Kazunori-Kimura/electron-viz: electron で作成した graphviz のビューア/エディタ。