ITエンジニア/デザイナ向けにオープンソースを毎日紹介

チャートやネットワーク図などを描くのに使われるのが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

 

MOONGIFTの関連記事

  • DevRel
  • Com2