DOT言語でフローチャート作成ツール「DotFlow」

仕事で開発を行っていると、必ず通るのが「ドキュメント作業」 中でも、フローチャートは、テキストファイルだけでは書ききれなく、 cacooのようなサービスや、Excelのように、力技で書き込むパターンが多いと 思いますが、「Dot言語」というフローチャートを書く為だけの言語が 存在するのをご存知だろうか？

フローチャートの基本

プログラムの進行状況や関数の遷移などを、見た目で分かるように作るというのがポイントで いわゆる、他人が見てわかるようにするための資料なのですが、はっきり言ってプログラムがわからない人が見ても絶対にわからないので、果たしてこの「フロー図」というものの存在意義も疑わしいのですが、商品を買ったら必ずついてくる説明書と同じ理由で、作成することを前提に考えよう。 ・・・あれ？iphoneの説明書・・・

DotFlowの概要

フロー図を記述するのですが、今のところ、excelのように、画像をオブジェクト化して、画面のGUIが設置している方式ではなく、プログラムで記述するというのがポイントで、文字列のみでフロー図を作成します。 ただし、プレビュー機能があるので、書き込みをしながら確認できるという点がポイントです。 dot言語はgraphvizというモジュールの一部で、コマンドを叩けば、画像ファイルに勝手に変換してくれるんですが、実行するまでわからないという点をツール化したという事です。 あと、最終的にFIXしたフロー図は、画像ファイルで保存できるという分けです。

Dot言語について

wikipedia http://ja.wikipedia.org/wiki/DOT言語 サイトを見てもらえるとなんとなくわかると思いますが、 簡単に書くと graph graphname { a -- b -- c; b -- d; } こんな感じで記入すると、 こんなフローが作れます。 細かくデザインや色々なパターンが作れるので、言語は深く知っておいて損はないですね。

コマンドラインサンプル

下記コマンドでsample.pngがファイル出力されます。 # sample.dot graph{a--b;} #コマンド実行 $ dot -T png sa,ple.dot -o sample.png

Option

-V - Print version and exit -v - Enable verbose mode -Gname=val - Set graph attribute 'name' to 'val' -Nname=val - Set node attribute 'name' to 'val' -Ename=val - Set edge attribute 'name' to 'val' -Tv - Set output format to 'v' -Kv - Set layout engine to 'v' (overrides default based on command name) -lv - Use external library 'v' -ofile - Write output to 'file' -O - Automatically generate an output filename based on the input filename with a .'format' appended. (Causes all -ofile options to be ignored.) -P - Internally generate a graph of the current plugins. -q[l] - Set level of message suppression (=1) -s[v] - Scale input by 'v' (=72) -y - Invert y coordinate in output -n[v] - No layout mode 'v' (=1) -x - Reduce graph -Lg - Don't use grid -LO - Use old attractive force -Ln<i> - Set number of iterations to i -LU<i> - Set unscaled factor to i -LC<v> - Set overlap expansion factor to v -LT[*]<v> - Set temperature (temperature factor) to v -m - Memory test (Observe no growth with top. Kill when done.) -m[v] - Memory test - v iterations. -c - Configure plugins (Writes $prefix/lib/graphviz/config with available plugin information. Needs write privilege.) -? - Print usage and exit

参考サイト

http://stabucky.com/wp/archives/4191 http://homepage3.nifty.com/kaku-chan/graphviz/index.html

ツールを作ってみる

DOT言語を記入していてリアルタイムにフロー図が表示されるのがポイントです。 GitHubにアップしておきました。 https://github.com/yugeta/dotflow/blob/master/README.md cloneして、サーバーにインストールして使ってください。

簡単インストール方法

git cloneした後の工程です。 1.サーバーにdotモジュールをインストールします。 # Linux-Debian系 $ apt-get install graphviz # Linux-Cent系 $ yum install graphviz # Mac $ brew install graphviz 2.plugins/dotflow/php.module/dotflow.php 9行目の箇所をdotモジュールが置かれているpathに書き換えてください。 ※macの場合は、このままでOKです。 public $dot = "/usr/local/bin/dot"; debianの場合は「/usr/bin/dot」でした。 これでアクセスすれば、もう使えます。

要望機能

1.記述したDot言語は、端末別に保持してますが、端末単体で、複数のDOT言語プログラムを保持できないので、名前をつけてソース保存できる機能があると、後々のフローの拡張などが便利に行えますね。 2.複数のフロー図をつなげる機能があると、サービスレベルの大きなフローの場合に便利に使えます。 3.カラーなどを自動で振り分けてくれるようなデザイン機能があるといいですね。 4.GUIとしても重要なので、テンプレート機能も含めてDOT言語言語を勉強しなくても作れるようにしないといけません。