ワンランク上のMermaid(mermaid.js)を書く

# はじめに
最近開発チームで連携するようの資料をいざ書こうとしたときに、Mermaidをちょこちょこ調べながら書きました。そのとき調べたら「ワンランク上のMermaidの書き方」をまとめます。

# Mermaidとは
Mermaidは代表的なUMLの一つです。
基本の書き方は[Mermaid公式](https://mermaid-js.github.io/mermaid/#/)を参照していただくとして、描けるグラフの種類は以下のようなものがあります。
- フローチャート図
- シーケンス図
- クラス図
- 状態遷移図
- ER図
- カスタマージャーニーマップ
- ガントチャート
- 円グラフ
- 要求図（要件図）
- Gitグラフ

また、公式で最新バージョンの書き方に対応した[ライブエディター](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNp9kdFqwyAUhl9FznXTB8hdiTIC6xwmLRS8cXq2SpNYnCmMJO8-szRbs5V5dzzffz7ldKCdQUgBPbXqzataNuT7ZLui5FsmyNCv131HKHvM90wckg2lghUFSclRvd9N9H2SuI5wQWORknOlNP5L5k97nmcsshIqq14qJK_OS7jN_PH_snjUaC9Lzzx3RPsfVLsL-gU4dW6xJC_ZNrK20VVrlmOfBae7rEyyTckeuDjMwev9l6EJyjb3Uot3zxYJzhv0aKJv-W1CYAU1-lpZE1fVjT0J4Yg1ShiDRvnTGBki156NCsiMDc5DGnyLK1BtcMVHo-d6Yq4Lny6HT96nlds)が提供されているので、以下のように図と併せて生成リンクもセットで書いておくと誰でも簡単に続きから編集できます。
```mermaid
graph LR;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
[↑の図のMermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpNzsEKwjAMxvFXGd95e4EKgtu8edJrLmGNrmjbUduDjL27USqY0w_yJ2TFFK3A4JZ4mZvTeUeh0Tl03b7_81Ddq8fq4Wu08JI8O6tX1s-GkGfxQjBKy-lOoLBpVxbLWY7W5Zhgrvx4SgsuOV5eYYLJqcgvGh3rR75W2xtRTjLV)


# ワンランク上の書き方
この記事では最近扱ったフローチャートとガントチャートで、こんな書き方あるのかと思ったものを列挙していきます。

## 1.コメントアウト
`%%`でコメントアウトが出来ます。これは全ての種類で共通する書き方です。
```
graph LR;
  A-->B;
  A-->C;
  B-->D;
  %% C-->D; ←これ
```

## 2.括弧を使う
フローチャートでステップの名前を設定するには、いくつか方法があります。
- `ステップ1`やC、Dのように最初に定義して、その後も同じ名前を使う
- `B[ステップ2]`のように内部定義名と表示名を`[]`を用いてセットで定義し、その後内部定義名を使う

ここで、括弧を表示名に用いたい場合は`D["ステップ3(D)"]`のように<font color="red">ダブルクォーテーション</font>で括ります。

```
graph LR;
C[ステップ3]
  ステップ1-->B[ステップ2];
  ステップ1-->C;
  B-->D["ステップ4(D)"];
  C-->D;
```
```mermaid
graph LR;
C[ステップ3]
  ステップ1-->B[ステップ2];
  ステップ1-->C;
  B-->D["ステップ4(D)"];
  C-->D;
```

## 3.リンクを張る
`click`を使うとステップにリンクを張ることができます。これは使っていて意外と便利です。
```
graph LR;
A[Youtube]
click A "https://youtube.com"
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
```mermaid
graph LR;
A[Youtube]
click A "https://youtube.com"
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

## 4.色を付ける
グラフの装飾は２種類紹介します。
### フローチャート
フローチャートでは以下のような書き方で、ステップの色、文字色、線の太さetc...を指定したクラスを作り、それを割り当てることができます。
```
graph LR;
classDef red fill:#ed2633,stroke:#000,stroke-width:2px,color:#fff
A:::red
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
```mermaid
graph LR;
classDef red fill:#ed2633,stroke:#000,stroke-width:2px,color:#fff
A:::red
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
### ガントチャート
ガントチャートでは、`crit`(多分criticalの意)を付けることでステップを真っ赤にして強調することができます。
```mermaid
gantt
  title A Gantt Diagram
  dateFormat  YYYY-MM-DD HH:mm
  axisFormat %H:%M

  section 処理1
  プログラムA :a1, 2022-04-01 00:00, 30m

  section 処理2
  プログラムB :crit, a2, 2022-04-01 00:30  , 15m
  プログラムC :crit, a3, after a2, 5m
```

# まとめ
初期の導入コストは少しあるものの、簡単な資料をつくるときはいわゆるパ○ポでデザインや図形の大きさ、配置を揃えたりするくらいならUMLのほうが早くデザインを統一して作図したり修正もしやすくなります。
正直エンジニアに限らず全人類まとめ資料とか作るのにUMLを活用したほうがいいと思います。（偏った思想）
GitグラフもどんどんMermaidで描きたい…

# 参考
- [Mermaid公式](https://mermaid-js.github.io/mermaid/#/)
- [Mermaid - GitHub](https://github.com/mermaid-js/mermaid)
- [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNp9kdFqwyAUhl9FznXTB8hdiTIC6xwmLRS8cXq2SpNYnCmMJO8-szRbs5V5dzzffz7ldKCdQUgBPbXqzataNuT7ZLui5FsmyNCv131HKHvM90wckg2lghUFSclRvd9N9H2SuI5wQWORknOlNP5L5k97nmcsshIqq14qJK_OS7jN_PH_snjUaC9Lzzx3RPsfVLsL-gU4dW6xJC_ZNrK20VVrlmOfBae7rEyyTckeuDjMwev9l6EJyjb3Uot3zxYJzhv0aKJv-W1CYAU1-lpZE1fVjT0J4Yg1ShiDRvnTGBki156NCsiMDc5DGnyLK1BtcMVHo-d6Yq4Lny6HT96nlds)