graphdownを書き直した。改めて説明すると、graphdownはMarkdownでグラフを記述するための拡張記法を提供するライブラリで、以前のバージョンではGraphvizを使ってグラフを描画していたため、あの冗長なDOT言語を使わざるを得なかった。

新しいgraphdownは以下のようなMarkdownの記法を拡張する。

sample.md 
[A] -> [B]
[A] <-> [C]
[B] -> [D], [E], [F]

このMarkdownは以下のようなSVGに変換される。

ABCDEF

[A] -> [B]という記法でノードをエッジで接続する。さらに、[A] <-> [B]と書くとノードを双方向に接続する。[A] -> [B], [C], [D] -> [E]と書いて複数のノードとの接続を簡潔に書くこともできる。

以前のバージョンではグラフはGraphvizが生成したPNGだったが、新しいバージョンはSVGとしてグラフを出力するため、CSSやJSでグラフを扱うことができる。

用途

Markdownのドキュメントにサーバー構成図とか画面遷移図を書きたいときに便利だと思う。例をいくつか載せる。

servers_arrangement.md 
[Load balancer] -> [Web server 1], [Web server 2], [Web server 3] -> [DB server], [Cache server]
Load balancerWeb server 1Web server 2Web server 3DB serverCache server
path_to_graphdown.md 
[/] -> [/naoty] -> [/naoty/graphdown]
[/] -> [/search] -> [/naoty/graphdown]
[/] -> [/notifications] -> [/naoty/graphdown]
//naoty/naoty/graphdown/search/notifications

書き直した理由

複雑なグラフを表現しつつ、Markdownとして読み下せる記法を実現するために書き直した。以前のバージョンではMarkdownにDOT言語のスニペットを書くしかなかったが、これではドキュメントを読むためにDOT言語を知る必要がある。DOT言語はそんな知られてないし、冗長な表現をいちいち覚えていられないので、Graphvizを捨てて一から作った。

課題

ちょっと複雑なグラフになると描画が汚くなる。エッジがノードの上に重なったり、エッジが無駄に交差してとても見にくい。最大の課題はこのパーサーをGitHubとかで使えないことだと思う。これについては何か対策がないか考え中。