Mermaid.js の Git コミット図が正式版になった

no extension

先日 mermaid 9.0.0 がリリースされたが gitGraph がアルファ版から昇格したようだ。

Moving the gitGraph from experimental alpha status to a fully supported diagram type which handles theming and directives. The grammar has changed slightly from the alpha version, and no longer supports reset operations and some internal fast-forwarding has been removed for simplicity. Some few GitGraphs based on the alpha version might break with the update. This is the reason for the major version number update.

詳しい使い方は

を参照してもらうとして，たとえば

%%{init: { 'gitGraph': {'mainBranchName': 'main','showCommitLabel': false}} }%%
gitGraph
    commit tag:"v1.0.0" type:REVERSE
    branch featureA
    commit
    checkout main
    branch hotfix
    commit
    commit type: HIGHLIGHT
    checkout main
    merge hotfix
    commit tag:"v1.0.1"
    checkout featureA
    merge hotfix
    commit type: HIGHLIGHT
    checkout main
    merge featureA
    commit tag:"v1.1.0"

などと書けば

%%{init: { 'gitGraph': {'mainBranchName': 'main','showCommitLabel': false}} }%% gitGraph commit tag:"v1.0.0" type:REVERSE branch featureA commit checkout main branch hotfix commit commit type: HIGHLIGHT checkout main merge hotfix commit tag:"v1.0.1" checkout featureA merge hotfix commit type: HIGHLIGHT checkout main merge featureA commit tag:"v1.1.0"

と展開される1。 何故かマージに対してタグが打てないが，まぁいいか。 Git 操作手順に近い感じで記述していけばグラフ化してくれるのがいい感じだよね。

個人的には縦向きに対応して欲しいところである。 でも，まずはめでたい！

  1. ちなみに mainBranchName の既定値は main なので，本来は 'mainBranchName':'main' と明示しなくても大丈夫。 ↩︎