Mermaidで利用頻度が高そうな構文まとめ
はじめに
Mermaidはテキストを図表に変換できるツールです。
GithubやNotion、Zennにも対応しており、テキストの修正に動的に対応して図表に反映してくれます。
今回は業務で使用させていただく機会がありましたので、Mermaidで設計時によく利用しそうな機能に絞ってまとめてみました!
準備
Mermaidはライブエディタを通じて手軽に試すことができます。
また、VisualStudioCodeでは下記の拡張機能をインストールすることで利用可能です。
フローチャート
基本形
フローチャートでは初めに向きを設定し、各ノードの関連を記載します。
flowchart LR
1[開始] --> 2
2{分岐} --> 3[A]
2 --> 4[B]
3 --> 5[終了]
4 --> 5
詳細は下記を参照ください!
フローチャートの向き
フローチャートの向きを下記から設定できます。
宣言する値 | フローチャートの向き |
---|---|
TB、TD | 上から下 |
BT | 下から上 |
RL | 右から左 |
LR | 左から右 |
- TDの場合サンプル
flowchart TD; A-->B;
- LRの場合サンプル
flowchart LR; A-->B;
ノードの形
ノードは{ノードのID}[ノード内のテキスト]の形で記載します。
- プロセス(デフォルト)サンプル
flowchart LR; 1[プロセス]
- イベントサンプル
flowchart LR; 1(イベント)
- サブプロセスサンプル
flowchart LR; 1[[サブプロセス]]
- データベースサンプル
flowchart LR; 1[(データベース)]
- 分岐サンプル
flowchart LR; 1{分岐}
- データ入出力サンプル
flowchart LR; 1[/データ入出力/] 2[\データ入出力\]
- ループサンプル
flowchart LR; 1[/ループ\] 2[\ループ/]
リンク
リンクは{ノードID1}{リンク}{ノードID2}の形で記載します。
- デフォルトサンプル
flowchart LR; A-->B; B--->C; C-->|テキスト|D;
- 点線サンプル
flowchart LR; A-.->B; B-..->C; C-.->|テキスト|D;
サブグラフ
サブグラフを使用することで、各機能やシステムごとのまとまりを明示することができます。
flowchart TD;
subgraph A
A1-->A2
end
subgraph B
B1-->B2
end
subgraph C
C1-->C2
end
A2-->B
A2-->C1
シーケンス図
基本形
シーケンスではparticipantまたはactorで参加要素を宣言し、各要素が実行するプロセスの相互作用を記載します。
sequenceDiagram
actor ユーザー
participant 図書館システム
participant データベース
ユーザー->>図書館システム: 図書検索
図書館システム->>データベース: 図書情報取得
データベース-->>図書館システム: 検索結果
図書館システム-->>ユーザー: 対象図書
ユーザー->>図書館システム: 貸し出し予約
図書館システム->>データベース: 予約状況更新
データベース-->>図書館システム: 更新結果
図書館システム-->>ユーザー: 予約状況
詳細は下記を参照ください!
参加要素
参加要素はactor(人型)、participant(長方形)から選択できます。
各参加要素は{識別子}as{ラベル}とすることで識別子を付与することもできます。
sequenceDiagram
actor U as ユーザー
participant S as システム
U->>S: 操作
S-->>U: 結果
メッセージ
メッセージは現時点で下記が用意されています。
タイプ | 説明 |
---|---|
-> | 矢印なしの実線 |
--> | 矢印なしの点線 |
->> | 矢印付きの実線 |
-->> | 矢印付きの点線 |
<<->> | 双方向矢印付きの実線 |
<<-->> | 双方向矢印付きの点線 |
-x | 端に十字がある実線 |
--x | 点線と十字の線 |
-) | 端に開いた矢印がある実線 (非同期) |
--) | 端に開いた矢印がある点線 (非同期) |
sequenceDiagram
actor U as ユーザー
participant S as システム
U->S: メッセージ1
S-->U: メッセージ2
U->>S: メッセージ3
S-->>U: メッセージ4
U<<->>S: メッセージ5
S<<-->>U: メッセージ6
U-xS: メッセージ7
S--xU: メッセージ8
U-)S: メッセージ9
S--)U: メッセージ10
注記
注記はNote{注記の位置}:{注記に表示したいテキスト}を記載します。
sequenceDiagram
actor U as ユーザー
participant S as システム
U->>S: メッセージ1
Note left of U: 注記1
Note right of U: 注記2
Note over U: 注記3
Note over U, S: 注記4
S-->>U: メッセージ2
ループ
ループはloop {ループ条件}...endの形で記載します。
sequenceDiagram
actor U as ユーザー
participant S as システム
loop ループ条件
U->>S: メッセージ1
end
分岐
分岐はalt(opt) {分岐条件}...endの形で記載します。
sequenceDiagram
actor U as ユーザー
participant S as システム
alt 条件A
U->>S: メッセージ1
else 条件B
U->>S: メッセージ2
end
opt 条件C
U->>S: メッセージ3
end
並列実行
並列実行はpar {並列処理内容}...endの形で記載します。
sequenceDiagram
actor U as ユーザー
participant S1 as システム1
participant S2 as システム2
participant S3 as システム3
U->>S1: メッセージ1
par 並列処理1
S1->>S2:メッセージ2
and 並列処理2
S1->>S3: メッセージ3
end
break
中断はbreak {中断条件}...endの形で記載します。
sequenceDiagram
actor U as ユーザー
participant S as システム
U->>S: メッセージ1
break 中断条件
U->>S: メッセージ2
end
U->>S: メッセージ3
ER図
基本形
erDiagram
USER {
int user_id PK
string name
string email
string phone_number
}
BOOK {
int book_id PK
string title
string author
string isbn_code
}
LEND {
int lend_id PK
int user_id FK
int book_id FK
date lend_date
date return_date
}
USER ||--o{ LEND: user_id
BOOK ||--o{ LEND: book_id
詳細は下記を参照ください!
エンティティ
エンティティには各属性に対して、型・名称・キー・コメント(""で囲った文字)を付与することができます。
erDiagram
Entity1 {
int id PK "主キー"
int id2 FK "外部キ"
int id3 UK "ユニークキー"
string name
string email
datetime create_date
}
関連
各エンティティの関連は下記で表現します。
左 | 右 | 関連 |
---|---|---|
|o | o| | 0..1 |
|| | || | 1 |
}o | o{ | * |
}| | |{ | 1..* |
erDiagram
Entity1|o--o| Entity2 : Relation1
Entity1||--|| Entity3 : Relation2
Entity1}o--o{ Entity4 : Relation3
Entity1}|--|{ Entity5 : Relation4
最後に
テキストで簡単に要素の修正ができ、レイアウトを調整してくれるのが非常に便利に感じました!
対応する図表や連携しているシステムも豊富なのでドキュメントの整備に利用できる機会も多そうです。
Discussion