Gitのコミットグラフを可視化できるGitGraph.jsがおもしろい

プレゼン資料を作っている時に「このコミットグラフをMarkdownかテキストで書けたらな」と思ったことがある人、結構いるのではないでしょうか。

[GitGraph.js](http://gitgraphjs.com/) を使うと、JavaScriptで記述したコミットログをcanvasを使って可視化できることを知りました。なかなかおもしろいです。

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/15d6ae56-4b7a-6236-2711-ae40e112bfe2.png)

## 準備

まず GitGraph.js の JavaScript と CSS ファイルを読み込みます。[GitHub](https://github.com/nicoespeon/gitgraph.js) からソースをcloneするなり、bowerを使うなり、CDNを使うなり、お好みで。ここではコミットグラフを定義するコードも別ファイル `index.js` に書くことにします。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GitGraph.js</title>
    <link rel="stylesheet" type="text/css" href="lib/gitgraph.css" />
  </head>
  <body>
    <canvas id="gitGraph"></canvas>
    <script src="lib/gitgraph.js"></script>
    <script src="index.js"></script>
  </body>
</html>
```

## 基本

GitGraph.js の API は、git のコマンドラインと似ているので、ソースコードを読めば何となく分かると思います。ブランチを作りたいときは `branch()`、コミットをしたいときは `commit()`、マージをしたいときは `merge()` を呼び出します。 `merge()` 関数の引数が、マージ元ではなくマージ先ブランチになるのがちょっと違和感ありますが。

```js:index.js
var gitgraph = new GitGraph();

// masterブランチを作成 ＆ HEADを切り替えて2回コミット
var master = gitgraph.branch('master');
gitgraph.commit().commit();

// developブランチを作成 ＆ HEADを切り替えて2回コミット
var develop = gitgraph.branch('develop');
gitgraph.commit().commit();

// HEADをmasterブランチに切り替えて1回コミット
master.checkout();
gitgraph.commit();

// developブランチをmasterブランチにマージ
develop.merge(master);
```

特にデザインやコミットメッセージを指定していないので、デフォルト設定で次のようなグラフが描画されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/652cd618-1db6-4c35-d8b9-59be1fa76709.png)

## デザインの変更

`GitGraph` オブジェクトを初期化する際に、いくつかの描画オプションを設定できます。目的にあわせて変更しましょう。

* デザインテンプレート `template`
    * `metro(デフォルト)`, `blackarrow`
* 表示モード `mode`
    * `extended(デフォルト)`, `compact`
* グラフの時系列の向き `orientation`
    * `vertical(デフォルト)`, `vertical-reverse`, `horizontal`, `horizontal-reverse`

```js:index.js
var gitgraph = new GitGraph({
  template: 'blackarrow',
  mode: 'compact',
  orientation: 'vertical'
});
```

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/bc7db728-b725-24ad-4551-7e5f3ede8b82.png)

```js:index.js
var gitgraph = new GitGraph({
  template: 'metro',
  mode: 'extended',
  orientation: 'horizontal'
});
```

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/d4b36dc4-9983-1c5a-c67d-5067f1b38fe6.png)

`horizontal` にすると、`mode` が `extended` でもコミットメッセージは表示されないようです。

## コミットメッセージの変更

`commit()` 関数の引数で個別にコミットメッセージや Author を指定できます。また、`GitGraph` を初期化する際にデフォルトの Author を指定することもできます。

```js:index.js
var gitgraph = new GitGraph({
  author: 'John Doe <john.doe@example.com>'
});
var master = gitgraph.branch('master');

gitgraph.commit('initial commit');
gitgraph.commit({
  message: '2nd commit',
  author: 'Anonymous <anonymous@example.com>',
  tag: 'v0.0.1',
  dotColor: 'white',
  dotSize: 10,
  dotStrokeWidth: 10
});
gitgraph.commit('3rd commit');
});
```

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/e393ae80-5d78-a236-8287-a49067f81232.png)


## ブランチの削除

コミットグラフの描画は、1ブランチ1列で行われます。そのため、あるブランチ（e.g. `develop`）をマージしても、次に作るブランチ（e.g. `hotfix`）は新しい列に描画されてしまいます。

```js:index.js
...
develop.merge(master);

var hotfix = gitgraph.branch('hotfix');
gitgraph.commit();
```

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/c10026d6-ab08-f851-c64f-ea39d772cd57.png)

`develop` ブランチが使っていた2列目を再利用して `hotfix` ブランチを描画させるには、 `delete()` 関数を使って `develop` ブランチを削除してやります。

```js:index.js
...
develop.merge(master);
develop.delete();

var hotfix = gitgraph.branch('hotfix');
gitgraph.commit();
```

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/b28e06bc-ef81-4814-64e9-fdef26991472.png)

## さらに複雑なグラフ

ほかにも、独自のテンプレートを定義することでハッシュ値やコミットメッセージの表示を制御したり、ブランチを表示する位置を明示的に指定したり、色々と複雑なことができるようになっています。

興味があれば公式ページのサンプルをのぞいてみてください。Git Flow のサンプルはすごいです。ここまでくると、作図ツールで書いた方が早いのでは？という気がしなくはないですが…

* http://gitgraphjs.com/examples/index.html
* http://gitgraphjs.com/examples/gitflowsupport.html

![image](https://qiita-image-store.s3.amazonaws.com/0/33668/89e92f4d-5c65-b7d1-a0b1-dd0a3f33feb3.png)