Rabbit Note

技術的な事柄をメモしていきます.

graphact: Graphviz のグラフを jQuery でインタラクティブに

プログラムからフローチャートや樹形図を作成するのに便利な Graphviz.作成するグラフが複雑になってくると,ノード間の関係を目で追うのが難しくなってきます.そこで,Graphviz 用の DOT ファイルから,jQuery を使った少しインタラクティブなグラフを作成するツール,graphact を作成しました.

概要

graphact を使うと次のようなグラフが生成されます.


[入力ファイル]

ノードをダブルクリックするとそのノードに関連するノードが着色されます.(ブラウザが古い場合は正常に表示できません)

ファイルの形式は単独の HTML ファイルですので,Word 等のドキュメントファイルと同じように扱えます.

必要なもの

Graphviz
内部的に SVG 形式のグラフを生成するために Graphviz に含まれる dot コマンドを使用します.
Ruby
HTML ファイルを生成するために Ruby を使用します.追加のライブラリは不要です.
GNU Make
HTML ファイルを生成するために GNU Make を使用します.

使い方

使い方は簡単です.dot ファイルを graphact のディレクトリに入れたあと, make コマンドを実行するたけです.

  1. graphact をダウンロード.
  2. dot ファイルを graphact のディレクトリに作成.ここではファイル名を test.dot とします.
  3. makeコマンドを実行して HTML ファイルを生成します. make コマンドの引数は,dot ファイルの拡張子を「htm」に換えたものにします.

技術解説

内部的にやっていることはシンプルで, dotコマンドによってグラフを SVG 形式で生成し,jQuery で SVG を操作するコードと結合しているだけです.

仕組みはシンプルなので,機能を追加するのも簡単です.コードは js/graphact.js にあります.

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です