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

概要

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

前提

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

内容

コミットの表現

コミットは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'

↓作図結果

参考文献