GitGraph.js で GitHub Flow のコミットグラフを書いてみます
GitHub Flow とは？
GitHub Flow については下記の記事を参照ください。
ダウンロード
$ git clone git@github.com:nicoespeon/gitgraph.js.git
サンプル
GitHub Flow サンプル
ダウンロードしてきた gitgraph.css と gitgraph.js を任意の位置に配置します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GitGraph.js</title>
<link rel="stylesheet" type="text/css" href="./gitgraph.css" />
</head>
<body>
<canvas id="gitGraph"></canvas>
<script src="./gitgraph.js"></script>
<script language="JavaScript">
var gitgraph = new GitGraph({
template: "metro",
reverseArrow: false,
orientation: "vertical",
mode: "extended"
});
gitgraph.template.colors = ['#CCC', '#F00', '#0F0', '#00F']
var master = gitgraph.branch('master');
gitgraph.commit({
message: "tbpgr commit1",
author: "tbpgr",
});
gitgraph.commit({
message: "tbpgr commit2",
author: "tbpgr",
});
var topic_a = gitgraph.branch('topic A');
gitgraph.commit({
message: "tanaka commit1",
author: "tanaka",
});
gitgraph.commit({
message: "tanaka commit2",
author: "tanaka",
});
master.checkout();
var topic_b = gitgraph.branch('topic B');
gitgraph.commit({
message: "suzuki commit1",
author: "suzuki",
});
gitgraph.commit({
message: "suzuki commit2",
author: "suzuki",
});
topic_a.checkout();
gitgraph.commit({
message: "tanaka commit3",
author: "tanaka",
});
gitgraph.commit({
message: "tanaka commit4",
author: "tanaka",
});
topic_b.checkout();
topic_b.merge(master, { message: "merge topic b", tag: "v1.0.0", author: "tbpgr" });
topic_a.merge(master, { message: "maerge topic a", tag: "v1.0.1", author: "tbpgr" });
var topic_c = gitgraph.branch('topic C');
gitgraph.commit({
message: "kudo commit1",
author: "kudo",
});
topic_c.merge(master, { message: "merge topic c", tag: "v1.0.2", author: "tbpgr" });
</script>
</body>
</html>
- 画像
