2021年末に Notionにも対応した Mermaidについてこのブログでは紹介してきました！今回の記事ではmermaidで表現できる図の一つである「Gitgraph」についてまとめていきます！
他のmermaidで作れる図についての解説はこちらから！
Markdown で フローチャートの作り方 入門編 (Mermaid)
先日、NotionにもMermaid(マーメイド) が対応されるようになりました！この対応によって、図がMarkdownで書くことができるようになりましたが、どうやって書いていけばよいのか？といったところについては説明できていなかったの...
ai-research-collection.com
2022.01.23
ガントチャート の 作り方 : 入門編！ (Mermaid)
2021年末に Notionにも対応した Mermaidについてこのブログでは紹介してきました！今回の記事ではmermaidで表現できる図の一つである「ガントチャート」についてまとめていきます！他のmermaidで作れる図についての解説...
ai-research-collection.com
2022.03.22
Gitgraph
GitGraph とは？
Git の コミットや ブランチを切った後の流れなど を下のように図示できます！
開発の流れを簡単に図にしたいときに使えそうです！！
GitGraph 対応のコマンド
Mermaid では， 基本的には 次の 4つのコマンドに対応していて， 上の図では その4つを用いて図を作っています！
- commit : 現在のブランチへの新しいコミット
- branch : 新しいブランチを作成し、現在のブランチとして設定
- checkout : 既存のブランチをチェックアウトし、現在のブランチとして設定
- merge : 既存のブランチを現在のブランチにマージする
サンプルコード
上で図示した GitGraph は このように書いています！
この後では， 一つずつ意味について解説していきます！！
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
merge develop
commit1行目 : gitGraph
gitGraph を描くことの宣言文.
(ガントチャートを描きたい時は, gantt となったりします)
2,3 行目 : commit
現在の main ブランチに対して commit をしていきます
(デフォルトでは， ランダムに commit_id は 割り振られていきます)
4行目 branch
新しいブランチ "develop" を 作成して， ブランチを切り替える
(この段階では， commit されていないので， 図としては交わっていない)
5,6,7行目 commit
新しいブランチ "develop" に 切り替わっているので， 新ブランチに commit を行う
8行目 checkout
ブランチを切り替えるだけの場合は checkout を使います！
今回は main に切り替えたいので， checkout main
9行目 merge
main ブランチに develop ブランチ をマージする
10行目 commit
8行目のcheckout で 現在のブランチは main に戻っているので， mainブランチに commit
コメント