Zenn
📝

Mermaidで利用頻度が高そうな構文まとめ

2025/01/24に公開
2

はじめに

Mermaidはテキストを図表に変換できるツールです。
GithubやNotion、Zennにも対応しており、テキストの修正に動的に対応して図表に反映してくれます。
今回は業務で使用させていただく機会がありましたので、Mermaidで設計時によく利用しそうな機能に絞ってまとめてみました!
https://mermaid.js.org/

準備

Mermaidはライブエディタを通じて手軽に試すことができます。
また、VisualStudioCodeでは下記の拡張機能をインストールすることで利用可能です。
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

フローチャート

基本形

フローチャートでは初めに向きを設定し、各ノードの関連を記載します。

サンプル
flowchart LR
    1[開始] --> 2
    2{分岐} --> 3[A]
    2 --> 4[B]
    3 --> 5[終了]
    4 --> 5

詳細は下記を参照ください!
https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax

フローチャートの向き

フローチャートの向きを下記から設定できます。

宣言する値 フローチャートの向き
TB、TD 上から下
BT 下から上
RL 右から左
LR 左から右
  1. TDの場合
    サンプル
     flowchart TD;
         A-->B;
    
  2. LRの場合
    サンプル
     flowchart LR;
         A-->B;
    

ノードの形

ノードは{ノードのID}[ノード内のテキスト]の形で記載します。

  1. プロセス(デフォルト)
    サンプル
     flowchart LR;
         1[プロセス]
    
  2. イベント
    サンプル
    flowchart LR;
        1(イベント)
    
  3. サブプロセス
    サンプル
    flowchart LR;
        1[[サブプロセス]]
    
  4. データベース
    サンプル
    flowchart LR;
        1[(データベース)]
    
  5. 分岐
    サンプル
    flowchart LR;
        1{分岐}
    
  6. データ入出力
    サンプル
    flowchart LR;
        1[/データ入出力/]
        2[\データ入出力\]
    
  7. ループ
    サンプル
    flowchart LR;
        1[/ループ\]
        2[\ループ/]
    

リンク

リンクは{ノードID1}{リンク}{ノードID2}の形で記載します。

  1. デフォルト
    サンプル
    flowchart LR;
        A-->B;
        B--->C;
        C-->|テキスト|D;
    
  2. 点線
    サンプル
     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 データベース
    ユーザー->>図書館システム: 図書検索
    図書館システム->>データベース: 図書情報取得
    データベース-->>図書館システム: 検索結果
    図書館システム-->>ユーザー: 対象図書
    ユーザー->>図書館システム: 貸し出し予約
    図書館システム->>データベース: 予約状況更新
    データベース-->>図書館システム: 更新結果
    図書館システム-->>ユーザー: 予約状況

詳細は下記を参照ください!
https://mermaid.js.org/syntax/sequenceDiagram.html

参加要素

参加要素は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

詳細は下記を参照ください!
https://mermaid.js.org/syntax/entityRelationshipDiagram.html

エンティティ

エンティティには各属性に対して、型・名称・キー・コメント(""で囲った文字)を付与することができます。

サンプル
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

最後に

テキストで簡単に要素の修正ができ、レイアウトを調整してくれるのが非常に便利に感じました!
対応する図表や連携しているシステムも豊富なのでドキュメントの整備に利用できる機会も多そうです。

2
レスキューナウテックブログ

Discussion

ログインするとコメントできます