Mermaid 記法まとめ1 flowchart&GitGraph

初めに

フローチャートを書きたいと思い、Qiitaにも書けるMermaidについてまとめた。
今回はflowchart,GitGraphについてまとめる。

Mermaid とは

テキストベースで表やグラフを作成できるJSベースのツール。
QiitaやGitHubにも埋め込める。

公式ページ

タイトル

グラフのタイトルを作成

---
title: hoge
---

コメントアウト

%% テキスト

それ以降の文字をコメントアウトする。

flowcart

flowchart

フローチャートを作成する
公式ドキュメント

初めにflowchartと指定する。

ノード

id[テキスト]

["テキスト"]でUnicode,["`テキスト`"]でマークダウン形式が記述できる。
また、囲む[],(),{}で形を変えられる。

ノードの種類

使用できる形は

• ()角の丸い四角形
• ([])丸い四角形
• [[]]二重四角形
• [()]円柱
• (())円
• >]　旗型
• {}ひし形
• {{}} 六角形
• [//]ひし形
• [\\]ひし形
• [/\]台形
• [\/]台形
• ((()))二重丸

id@{shape: type}でほかの形も使用できる。

例

flowchart
id1["test"]
id2("test2")
id3{"test3"}
id4[("test4")]
id5(["test5"])

接続

id --> id2

-->でノードとノードを接続できる。
flowchart宣言時に接続する向きを指定できる。

• TB/TD - 上から下
• BT - 下から上
• RL - 右から左
• LR - 左から右

また、-- テキスト -->で矢印内にテキストを挿入できる。

flowchart TD
    Start --> Stop

flowchart LR 
    Start -- Hello --> Stop

接続の種類

矢印以外にも接続時の見た目がある。

• -- テキスト -- 　直線
• -. .-点線
• -. テキスト .-> 点矢印
• == テキスト ==>　太い矢印
• ~~~表示なし
• --o 丸線
• --x　×マーク

両端を矢印にすることも可能。

サブグラフ

subgraph title
    graph definition
end

グラフをグループ化できる。
サブグラフの中にサブグラフを定義することや、他のサブグラフのノードと接続することも可能。

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

リンク

click id "url"

ノードにリンクを紐付けられる。
クリックするとページが表示される。

flowchart 
    hoge["myPage"]
    click hoge "https://K10-K10.github.io" "

その他

矢印を直線的に

flowchart LR
    A e1@==> B
    A e2@--> C
    e1@{ curve: linear }
    e2@{ curve: natural }

ノードのスタイルを変更

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

GitGraph

Gitのブランチやflowの説明のための図を作成できる。

公式ドキュメント
初めにgitGraphを指定する。

コミット

commit

コミットを追加する。
各コミットにはランダムなIDが割り振られる。
また、指定がない場合にはmainブランチにコミットされる。

    gitGraph
       commit
       commit
       commit

ブランチの変更

branch 名前

ブランチを作成する。
それ以降のコミットはそのブランチ上にコミットされる。
変更するには

checkout 名前

mergeも可能

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

IDの変更

commit id: "ID"

コミットのIDを変更する。

    gitGraph
       commit id: "test"
       commit id: "test2"
       commit id: "test3"

その他

###　コミットタイプの変更

commit type: 種類

コミットの種類を変更できる。
NORMAL、REVERSE、HIGHLIGHTいずれかを指定できる。

gitGraph
   commit id: "Normal" type:NORMAL
   commit id: "Reverse" type: REVERSE
   commit id: "Highlight" type: HIGHLIGHT

タグの指定

commit tag: "タグ"

コミットにタグを指定できる。

gitGraph
    commit
    commit tag:"v1.0.0"
    commit
    commit tag:"v1.0.1"

終わりに

今後ほかの図についてもまとめるかも。
~Thank you for reading~