【GitHub】Mermaid 記法

GitHub で簡単な図やワークフローなどを共有したい時、画像アップロードなしで Mermaid 記法を用いて簡単に共有

Mermaid 記法とは？

こんばんは、しがないエンジニアです。先日 GitHub で Mermaid がサポートされました。今回は「Mermaid ってどんなものなの？便利なの？」という疑問を持つ人向けです。詳細設計などに携わった人であれば PluntUML を使用したことがあると思いますが、シーケンス図も描くこともできます。

線が埋もれている部分もありますが、工夫次第で上手く行きそうです。

書き方が分かると GitHub コメントや Markdown 上で下記のような図も記載できるようになります。

AWS

余談となりますが、 AWS は世界シェア世界1位のクラウドサービスであり、多くの現場で採用されています。AWS の資格はフリーランスエンジニアにとって、重要なアピールポイントになりますので、所持していない人は AWS 資格取得も考えてみましょう。

【合格体験記】AWS SAA-C02

そして、下記がコメント本文です。

```mermaid
%%{init: 
    {
        'theme': 'base', 
        'themeVariables': 
        {
             'primaryColor': '#dddddd',
             'darkMode': false,
             'lineColor': '#888888',
             'textColor': '#666666',
             'primaryBorderColor':'#666666',
             'secondaryBorderColor':'#666666',
             'tertiaryBorderColor':'#666666',
             'fontSize': '12px'
        }
    }
}%%
graph LR

subgraph ap-northeast-1
s3[Terraform<br>Backend S3]

subgraph vpc


subgraph sub_pub[public<br>subnet]
2pub[EC2]
nat[NAT<br>Gateway]
end
style sub_pub fill:#8eff8e



subgraph sub_prt[protected<br>subnet]
2prt[EC2]
end
style sub_prt fill:#ffff7f



subgraph sub_prv[private<br>subnet]
2prv[EC2]
end
style sub_prv fill:#ffa3d1


subgraph sub_vpce[vpc-endpoint<br>subnet]
vpces[VPC Endpoint<br>ssm]
vpcess[VPC Endpoint<br>ssmmessage]
vpcee[VPC Endpoint<br>ec2message]
end
style sub_vpce fill:#bcbcff

igw(Internet<br>Gateway)
end
style vpc fill:#bcddff


end

itn((Internet))

nat --> igw
igw --> itn
2pub --> igw
2prt --> nat

2prv -.- vpces
2prv -.- vpcess
2prv -.- vpcee
2pub -.- vpces
2pub -.- vpcess
2pub -.- vpcee
2prt -.- vpces
2prt -.- vpcess
2prt -.- vpcee



```

上記の記載例を見て下さい。線などが入り組んでいるような、割と複雑な図を描きたい場合、まずはノードのみを記載すると書きやすいです。

そして、その後で線を繋げます。

ノード

図中に表示されている物体一つ一つをノードと呼びます。

上図で言えば、例えば「EC2」です。

Mermaid 記法の紹介

graph 編

以下 Mermaid 記法の一例を紹介します。

グラフの種類

TB (Top Bottom) [TD も同様]

上から下へ流れていく図

```mermaid
graph TB;
    1-->2;
```

BT (Bottom Top)

下から上へ流れていく図

```mermaid
graph BT;
    1-->2;
```

RL (Right Left)

右から左へ流れる図

```mermaid
graph RL;
    1-->2;
```

LR (Left Right)

左から右へ流れる図

```mermaid
graph LR;
    1-->2;
```

ノードと形

graph 記法

Mermaid の graph 記法は、一個一個のノードが基本的には

識別 ID [画面上に表示する文字]

の形になっています。後でノード同士を線で繋ぐ時に使用するのが「識別ID」です。なので、識別 ID は被らなく、一意に決まるもので命名しましょう。

id のみノード

id のみだとデフォルトの四角となります。

あまりにも単純な図で無い限り、id のみでのノード作成は避けたほうがよいです。

```mermaid
graph LR;
    id;
```

ノード

通常の四角いノード

id を割り当て、その隣が表示テキスト部分となります。Html の改行タグである <br> をテキスト部分に挿入することで改行も可能です。

```mermaid
graph LR;
    id[You can write letters here.<br>Line breaks can also be inserted.]
```

角丸ノード

```mermaid
graph LR;
    id(You can write letters here.<br>Line breaks can also be inserted.)
```

丸ノード

まん丸のノード

```mermaid
graph LR;
    id((You can write letters here.<br>Line breaks can also be inserted.))
```

DB ノード

データベース図でよく用いられる形

```mermaid
graph LR;
    id[(You can write letters here.<br>Line breaks can also be inserted.)]
```

条件分岐ノード

if などの条件分岐でよく用いられる形

```mermaid
graph LR;
    id{You can write letters here.<br>Line breaks can also be inserted.}
```

接続線

矢印

```mermaid
graph LR;
    1-->2
```

線

```mermaid
graph LR;
    1---2
```

テキスト付きの線

```mermaid
graph LR;
    1-- TEXT AREA ---2
```

破線

```mermaid
graph LR;
    1 -.- 2
```

gantt 編

簡単なガントチャートも描けます。赤線は本日の日付です。

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title       ガントチャートタイトル
    excludes    weekends

    section A section
    %% コメントもかけます
    要件定義     :done,    des1, 2022-03-01,2022-03-05
    基本設計     :active,  des2, 2022-03-07, 5d
    詳細設計     :         des3, after des2, 5d
    実装・テスト :         des4, after des3, 20d
```

pie 編

円グラフです。Pie chart と言ったほうが分かりやすいでしょうか。

```mermaid
pie title テレワークについて
    "賛成" : 519
    "反対" : 312
    "どちらともいえない" : 80
```

sequenceDiagram 編

PluntUML などでよく描かれるシーケンス図も描けてしまいます。

```mermaid
sequenceDiagram
    田中->>鈴木: うわー久しぶり！元気だった！？
    activate 鈴木
   鈴木->>鈴木: （うーん、誰だっけ、、、）
    鈴木->>田中: そりゃもうめっちゃ元気よ！
    deactivate 鈴木
```

まとめ

いかがでしたか。GitHub でコメント上でやりとりをする際、フローの説明などする時は気軽に分かりやすく説明することができるようになりました。現場で実際に GitHub を使用している方は、ちょっとしたやりとりで使ってみて下さいね。