Graphvizを知っていますか？
これを使うとフローチャート図を描くことができます。 おっと今はあまりフローチャート図とは言わず状態遷移図と言ったりするのですね。
Windows10にChocolateyを使ってGraphvizを簡単にインストールしましょう。
Graphvizの使い方についても紹介します。
Graphvizとは
GraphvizとはDOT言語で記述されたグラフ構造を描画するフリーウェアです。
PostScript、PDF、SVGなどさまざまな形式の画像ファイルを出力することができます。
公式サイトはこちらです。
グラフ構造とひとくちに言いますが、実にさまざまな形式のグラフを扱うことが可能です。 描くことができるのはフローチャートだけではありません。
どのようなグラフを出力できるのか、ざっとこちらのギャラリーを眺めていただければお分かりになるでしょう。
DOT言語とは
DOT言語とはテキストベースでグラフ構造を表現するための言語です。 Graphvizを用いてテキストで書かれたDOTファイルを画像ファイルに出力することが可能です。
要はVisioのようなお絵かきソフトを用いずに「テキスト」を元にしてグラフを出力可能にした言語ということです。
テキストベースでグラフを表現できますので保守性が高く、JavaScriptなどと組み合わせて動的に変化するグラフを表現することも可能になります。
DOT言語の書き方
DOT言語でグラフを描く方法はWikipediaが参考になります。
graph graphname {
a -- b -- c;
b -- d;
}のように書けば矢印の無い無向グラフを描くことができます。
矢印つきの有向グラフを描く場合は次のようにします。
digraph graphname {
a -> b -> c;
b -> d;
}これらをそれぞれ秀丸などのテキストエディタを使って書き、abc1.txtやabc2.txtのようなファイル名をつけて保存しましょう。
DOT言語で書いたファイルなので本当は拡張子は.dotとしたいところですが、WindowsではMSワードで使用しているdotファイルと拡張子が被ってしまいます。
ですので.txtのままの拡張子としておきます。
拡張子がtxtのままでもGraphvizを使うのに特段の問題はありませんし、秀丸エディタなどで簡単にファイルを開くことができて便利です。
Graphvizを使うと何が便利なのか
Graphvizを使ってグラフを作っておけば書き換えることが簡単にできるようになります。 メンテナンスが楽になるということですね。
Visioなどの描画ソフトウェアを使ってグラフや図を作成することもできますが、いったん作ってしまうと書き換えするのは大変です。
その点Graphvizならばテキストベースですから簡単に編集することが可能です。
Chocolateyを使ってGraphvizをWindowsにインストールする方法
それでは早速WindowsにGraphvizをインストールしていきましょう。
GraphvizのインストールにはChocolateyを使うのが簡単です。 Chocolateyのインストール方法はこちらをご参照ください。
まずsearchコマンドでGraphvizを探してみます。
choco search graphviz
2019年1月現在Graphvizのバージョンは2.38.0です。
インストールしていきます。
choco install -y Graphvizあっという間で簡単ですね。 更にChocolateyが便利なのはアップデートです。
choco upgrade -y allChocolateyでインストールしたソフトでアップデート対象全てのものが簡単にアップデートされます。
Chocolateyお勧めです！
Graphvizの使い方
Graphvizを使って先ほど作ったDOTファイルを画像ファイルに変換して出力してみましょう。
dot -T画像タイプ DOTファイル名 -o 出力ファイル名画像として出力する方法
具体例で見てみましょう。SVG画像として出力してみます。
dot -Tsvg abc.txt -o abc.svg
さあ、あとはさまざまなDOTファイルを書いてGraphvizで画像に変換するだけです。
Chrome拡張機能 Dot Lang Viewerをインストールして描画しよう
作成したDOTファイルを簡単にグラフ描画してくれるChrome拡張機能をインストールしましょう。
Chromeブラウザを開いてこちらからインストールします。
インストールが完了したら指示どおりに「ファイルのURLへのアクセスを許可する」にチェックを入れるのを忘れないようにしてください。
Chromeブラウザで新たなタブを開き、先ほど保存したDOTファイルをドラッグアンドドロップすれば簡単なフローチャートが描画されます。
右クリックから「名前をつけて保存」を選べば画像を保存することができます。
まとめ
Graphvizを使えばテキストベースでさまざまなグラフを作成・管理することが可能になります。
Chrome拡張機能Dot Lang Viewerはプレビューを確認するのに便利です。 またグラフの枚数が少ない場合は充分役に立つでしょう。
