サマリ
Mermaidの基本的な記法を試してみました。
背景
社内の人が使っているのを見て、何だかかっちょいい～と思い、使ってみることにしました。
ゴール
基本的な記法について調べ、実際にフローチャートを書いてみる。
対象読者
- Mermaid記法が気になっている方
- でも始め方がわからない方
前提
必須：Mermaid対応エディタ（VSCode（要拡張機能）など）またはMermaid対応サービス（Mermaid Live Editor（公式ツール）、Qiitaなど）
実行環境
- 本Qiita記事
そもそも（Mermaidとは）
公式サイトにも記載がありました。
Mermaid lets you create diagrams and visualizations using text and code.
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
（公式サイトより引用）
テキスト記述からフローチャートやシーケンス図などのダイアグラムを動的に作成・修正できる、JavaScriptベースのオープンソースのツールとのことです。
超ざっくりいうとテキストだけで図が作れますということですね。（どーん
ちなみに、公式サイトに飛ぶと、無料版としてログインなしですぐ試せる環境もあります。（これがMermaid Live Editor）
Try Editorをクリック
OpenSourceの方をクリック
すると、さっそくエディタ画面が開いて作業が可能になります。
この画面の通り、SampleDiagramsとしてフローチャートだけでなく、ガントチャートやE-R図などなど様々なテンプレが選べます。
（便利すぎる・・
Mermaidの記述
QiitaもMermaid対応とのことで、さっそく試してみます。
2022年に対応していたんですね～
（なんと、この記事に基本的な使い方もまとまっていた。。笑
今回はフローチャートだけ試します。
基本
フローチャートに限らず、以下のように、バッククオート＋mermaidで囲むことで、ダイアグラムをかくことが出来ます。
```mermaid
```
フローチャートの場合は、
```mermaid
flowchart TD
```
のように、まずflowchartと書き、フローチャートを表現することを宣言します。
余談ですがシーケンス図は、
sequenceDiagram
ER図は
erDiagram
と頭に書きます。
詳細は公式ページを参照ください。
フローチャートの場合、flowchartの右側にTD,TB,BT,LR,RLを指定するのが一般的なようです。
（何も指定しないと上から下になりました）
| 名前 | 説明 |
|---|---|
| TD（Top-Down） | 上から下 |
| TB（Top to bottom） | 上から下 |
| BT（Bottom to top） | 下から上 |
| LR（Left to right） | 左から右 |
| RL（Right to left） | 右から左 |
また、ノード（下図の箱）については、
```mermaid
flowchart LR
hogehoge --> fugafuga
```
上記のようにhogehogeと直接テキストを記載するのももちろんOKですが、
以下のように、ID（以下ではAやB）の横にテキストを記載することで、
複数回同じノードを使う場面ではIDだけ書くことでテキストを省略することが出来ます。
（以下では、2回目のBはテキストを省略できている）
```mermaid
flowchart LR
A[hogehoge] --> B[fugafuga]
B --> C[piyopiyo]
```
メジャーな記法（ノードの形状）
ノード（箱）の形状についてです。
| 記法 | 説明 |
|---|---|
| hogehoge ※文字のみ | 長方形 |
| [hogehoge] | 長方形 |
| (hogehoge) | 丸いエッジ型 |
| ([hogehoge]) | スタジアム型 |
| [[hogehoge]] | サブルーチン型 |
| [(hogehoge)] | シリンダー型 |
| ((hogehoge)) | 円形 |
| {hogehoge} | ひし形 |
実際には以下のような形で描画されます。
- 文字のみor[]
- ()
- ([])
- [[]]
- [()]
- (())
- {}
他にも、台形や平行四辺形の形などもありますので、
気になる場合は公式ページへ…！
メジャーな記法（接続線）
| 記法 | 説明 |
|---|---|
| A-->B | 矢印リンク |
| A---B | 矢印なしリンク |
| A-- hogehoge -->B | 矢印リンク上のテキスト |
| A-->|hogehoge|B | 矢印リンク上のテキスト（同上） |
| A-- hogehoge ---B | 矢印なしリンク上のテキスト |
| A---|hogehoge|B | 矢印なしリンク上のテキスト（同上） |
| A-.->B; | 破線矢印リンク |
| A-. hogehoge .->B | 破線矢印リンク上のテキスト |
| A-.->|hogehoge|B | 破線矢印リンク上のテキスト（同上） |
| A==>B | 太線矢印リンク |
| A== hogehoge ==>B | 太線矢印リンク上のテキスト |
| A==>|hogehoge|B | 太線矢印リンク上のテキスト（同上） |
- -->
- ---
- -- 文字 --> または -->|文字|
- -- 文字 ---または ---|文字|
- -.->
- -.文字.->または-.->|文字|
- ==>
- ==文字==>または==>|文字|
実例
実際にいくつかのノードを組み合わせて記載するときは以下のようになります。
Mermaid Live Editorテンプレ
```mermaid
flowchart
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```
今まで触れた内容で書けていることがわかります。（おぉ～（お前が書いたわけじゃないだろ
この例は、TDやTBは特に記載していませんが、前述の通りデフォルトでは上から下になります。
また、Qiitaでは表示されていませんが、
Fのfa:fa-carについては、Font AwesomeというWebフォントの一種のツール用のコードになります。
（自分はFont Awesome初めて知りました、勉強不足・・）
Mermeid Live Editorでは以下のように車のアイコンが表示されます。
自分で作成
自分でも書いてみます。
```mermaid
flowchart LR
A(["開始(起床)"]) --> B[洗顔]
B --> C{お腹減ってる？}
C -->|はい| D[朝ごはん]
C -->|いいえ| E[歯磨き]
D --> E
E --> F[着替える] --> G(["終了(出勤)"])
```
おぉ～かけました。
（ちなみに、自分は起床後すぐ歯磨き派です（聞いてない））
（）をノードの中に入れたいときは中の文字ごと""で囲うと表現できます。
最後の行のように、E-->F、F-->Gが続く場合はE-->F-->Gという形で一行にまとめてしまっても問題ありません。
（したがって、もっと言うとDからGまで一行で書いてもOK）
学び・まとめ
Mermaidについて、基本的なルールと使い方について勉強しました。
テキストベースで書ける分、やっぱり修正が簡単にできるのがメリットに感じました。
今回はフローチャートだけでしたが、ほかのダイアグラムも試してみたいです！