mermaid.jsを使ってGitのブランチ図を書いてみよう（ブランチ編）

概要

コードで作図できるでおなじみのmermaidを使ってGitのブランチ図の記載方法をまとめる。
今回はブランチの表現に絞ってまとめる。

前提

図のレンダリングにはmermaid公式のLIVE Editorを使用

コミットの定義方法を理解していること

内容

ブランチの表現

mainブランチは特段宣言せずデフォルトで存在している。
なので下記のようにコミットを記載するだけでmainブランチが作図される。

---
title: ブランチの説明
---
gitGraph
   commit
   commit

↓作図結果

ブランチを追加

ブランチを追加して作図したい場合branch 'ブランチ名'のように指定することでブランチを追加する事ができる。

---
title: ブランチの追加の説明
---
gitGraph
   commit
   commit
   branch 'feature'

↓作図結果

ただ、これだけだとブランチを作成しただけなのでブランチを移動してコミットを追加してみる。
ちなみに「ブランチを移動してコミット」これを行わないとブランチ分岐の線が作図されない。
※わかりやすいようにコミットにID名（「First commit」など）を付与してみた。

---
title: ブランチの追加の説明
---
gitGraph
   commit id: 'First commit'
   commit id: 'A commit'
   branch 'feature'
   commit id: 'B commit'

↓作図結果

branchという記述は「ブランチの定義 + 定義したブランチの移動」である。
ただ、これが少し複雑さを生む気がする。「ブランチの移動」はcheckout 'ブランチ名'もしくはswitch 'ブランチ名'で行う。未定義のブランチをcheckoutやswitchしてしまうとエラーになるので注意する。
少々冗長な気がするが下記のように記載したほうが冗長だがわかりやすい気がする。

---
title: ブランチの追加の説明
---
gitGraph
   commit id: 'First commit'
   commit id: 'A commit'
   branch 'feature'
   switch 'feature'
   commit id: 'B commit'

↓作図結果

今度は時系列的に「B commit」のあとにmainブランチに「C commit」を追加してみる。

---
title: ブランチの追加の説明
---
gitGraph
   commit id: 'First commit'
   commit id: 'A commit'
   branch 'feature'
   switch 'feature'
   commit id: 'B commit'
   switch 'main'
   commit id: 'C commit'

↓作図結果

ここでコミットの指定忘れに気がついた。時系列的に「B commit」の前にmainブランチに「Hoge commit」を追加する。

---
title: ブランチの追加の説明
---
gitGraph
   commit id: 'First commit'
   commit id: 'A commit'
   branch 'feature'
   switch 'feature'
   switch 'main'
   commit id: 'Hoge commit'
   switch 'feature'
   commit id: 'B commit'
   switch 'main'
   commit id: 'C commit'

↓作図結果

ここまでの説明でなんとなくわかったかと思うのだが、mermaidのGitのブランチ図はただ単に時系列で作図の定義をしているだけである。

ブランチのマージ

もちろんマージも表現できる。
マージ先ブランチにswitchしてからmerge 'マージ元ブランチ名'のように指定することでマージを表現することができる。今回の場合mainブランチにfeatureブランチをマージしたいので「mainブランチにswitchしてからmerge feature」と記載する。
featureブランチをmainブランチの「C commit」のあとにマージするには下記のように記載する。

---
title: ブランチのマージの説明
---
gitGraph
   commit id: 'First commit'
   commit id: 'A commit'
   branch 'feature'
   switch 'feature'
   switch 'main'
   commit id: 'Hoge commit'
   switch 'feature'
   commit id: 'B commit'
   switch 'main'
   commit id: 'C commit'
   merge 'feature'

↓作図結果

コミットのチェリーピック

「Hoge commit」をfeatureブランチの「B commit」のあとにチェリーピックをする図を作成してみる。
チェリーピックはcherry-pick id: 'チェリーピックをするコミットのID'のように指定する。

---
title: チェリーピックの説明
---
gitGraph
   commit id: 'First commit'
   commit id: 'A commit'
   branch 'feature'
   switch 'main'
   commit id: 'Hoge commit'
   switch 'feature'
   commit id: 'B commit'
   cherry-pick id: 'Hoge commit'
   switch 'main'
   commit id: 'C commit'
   merge 'feature'

↓作図結果

参考文献