チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。

jquery.graphviz.svgの使い方

表示しました。

ノードをクリックすると、ハイライト表示されます。

さらにズームイン/アウトができます。

jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。

jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

デモ mountainstorm/jquery.graphviz.svg: jquery plugin to make graphviz svg charts responsive