gitのコミットグラフをクリッカブルなsvgで出力してみる

# gitのコミットグラフをクリッカブルなsvgで出力してみる

これの続き。
http://qiita.com/arc279/items/18ae28c212a1fa014e75

相変わらずたいして使い道は思いつかないけど。

```bash:bash
GIT_DIR=/path/to/git/.git
BASE_URL="http://example.com"

f() {
    git --git-dir=$GIT_DIR log --pretty='format: %h %p' "$@" | awk -v base_url=$BASE_URL '
BEGIN { print "digraph git {" }
END { print "}" }
{
    for(i=1; i<=NF; ++i) {
        printf("  _%s[label=\"%s\" URL=\"%s/%s\"]\n", $i, $i, base_url, $i);
    }

    for(i=1; i<=NF; ++i) {
        printf("  _%s ", $i);
        if(i == 1) {
            printf(" -> { ");
        }
    }
    printf("}\n\n")
}
    ';
};

f HEAD~10..HEAD | dot -T svg > clickable.svg
```

とかやると、クリッカブルなsvgで出力できる。

こんな感じ。
http://devcrew.mydns.jp/dev/clickable.svg

## 要点

awkでゴリ押してるだけなので特になし。
dot言語は説明できるほど詳しくないのでパス:)

## ちなみに

出力するdotファイルはこんな感じ

```lang:dot
digraph git {
  _91b26ae[label="91b26ae" URL="http://example.com/91b26ae"]
  _db51322[label="db51322" URL="http://example.com/db51322"]
  _91b26ae  -> {   _db51322 }

  _db51322[label="db51322" URL="http://example.com/db51322"]
  _94e7a22[label="94e7a22" URL="http://example.com/94e7a22"]
  _d7412a2[label="d7412a2" URL="http://example.com/d7412a2"]
  _db51322  -> {   _94e7a22   _d7412a2 }

  _d7412a2[label="d7412a2" URL="http://example.com/d7412a2"]
  _6f664a0[label="6f664a0" URL="http://example.com/6f664a0"]
  _192cd47[label="192cd47" URL="http://example.com/192cd47"]
  _d7412a2  -> {   _6f664a0   _192cd47 }

  _94e7a22[label="94e7a22" URL="http://example.com/94e7a22"]
  _0edd3e0[label="0edd3e0" URL="http://example.com/0edd3e0"]
  _33a63aa[label="33a63aa" URL="http://example.com/33a63aa"]
  _94e7a22  -> {   _0edd3e0   _33a63aa }

  _0edd3e0[label="0edd3e0" URL="http://example.com/0edd3e0"]
  _4f38937[label="4f38937" URL="http://example.com/4f38937"]
  _0edd3e0  -> {   _4f38937 }

  _33a63aa[label="33a63aa" URL="http://example.com/33a63aa"]
  _c015a22[label="c015a22" URL="http://example.com/c015a22"]
  _33a63aa  -> {   _c015a22 }

  _c015a22[label="c015a22" URL="http://example.com/c015a22"]
  _d3a0473[label="d3a0473" URL="http://example.com/d3a0473"]
  _4f38937[label="4f38937" URL="http://example.com/4f38937"]
  _c015a22  -> {   _d3a0473   _4f38937 }

  _d3a0473[label="d3a0473" URL="http://example.com/d3a0473"]
  _8cce904[label="8cce904" URL="http://example.com/8cce904"]
  _d3a0473  -> {   _8cce904 }

  _4f38937[label="4f38937" URL="http://example.com/4f38937"]
  _d5871e3[label="d5871e3" URL="http://example.com/d5871e3"]
  _4f38937  -> {   _d5871e3 }

  _d5871e3[label="d5871e3" URL="http://example.com/d5871e3"]
  _8cce904[label="8cce904" URL="http://example.com/8cce904"]
  _d5871e3  -> {   _8cce904 }

  _8cce904[label="8cce904" URL="http://example.com/8cce904"]
  _df89004[label="df89004" URL="http://example.com/df89004"]
  _4b4ad03[label="4b4ad03" URL="http://example.com/4b4ad03"]
  _8cce904  -> {   _df89004   _4b4ad03 }

  _df89004[label="df89004" URL="http://example.com/df89004"]
  _570be01[label="570be01" URL="http://example.com/570be01"]
  _df89004  -> {   _570be01 }

  _4b4ad03[label="4b4ad03" URL="http://example.com/4b4ad03"]
  _4bb9e8a[label="4bb9e8a" URL="http://example.com/4bb9e8a"]
  _4b4ad03  -> {   _4bb9e8a }

  _4bb9e8a[label="4bb9e8a" URL="http://example.com/4bb9e8a"]
  _fe1c877[label="fe1c877" URL="http://example.com/fe1c877"]
  _570be01[label="570be01" URL="http://example.com/570be01"]
  _4bb9e8a  -> {   _fe1c877   _570be01 }

  _fe1c877[label="fe1c877" URL="http://example.com/fe1c877"]
  _18a9c20[label="18a9c20" URL="http://example.com/18a9c20"]
  _fe1c877  -> {   _18a9c20 }

  _570be01[label="570be01" URL="http://example.com/570be01"]
  _0872d8c[label="0872d8c" URL="http://example.com/0872d8c"]
  _18a9c20[label="18a9c20" URL="http://example.com/18a9c20"]
  _570be01  -> {   _0872d8c   _18a9c20 }

  _0872d8c[label="0872d8c" URL="http://example.com/0872d8c"]
  _73a8df5[label="73a8df5" URL="http://example.com/73a8df5"]
  _0872d8c  -> {   _73a8df5 }

  _18a9c20[label="18a9c20" URL="http://example.com/18a9c20"]
  _2a0465b[label="2a0465b" URL="http://example.com/2a0465b"]
  _18a9c20  -> {   _2a0465b }

  _2a0465b[label="2a0465b" URL="http://example.com/2a0465b"]
  _097497e[label="097497e" URL="http://example.com/097497e"]
  _73a8df5[label="73a8df5" URL="http://example.com/73a8df5"]
  _2a0465b  -> {   _097497e   _73a8df5 }

  _097497e[label="097497e" URL="http://example.com/097497e"]
  _342972f[label="342972f" URL="http://example.com/342972f"]
  _097497e  -> {   _342972f }

}
```

## ついでに

クリッカブルなhtmlで吐き出す場合はこんな感じ。

```bash:bash
f HEAD~10..HEAD | dot -T png > g.png
cat <<EOD > clickable.html
<img src="g.png" usemap="#git" alt="graphviz graph" />
EOD
f HEAD~10..HEAD | dot -T cmapx >> clickable.html
```