mermaid.jsを使ってGitのブランチ図を書いてみよう（コミットとブランチの表現）

概要

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

前提

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

https://mermaid.live/edit#pako:eNqFj00KwjAQha8SZm0v0LXSA7iTbMZkTELzR5yIUnp3Y6uCIrh7P99bvAlU0gQ9dF0nIzv21IvdFUP2JAbHQjs0BYOMC2AcDwWzlVEIoVIIjr_lsWBUVmi6kE95bS2pMVX-DH-u32hAF5ckUDH0bwkbaFzb6HZlelQS2FIgCX2TGssoQca5cVg57W9RQc-l0gZq1si0XW--wozxkFKzJ_Tn5kuqxj7dfAdr92mu

内容

コミットの表現

コミットはcommitと記載することでコミットを作図する事ができる。

---
title: コミットの説明
---
gitGraph
   commit
   commit
   commit

↓作図結果

コミットに任意のIDを設定

ただ単にcommitとだけ記載すると「0-ca0c7a5」のようなランダムなIDが付与されて表示される。 このIDは下記のようにcommit id: '表示したいID'のように記載することで人為的に指定・表示する事ができる。ただし、指定する内容は図内で一意である必要がある。

---
title: コミットに任意のIDを設定
---
gitGraph
   commit id: 'first commit'
   commit id: 'A commit'
   commit id: 'B commit'

↓作図結果

↓こんな書き方をしても一個のコミットしか表示されないので注意。

---
title: コミットに任意のIDを設定
---
gitGraph
   commit id: 'hoge'
   commit id: 'hoge'
   commit id: 'hoge'

↓作図結果

コミット表示の指定

ただ単にcommitとだけ記載するとコミットの表示はデフォルト（NORMAL）の表示となる。 その他にリバート（REVERSE）やハイライト（HIGHLIGHT）などの表示を行うことができる。 下記の様にcommit type: 表示指定とすることでコミットの表示を指定できる。

---
title: コミットの表示の指定
---
gitGraph
   commit
   commit id: 'ノーマルのコミット' type: NORMAL
   commit id: 'リバートのコミット' type: REVERSE
   commit id: 'ハイライトのコミット' type: HIGHLIGHT
   commit type: HIGHLIGHT

↓作図結果

typeを使って表示の指定をしないとNORMALになる。
idとtypeは必ずしも併用する必要はない。

コミットにタグを付与

コミットにタグを付与することもできる。 下記の様にcommit tag: 'タグ名'とすることでタグを付与する事ができる。

---
title: コミットにタグを付与
---
gitGraph
   commit tag: 'タグ-01'
   commit id: '追加リリース' type: HIGHLIGHT tag: 'タグ-02'

↓作図結果

長いタグ名を設定すると下記のようにタグが被って表示される場合もあるので注意が必要。

---
title: コミットにタグを付与
---
gitGraph
   commit tag: 'release-YYYYMMDD-01'
   commit id: '追加リリース' type: HIGHLIGHT tag: 'release-YYYYMMDD-02'

↓作図結果

ブランチの表現

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'

↓作図結果

参考文献

https://mermaid.js.org/syntax/gitgraph.html#create-a-new-branch
https://mermaid.js.org/syntax/gitgraph.html#create-a-new-branch
https://mermaid.js.org/syntax/gitgraph.html#checking-out-an-existing-branch
https://mermaid.js.org/syntax/gitgraph.html#merging-two-branches
https://mermaid.js.org/syntax/gitgraph.html#cherry-pick-commit-from-another-branch
https://mermaid.js.org/syntax/gitgraph.html#syntax
https://mermaid.js.org/syntax/gitgraph.html#adding-custom-commit-id
https://mermaid.js.org/syntax/gitgraph.html#modifying-commit-type

https://mermaid.js.org/syntax/gitgraph.html#adding-tags