Mermaidのブランチ図でコミットIDを消す方法

はじめに

この記事では、「Mermaidのブランチ図でコミットIDを消す方法」について書いています。

最近QiitaやGitHubなどでMermaidがサポートされるなど使える場面が増えているため、書き方を試しながら学んでいます。

その中で、Mermaidでブランチ図を書く時に「コミットID不要なんだけどどうやって消すんだろう」となったのが記事を書いたきっかけでした。

自分に向けた備忘録でもありますが、「Mermaidのブランチ図でコミットIDを消したい」な人の一助になれば嬉しいです。

要点だけ

mermaidのコードの最初に以下を追加してください

%%{init: { 'gitGraph': { 'showCommitLabel': false } } }%%

実際に試してみる

まずは何も気にせず普通にブランチ図を書いてみます。

```mermaid
gitGraph
    commit
    branch topic
    commit
    commit
    checkout main
    merge topic
    commit
```

結果は以下のようになり、図の中のいくつかの箇所に英数字（コミットID）が書かれています。

gitGraph
    commit
    branch topic
    commit
    commit
    checkout main
    merge topic
    commit

では次に、コミットIDを非表示にする設定を書き足します。（下のコードで上から２行目がそれに相当します）

```mermaid
%%{init: { 'gitGraph': { 'showCommitLabel': false } } }%%
gitGraph
    commit
    branch topic
    commit
    commit
    checkout main
    merge topic
    commit
```

ではこのコードで表示されるブランチ図を見てみましょう

%%{init: { 'gitGraph': { 'showCommitLabel': false } } }%%
gitGraph
    commit
    branch topic
    commit
    commit
    checkout main
    merge topic
    commit

無事にブランチ図からコミットIDが消えたかと思います。

MermaidのgitGraphでは、細かな部分の設定を行うことができ、コードの最初に

%%{init: { ... } }%%

と書くことで設定を変更することができます（{ ... }の部分に設定を書きます。）

今回のコミットID表示に関すること(showCommitLabel)も、設定できる項目の一つです。

おわりに

「Mermaidのブランチ図でコミットIDを消す方法」について解説しました。

使い方を覚えて様々な場面でMermaidを活用できるようにしたいと思います。

さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。

mermaid-js.github.io