プログラムからフローチャートや樹形図を作成するのに便利な Graphviz．作成するグラフが複雑になってくると，ノード間の関係を目で追うのが難しくなってきます．そこで，Graphviz 用の DOT ファイルから，jQuery を使った少しインタラクティブなグラフを作成するツール，graphact を作成しました．
概要
graphact を使うと次のようなグラフが生成されます．
[入力ファイル]
ノードをダブルクリックするとそのノードに関連するノードが着色されます．(ブラウザが古い場合は正常に表示できません)
ファイルの形式は単独の HTML ファイルですので，Word 等のドキュメントファイルと同じように扱えます．
必要なもの
- Graphviz
- 内部的に SVG 形式のグラフを生成するために Graphviz に含まれる
dotコマンドを使用します． - Ruby
- HTML ファイルを生成するために Ruby を使用します．追加のライブラリは不要です．
- GNU Make
- HTML ファイルを生成するために GNU Make を使用します．
使い方
使い方は簡単です．dot ファイルを graphact のディレクトリに入れたあと，make コマンドを実行するたけです．
- graphact をダウンロード．
1% git clone https://github.com/kimata/graphact.git - dot ファイルを graphact のディレクトリに作成．ここではファイル名を
test.dotとします．
123% cd graphact% emacs test.dot makeコマンドを実行して HTML ファイルを生成します．makeコマンドの引数は，dot ファイルの拡張子を「htm」に換えたものにします．
1% make test.htm
技術解説
内部的にやっていることはシンプルで，dotコマンドによってグラフを SVG 形式で生成し，jQuery で SVG を操作するコードと結合しているだけです．
仕組みはシンプルなので，機能を追加するのも簡単です．コードは js/graphact.js にあります．
コメント