Gitgraph の 作り方 : 発展編! (Mermaid)

mermaid

Notionでも使える 「コードベースで図が作成できるツール」として, Mermaidをこれまで紹介してきましたが, 前回の記事では, GitGraph の基礎的な 使い方と 各コードの説明についてしていきました!

今回の記事では, その中では伝えられなかったより詳しい内容についてまとめていきます!! GitGraph をより使いこなせるようになる一助になれたらと思います!

Gitgraph の 作り方 : 入門編! (Mermaid)
 2021年末に Notionにも対応した Mermaidについてこのブログでは紹介してきました!今回の記事ではmermaidで表現できる図の一つである「Gitgraph」についてまとめていきます!他のmermaidで作れる図についての解...
スポンサーリンク

Gitgraph の 作り方 : 発展編! (Mermaid)

Commit id の 設定

commit id は デフォルトの設定では, ランダムな文字列で与えられることになっています.
しかし,それだけでは後から見たときに読み取りにくい部分が出てくると思います. そんな時に, 使えるのが今回紹介する commit id の 変更です!

通常の 「commit」 の後に, 「id:"<commit_id>"」 というように <commit_id> の部分を設定したい 文字列にして加えることで設定できます!

(例) 通常

file

設定後

commit_id をそれぞれ first, second, third と設定

注) id の後には スペースを入れずに 「id:」 とする

file

3種類 の commit

Mermaid では commit を 3種類に分けて表現することができます.

  • Normal : (デフォルト) 丸印で表す
  • Reverse : reverse commit を強調する用.丸印の中に バツ印で表す
  • Highlight : 強調したい commit がある場合に使える. 2重の四角印で表す

設定方法としては, id と同じく 「commit」 の 後に 「type: REVERSE」 のように commit typeを大文字で 入力することで設定できます!!

注) id と同じく type の後には スペースを入れず,「type:」 と入力してください

file

gitGraph
    commit id: "first"
    commit type: REVERSE
    commit id: "second" type: HIGHLIGHT
    commit id: "third" type: REVERSE

タグ の 追加

commit に対して, 情報を追加する方法は commit_id だけではありません! tagとして 各commitに残すことができます.

設定の仕方としては, ここまでに紹介してきた id や type と同じように, 「commit」 の後に 「tag: "<タグ名>"」というように <タグ名>の部分を設定したいタグ名にして追加することで設定することができます!!

例としては以下のようになります

file

gitGraph
    commit id: "first" tag: "v1.0.0"
    commit type: REVERSE tag: "bug fix"
    commit id: "third"

コメント

タイトルとURLをコピーしました