GitGraph.js で GitHub Flow のコミットグラフを書いてみます

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>

画像

外部資料