Posted at

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

More than 3 years have passed since last update.

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

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

image


準備

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


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() 関数の引数が、マージ元ではなくマージ先ブランチになるのがちょっと違和感ありますが。


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


デザインの変更

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


  • デザインテンプレート template



    • metro(デフォルト), blackarrow



  • 表示モード mode



    • extended(デフォルト), compact



  • グラフの時系列の向き orientation



    • vertical(デフォルト), vertical-reverse, horizontal, horizontal-reverse




index.js

var gitgraph = new GitGraph({

template: 'blackarrow',
mode: 'compact',
orientation: 'vertical'
});

image


index.js

var gitgraph = new GitGraph({

template: 'metro',
mode: 'extended',
orientation: 'horizontal'
});

image

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


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

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


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


ブランチの削除

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


index.js

...

develop.merge(master);

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


image

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


index.js

...

develop.merge(master);
develop.delete();

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


image


さらに複雑なグラフ

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

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

image