Octopress や Jekyll を使って、markdown などでブログエントリ書くことで、 謎ショートカットキーなどを使わないとテキストの修飾が出来ずセマンティックな 情報が失われがちで、ひどいソースコードを垂れ流す WYSIWIG から解放された。

しかし、簡単な有向グラフを用いてフロー図書いたりするには、結局、ペイント など画像編集ソフトや Office ソフトなどに頼る必要があり、キーボードから 手を離す機会が増えて大変苦痛だった。

なので、テキストベースで有向/無向グラフが作成できる Graphviz を、Octopress で利用できるような プラグインを作成した。

kui/octopress-graphviz

サンプル

こう書く:

{% graph 無向グラフサンプル %}
a -- b
b -- c
c -- a
{% endgraph %}

そうすると、Octopress はこんな感じのグラフに置換してくれる:

有向グラフも書ける:

{% digraph 有向グラフサンプル %}
a -> b -> c -> a -> c
{% enddigraph %}

こうなる:

インストール方法は kui/octopress-graphviz を参考にしてみてください。

特徴としては:

• インライン svg 要素によるグラフ
  • わざわざ画像生成して img 要素でリンクするとファイル増えるので
  • 上の図の HTML 要素やソースコードを確認してみてください。
• インライン SVG 向けの Altnative Text も用意してる
  • ただ、インライン SVG を解釈できないブラウザでどうなるかは未確認

といったところでしょうか。

こういうようなこと もできる:

これでわかるように Graphviz は細かいノード配置調節は苦手だったりします。