はじめに
Git
のダイアグラムをMermaid
を使ってきれいに書けるということなので試してみる。
環境
Windows 11 Professional
Mermaid 11.1.1
MermaidとGitGraphについて
Mermaid
は、Markdown
形式のテキストファイル内で視覚的なダイアグラムを作成できるツールであり、Gitリポジトリのブランチやコミットの流れを視覚化するためにも使用できる。
今回は、Git
のグラフをMermaid
で描くということを実践してみる。Git
ダイアグラムを作成する際は、Mermaidの Git graph
機能を使用する。
Gitダイアグラムを作成する
MermaidのGit graph構文について
Mermaid
のGit graph
は、コミットやブランチ、マージなどのGit操作を簡単に記述するための機能である。
基本的な構文は以下の通り。
gitGraph
commit id: "Initial commit"
branch develop
commit id: "Add feature 1"
checkout main
commit id: "Update README"
merge develop
以下のように描画される。
gitGraph commit id: "Initial commit" branch develop commit id: "Add feature 1" checkout main commit id: "Update README" merge develop
構文について
gitGraph
Gitダイアグラムの作成を開始する。commit id: “コミットメッセージ”
コミットを追加する。id:
に続けてコミットメッセージを記述する。branch ブランチ名
新しいブランチを作成する。checkout ブランチ名
指定したブランチに切り替える。merge ブランチ名
指定したブランチを現在のブランチにマージする。
例:Gitフローの可視化
commit id: "Initial commit"
branch feature/add-login
checkout feature/add-login
commit id: "Implement login feature"
checkout main
commit id: "Fix typo in README"
merge feature/add-login
branch release/v1.0
checkout release/v1.0
commit id: "Prepare release v1.0"
描画すると
gitGraph commit id: "Initial commit" branch feature/add-login checkout feature/add-login commit id: "Implement login feature" checkout main commit id: "Fix typo in README" merge feature/add-login branch release/v1.0 checkout release/v1.0 commit id: "Prepare release v1.0"
この例では以下のフローを可視化している。
- メインブランチ(
main
)からfeature/add-login
ブランチを作成。 feature/add-login
で機能を実装し、main
にマージ。- リリースブランチ(
release/v1.0
)を作成して準備。
応用例
複数のブランチの同時表示する:
gitGraph commit id: "Start Project" branch feature/alpha branch feature/beta checkout feature/alpha commit id: "Alpha feature complete" checkout feature/beta commit id: "Beta feature complete" checkout main merge feature/alpha merge feature/beta
詳細なコミットメッセージやタグ:
gitGraph commit id: "Initial Commit" tag: "v1.0" branch hotfix/urgent checkout hotfix/urgent commit id: "Fix critical bug" checkout main merge hotfix/urgent
おまけ: Gitダイアグラムを使ってRebaseを説明する
Mermaid
のgitGraph
を使ってGit
のrebase
操作を視覚化してrebase
について説明する。
Rebaseの概要
rebase
は、あるブランチのコミット履歴を別のブランチの先端に移動させる操作となる。
これにより、分岐した履歴を直線的に整理し、履歴をよりクリーンにできる。
Rebaseの基本的な例
以下のシナリオを考える。
main
ブランチに新しいコミットが追加された。feature
ブランチで作業していたが、main
の最新コミットを取り込みたい。
操作前の状態
gitGraph commit id: "Initial commit" branch feature commit id: "Feature commit 1" commit id: "Feature commit 2" checkout main commit id: "Main commit 1"
この状態では、featureブランチがmainブランチから分岐しており、それぞれ異なる履歴を持っている。
Rebaseの操作
feature
ブランチで以下のコマンドを実行する。
git switch feature
git rebase main
この操作により、featureブランチの履歴がmainの最新コミットの後ろに移動する。
操作後の状態
以下はrebase後の状態を表したものとなる。
gitGraph commit id: "Initial commit" commit id: "Main commit 1" branch feature commit id: "Feature commit 1" commit id: "Feature commit 2"
変更点
feature
ブランチのコミット(“Feature commit 1"と"Feature commit 2”)がmain
の最新コミット(“Main commit 1”)の後に移動した。- 履歴が直線的になり、クリーンな状態になった。
Rebaseの衝突 (Conflict)
rebase中にコンフリクトが発生する場合がある。その場合、次の手順で解決する。
コンフリクトを解消する
コンフリクトしたファイルを編集して修正し、次のコマンドを実行する。
git add <ファイル名> git rebase --continue
rebaseを中断する 作業を中断して元に戻すには、以下のコマンドを使う。
git rebase --abort
RebaseとMergeの違い
rebase
は履歴を直線化してシンプルにするが、merge
は履歴をそのまま保持する。
Mergeの結果
gitGraph commit id: "Initial commit" branch feature commit id: "Feature commit 1" commit id: "Feature commit 2" checkout main commit id: "Main commit 1" merge feature
Rebaseの結果
gitGraph commit id: "Initial commit" commit id: "Main commit 1" branch feature commit id: "Feature commit 1" commit id: "Feature commit 2"
- Merge: 履歴が分岐したまま残る。
- Rebase: 履歴が直線化される。
Rebaseの注意点について
公開ブランチでは避けるべき
rebase
は履歴を書き換える操作のため、他の人と共有しているブランチに対して行うと競合や履歴を破壊する可能性がある。履歴が変わる 元のコミットは新しい履歴として扱われるため、commit hashが変わる。
参考
Gitgraph Diagrams | Mermaid
https://mermaid.js.org/syntax/gitgraph.htmlGit rebase | ATLASSIAN
https://www.atlassian.com/ja/git/tutorials/rewriting-history/git-rebase
おわりに
Mermaid
はコードで図を管理できるし、だれが作っても同じものができるというのが良いよね。AWS
のアーキテクチャ図も書けるようなので今後も試してみる。