Mermaid記法でマークダウン(Markdown)を書いてみる


Notion や GitHub の Markdown でも対応されている [Mermaid](https://mermaid-js.github.io/mermaid/) について、紹介します。
`Mermaid` は UML を描画するためのツールで、同じようなツールとして、[PlantUML](https://plantuml.com/) があります。ゴリゴリ書くなら `PlantUML` の方が機能も豊富でリッチなことができるのですが、こちらは実行環境として Java が必要であるため、少々構築が面倒だったりします。そのため **お手軽にちょっとした UML を書くだけ** であれば、 `Mermaid` の方が良かったりします。
~~ちなみに 2022年2月時点 の Qiita では PlantUML は対応されていますが、Mermaid は未対応のようです。~~
→対応されたようです。
https://qiita.com/release-notes#2022-03-28

簡単に２つの違いになります。

|                      | Mermaid                                                                                                                                                                                                                                                                                                                                                    | PlantUML                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 実行環境             | Javascript                                                                                                                                                                                                                                                                                                                                                 | Java + Graphviz                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| 対応するダイアグラム | Flowchart / Sequence diagram / Gantt diagram / Class diagram / Git graph / Entity Relationship Diagram / User Journey Diagram                                                                                                                                                                                                                              | Sequence diagram / Usecase diagram / Class diagram / Object diagram / Activity diagram (here is the legacy syntax) / Component diagram / Deployment diagram / State diagram / Timing diagram / JSON data / YAML data / Network diagram (nwdiag) / Wireframe graphical interface (salt) / Archimate diagram / Specification and Description Language (SDL) / Ditaa diagram / Gantt diagram / MindMap diagram / Work Breakdown Structure diagram (WBS) / Mathematic with AsciiMath or JLaTeXMath notation / Entity Relationship diagram (IE/ER) |
| 公式サイト           | https://mermaid-js.github.io/mermaid/                                                                                                                                                                                                                                                                                                                      | https://plantuml.com/                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| オンラインエディタ   | [こちら>>](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpFj8FqwzAMhl9F6LRB8wI5DNqk66WwQXuLexCxUpvVsnEURkny7nM3ym7i06cf_TP20TLWeM2UHJxbI9uucdmPGmi8QFW9LQdWCFH4vsDu5RBhdDElL9dXI7uHAM18fCgM6rx8rUaa37sP4QXa7khJY7o86fk7LrDv_Kcrkf_UZS72ezdQPVDVU4aGclnjBgPnQN6WJ2cjAAbVcWCDdRktDzTd1KCRtahTsqS8t15jxhJ0G3mDNGk83aXHWvPET6n1VDqHP7j-AOb3WdI) | [こちら>>](http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

## フローチャート

個人的に見やすい書き方で書いてみます。構成は大きく以下になります。

- 宣言（まずはノードを並べる）
- リレーション（並べてたノードを矢印で繋げる）
- スタイル（ノードに色を付けたり線を太くしたり）

```
graph TD %% トップダウン（上から下に描画する）

%% 宣言
A[クリスマス]
B[買い物に行く]
C{プレゼントの選択肢}
D[ノートパソコン]
E[iPhone]
F[車]

%% リレーション
A --> B
B --> C
C --> D
C --> E
C --> F

%% スタイル
style C fill:#f9f,stroke:#333,stroke-width:4px
```

[![](https://mermaid.ink/img/pako:eNo1kU9LAkEYxr_KMOJNT3ZpD0GpnYO67XhY3NlcWmdlHSkRwZ3pkBpJEEQXoT_0H4M8aGj0YV7T7eRX6FX08vLj5Xne52GmRvO-zalBDwOrVCAHGRKPE9BnoDXoa9ANUI-g-_Px2WTYgrANqjkZtiF8m3Y6s6sRhDeg2vNxkwkm0Pnbu4-eG0xsm6A-QL-C-gLdxZljYseMPgcQns6aL-iPbs8h7OA6XVsGvYMaY9AiOuz9hcNpqxupuzoTGRP0BejxstQlqG9QqOqjM2u6ewVfcMRdMxq1cqsSi1y8hxY1AP2EYixEksktsoMtlpDG3CVk1pBdw-76ClZXP6AeQL8xUZZVj5M0cVzPM2LOppMoy8A_4kYslUqtOHns2rJgbJROaIIWeVC0XBtftsYEIYzKAi9yRg1EmztWxZOMMlFHaaVkW5JnbVf6ATUcyyvzBLUq0t-vijw1ZFDha1HGtfCjiitV_R-jcc4j)](https://mermaid-js.github.io/mermaid-live-editor/edit/#pako:eNo1kU9LAkEYxr_KMOJNT3ZpD0GpnYO67XhY3NlcWmdlHSkRwZ3pkBpJEEQXoT_0H4M8aGj0YV7T7eRX6FX08vLj5Xne52GmRvO-zalBDwOrVCAHGRKPE9BnoDXoa9ANUI-g-_Px2WTYgrANqjkZtiF8m3Y6s6sRhDeg2vNxkwkm0Pnbu4-eG0xsm6A-QL-C-gLdxZljYseMPgcQns6aL-iPbs8h7OA6XVsGvYMaY9AiOuz9hcNpqxupuzoTGRP0BejxstQlqG9QqOqjM2u6ewVfcMRdMxq1cqsSi1y8hxY1AP2EYixEksktsoMtlpDG3CVk1pBdw-76ClZXP6AeQL8xUZZVj5M0cVzPM2LOppMoy8A_4kYslUqtOHns2rJgbJROaIIWeVC0XBtftsYEIYzKAi9yRg1EmztWxZOMMlFHaaVkW5JnbVf6ATUcyyvzBLUq0t-vijw1ZFDha1HGtfCjiitV_R-jcc4j)

## 感想

フローチャート と シーケンス図 をサクッと書きたいときだけかな。Mermaid の使い所としては。現時点では。
Mermaid の [チートシート](https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/) も参考までに。