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

## 概要

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

## 前提

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

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

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

https://qiita.com/miriwo/items/3acc5b2aa3bb0e205171

## 内容

### ブランチの表現

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

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

↓作図結果

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

### ブランチを追加

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

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

↓作図結果

```mermaid
---
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'
```

↓作図結果

```mermaid
---
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'
```

↓作図結果

```mermaid
---
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'
```

↓作図結果

```mermaid
---
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
---
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'
```

↓作図結果

```mermaid
---
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'
```

↓作図結果

```mermaid
---
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