マーメイド#15 gitグラフ1

ひとりマーメイド15日目
gitグラフ1

概要

マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではgitグラフの記述について紹介します！

↓↓前回の記事はこちら

マーメイドで記述するgitグラフ

前回の記事ではガントチャートの基本構文について紹介しました！

今日はgitグラフの記法について紹介します。gitグラフはブランチやコミットなどのgitフローを可視化するダイアグラムです。

mermaid

gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit

宣言とタイトル

gitグラフはgitGraphで宣言されます。

ダイアグラムの宣言の前にタイトルを定義することができます。
※titleはマーメイドv.9.3.0以降でレンダリング可能です。

---
title: TITLE
---

mermaid

---
title: Git Flow
---
gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit

git操作

マーメイドにおけるgitグラフの記法はコマンド操作と近く、直感的に記述することができます。

サポートされている操作は以下の通りです。

• commit
• branch
• checkout
• merge

mermaid

gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit

commit

commitで現在のブランチへのコミットを定義することができます。ブランチはmainで初期化されます。
※一部古いバージョンのエディタではmasterと定義されることがあります。

mermaid

gitGraph
    commit
    commit
    commit
    commit

コミットID

デフォルトではコミットポイントにランダムなコミットIDが付与されます。
コミットIDを指定したい場合は以下のように記述します。
commit id: "COMMIT_ID"

mermaid

gitGraph
    commit id: "first commit"
    commit id: "second commit"
    commit id: "third commit"
    commit id: "fourth commit"

コミットタイプ

コミットタイプを定義して表示を変更することができます。以下の3つのタイプがサポートされています。

• NORMAL
• RESERVE
• HIGHLIGHT

デフォルトではNORMALが指定されます。
commit type: TYPE

mermaid

gitGraph
    commit
    commit type:NORMAL
    commit type:REVERSE
    commit type:HIGHLIGHT

コミットダグ

コミットにタグを付与することができます。

commit tag:"TEXT"

mermaid

gitGraph
    commit
    commit tag:"v.1.0.0"
    commit
    commit tag:"rebased"
    commit

branch

branchで現在のブランチから新たなブランチを生成することができます。
branch BRANCH_NAME

mermaid

gitGraph
    commit
    commit
    branch develop
    commit

checkout

checkoutでブランチを切り替えることができます。
checkout BRANCH_NAME

mermaid

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    commit
    commit

merge

mergeでブランチを結合します。
merge BRANCH_NAME

mermaid

gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit

カスタム

mergeもcommitと同様に以下の項目を定義することができます。

• id
• type
• tag

mermaid

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    commit
    commit
    branch feature_2
    checkout feature_2
    commit
    checkout feature_1
    commit
    checkout develop
    merge feature_1 id: "Let's merge"
    merge feature_2 type: REVERSE
    checkout main
    merge develop tag: "v.2.0.0"
    commit

チェリーピック

特定のコミットのみを取り入れるチェリーピックを定義することができます。取り込むコミットのIDを指定します。
cherry-pick id: "TARGET_ID"

mermaid

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit id: "target"
    commit
    checkout main
    commit
    cherry-pick id: "target"
    commit

まとめ

gitグラフの基本的な記法を紹介しました！

↓↓次回の記事はこちら!!

参考