テキストベースでグラフを書く（Octopress/Jekyll 向け）

↓って書くと↑こうなる。ってやつを作った。

{% graph %}
a -- b
b -- c
c -- a
{% endgraph %}

有向グラフの時は、{% digraph %} を使う。

{% digraph %}
a -> b
b -> c
c -> a
{% enddigraph %}

インストール方法

Graphviz と Octopress プラグインをインストール

installation.sh

sudo apt-get install graphviz
cd <your_octopress_dir>/plugins
wget https://raw.github.com/kui/octopress-graphviz/master/graphviz_block.rb

もう少し複雑な図を書く

Graphviz の公式サイト を参照してください。

Graphviz のソースコードを書きたい

{% graphviz %} ブロックを使う。

{% graphviz %}
digraph g {
 a -> b
 b -> c
 c -> a
}
{% endgraphviz %}

おわり

HTML 内に SVG 要素を埋め込んでるので、HTML5 前提になってる。一応 altnative text みたいなのには簡単に対応しているので、ひょっとしたらちゃんと表示されるかも。確認していない。

確認していないけど Jekyll でも動くそうな。