はじめに
こんにちは。
最近、GitLabで資料作成をする機会がありました。
GitLabにフロー図を書きたかったのですが「Office製品で書いて画像として入れる？」など考えましたが面倒です。
もし、画像を更新することになったら、修正→画像化→GitLabに挿入と色々段取りが必要でとにかく手間がかかります。
何か方法がないかと調べていたところMermaid Markdownの存在を知りました。
Mermaid Markdown初挑戦だったので最初は違和感がありましたが、慣れてくればけっこうラクです。
私と同じような悩みを持っている人の参考と自分自身の備忘録も兼ねて記事を書きます。
環境準備
今回は環境準備に関する詳しい記載は割愛します。
色々な方法がありますが、VS Codeをインストールし、拡張機能「Markdown Preview Mermaid Support」をインストールするのが一番手っ取り早いかと思います。
基本形
```mermaid
ここにMermaid記法を記入する。
```
コード例
```mermaid
flowchart TB
A[起床] --> B[顔を洗う] -->
C{眠い?} -- 眠くない --> D[朝食を食べる]
C{眠い?} -- 眠い --> E[二度寝する] -- 起きる --> C{眠い?}
D[朝食を食べる] -->
F[歯を磨く] -->
G((やっぱり寝る))
```
出力結果
オプションまとめ
コードの記載内容によってフロー図の向き、図形、矢印など変えることができます。
フロー図の向き
「flowchart xx」の「xx」の部分に入れるものによってフロー図の向きを変えられます。
```mermaid
flowchart xx ←ここのxxを編集する。
A[ノード1] --> B[ノード2] --> C[ノード3]
```
オプションまとめ
| flowchart xx | 方向 |
|---|---|
| TBまたはTD | 上から下 |
| BT | 下から上 |
| LR | 左から右 |
| RL | 右から左 |
出力例
線の種類
各ノードをどのように記載するかで線の種類を変えられます。
```mermaid
flowchart TB
A[ノード1] --> B[ノード2] --> C[ノード3]
↑
ここの「-->」を編集する。
```
オプションまとめ
| コード | 種類 |
|---|---|
| A-->B | 実線 矢印 |
| A==>B | 太線 矢印 |
| A-.->B | 点線 矢印 |
| A---B | 実線 |
| A===B | 太線 |
出力例
ノードの形
ノードの内容を何で囲むかでノードの形を変えられます。
```mermaid
flowchart TB
A[ノード1] --> B[ノード2] --> C[ノード3]
↑ ↑
ここの[ ]を編集する。
```
オプションまとめ
| コード | 種類 |
|---|---|
| A[] | 長方形 |
| A{} | ひし形 |
| A() | 長方形(角が丸い) |
| A([]) | 楕円 |
| A(()) | 円 |
出力例
おわりに
最後まで読んでいただきありがとうございました。
今回はフロー図を中心に記事にしましたが、他にもシーケンス図や円グラフも色々な図形が書けるようなので、機会があれば記事にしようと思います。
おまけですが、コードブロックの中に「```」を書きたいときは「~~~ 」で囲めばできることを初めて知りました。こういった発見もあるので、知識のアウトプット作業って大事なのだと改めて実感しました。