🧜♀️
Mermaid入門
はじめに
今回はダイアグラムツールのMermaidについてスキトラを行います。
対象者：Mermaid未使用者
目的：Mermaid記法で作図できるようになること
アジェンダ
- Mermaidとは
- Mermaidで作成できるダイアグラム
- ハンズオン
- まとめ
1. Mermaidとは
Mermaidとは、Markdownテキストでグラフを作成できるダイアグラムツールの１つです。
2. Mermaidで作成できるダイアグラム
Mermaidで作成できるダイアグラムの一覧です。
- フローチャート…今回のハンズオン対象
- シーケンス図
- 状態遷移図
- ER図
- ユーザージャーニー図
- ガントチャート
- 円グラフ
- 要件図
- Gitグラフ
- C4C（実験的リリース中）
- マインドマップ（実験的リリース中）
- タイムライン（実験的リリース中）
3. ハンズオン
以下の手順でハンズオン準備（VScode）を行います。
- 新しいウィンドウを開く。
- 拡張機能「Markdown Preview Enhanced」をインストールし、再起動する。
- 新しい.mdファイルを作成する（名前は任意）。
- 右クリックし、メニューの「Markdown Preview Enhanced: Open Preview to the Side」をクリックする。
ここまで問題なければ、以下のように右にプレビュー画面が表示されます。
基本的には、左の.mdファイルに以下のように
- コードブロックでmermaidを指定
- 次行で扱うダイアグラムの種類を指定
とすることで、Mermaidによるダイアグラムが表示されます。
また、中に書くコードはダイアグラムの種類によって異なります。
```mermaid
// ダイアグラムの種類を指定
// この中にMermaid記法でコードを書く
```
今回はフローチャートのみハンズオンを行います。
フローチャート
ダイアグラムの種類にフローチャートを指定する場合、graph XXまたはflowchart XXと記述します。
XXの部分は以下から指定することで、フローの方向が決まります。
| XX | 方向 |
|---|---|
| TB、TD | 上から下 |
| BT | 下から上 |
| LR | 左から右 |
| RL | 右から左 |
以下のコードで、画像のようなフローチャートが作成できます。
```mermaid
flowchart TD
subgraph 息子
a1[起床]-->a2{朝食}
a2-->|急いでいない場合|a3[テレビ視聴]-->a4[歯磨き]
a2-->|急いでいる場合|a4
a4-->a5[支度]-->a6[出発]
end
subgraph 母
b1[起床]-->b2[朝食準備]-->b3[朝食]-->b4[朝食片づけ]
end
```
基本的な書き方
- ノードのリンク(一部抜粋)
| コード | リンク線 |
|---|---|
| A-->B | 矢印 |
| A==>B | 太線矢印 |
| A-.-> | 点線矢印 |
| A---B | 線 |
| A===B | 太線 |
- 処理内容の記述方法
```mermaid
flowchart TD
A[ここに処理内容を記述]-->B
```
- ノード間リンクにコメント
```mermaid
flowchart TD
A-->|ここにコメントを記述|B
```
- ノードの図形(一部抜粋)
| コード | 図形 |
|---|---|
| A[] | 長方形 |
| A{} | ひし形 |
| A() | 角丸長方形 |
| A([]) | 楕円 |
| A(()) | 円 |
- サブグラフでグループ分け
```mermaid
flowchart TD
subgraph サブグラフ名1
A-->B
end
subgraph サブグラフ名2
C-->D
end
C-->|サブグラフ間もリンク可能|B
```
4. まとめ
Mermaidは直接Markdownキストに書くことができ、修正が簡単にできます。
コードも簡単に覚えることが可能なので、是非使ってみてください。
Discussion