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

概要

コードで作図できるでおなじみのmermaidを使ってGitのブランチ図の記載方法をまとめる。
今回は作図される図のテーマの設定方法について簡単にまとめる。

内容

ブランチのテーマをプリセットから設定

図のテーマは下記のいずれかから選択する事ができる。

• base
• forest
• dark
• default
• neutral

下記の様に'theme': 'テーマ名'のように指定することでテーマを指定する。
※2024/11/11現在 テーマ名と表示テーマが一致していない気がする。darkを指定するとダーク系ではないテーマがあたっている気がする。
プリセットのブランチテーマの指定は他の設定と抱き合わせで設定する事ができるはず。

---
title: ブランチのテーマ
---
%%{init: { 'theme': 'forest' } }%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

独自のブランチカラーを使ってテーマを変更

下記のように「どのブランチをどの色にするか」をカラーコードを使って設定する事ができる。
ブランチの色はブランチの定義順番に依存するので先にbranch 'ブランチ名'でブランチを一通り定義してからswitchしてそれぞれの作図を開始するようにしたほうが色の指定がしやすいかもしれない。
独自のブランチカラーの設定は他の設定と抱き合わせで設定する事ができる。

Mermaid allows you to set the colors for up-to 8 branches specific highlight commit

と書かれているので指定は8ブランチ（git7）までが限界っぽい。

---
title: ブランチのテーマ
---
%%{init: { 'theme': 'default' , 'themeVariables': {
   'git0': '#ff0000',
   'git1': '#00ffff'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

コミットのテーマ変更

下記のように「コミットラベルをどの色にするか」をカラーコードを使って設定する事ができる。
コミットラベルの色は他の設定と抱き合わせで設定する事ができる。

---
title: コミットのテーマ
---
%%{init: { 'themeVariables': {
   'commitLabelColor': '#ff0000',
   'commitLabelBackground': '#00ff00'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

タグのラベルの文字サイズ変更

下記のように「タグの文字サイズ」をpxを使って設定する事ができる
タグの文字サイズは他の設定と抱き合わせで設定する事ができる。
タグのラベルの文字サイズは他の設定と抱き合わせで設定する事ができる。

---
title: タグのポイント数
---
%%{init: { 'themeVariables': {
   'tagLabelFontSize': '16px'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

タグのラベルのテーマ変更

下記のように「タグのラベルのテーマ」をカラーコードを使って設定する事ができる
タグのテーマ変更は他の設定と抱き合わせで設定する事ができる。

---
title: タグのテーマ設定
---
%%{init: { 'themeVariables': {
   'tagLabelColor': '#ff0000',
   'tagLabelBackground': '#00ff00',
   'tagLabelBorder': '#0000ff'
}}}%%
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' tag: 'release-YYYYMMDD-XX'

↓作図結果

参考文献