【Mermaid】ダイアグラム作成の詳細 - 高度なカスタマイズと実例

【Mermaid】ダイアグラム作成の詳細 - 高度なカスタマイズと実例

2024-08-18

2024-08-18

Mermaidは、フローチャートやシーケンス図、ガントチャートなど、さまざまなダイアグラムを簡単に作成できる強力なツールです。このガイドでは、Mermaidの基本的な使い方から、高度なカスタマイズ方法までを詳しく説明します。

基本的なMermaid構文とノードの接続

Mermaidを使う際の基本は「ノードの接続」です。ノード同士を様々な線で接続することで、フローチャートを構成します。

flowchart LR
    A[開始] --> B[処理1] --> C[処理2] --> D[終了]
%%{init: {'theme':'neutral'}}%% flowchart LR A[開始] --> B[処理1] --> C[処理2] --> D[終了]

ノードの種類

Mermaidでは、四角形や円、ひし形など、さまざまな形のノードを使うことができます。

flowchart TB
    A["四角形ノード"] --> B(("円形ノード")) --> C{"ひし形ノード"}
%%{init: {'theme':'neutral'}}%% flowchart TB A["四角形ノード"] --> B(("円形ノード")) --> C{"ひし形ノード"}

ノードのグループ化

ノードをグループ化して、複雑なチャートを構成することも可能です。

flowchart TB
    subgraph グループ1
        A --> B
    end
    subgraph グループ2
        C --> D
    end
    グループ1 --> グループ2
%%{init: {'theme':'neutral'}}%% flowchart TB subgraph グループ1 A --> B end subgraph グループ2 C --> D end グループ1 --> グループ2

クリック可能なノード

ノードをクリック可能にし、特定のアクション(リンクや関数の呼び出し)に結びつけることができます。

flowchart LR
    A[クリック可能なノード]
    click A href "https://example.com" "ツールチップ" _blank
%%{init: {'theme':'neutral'}}%% flowchart LR A[クリック可能なノード] click A href "https://example.com" "ツールチップ" _blank

フォントアイコンの使用

MermaidFont Awesomeのアイコンと連携して、ノードにアイコンを追加することも可能です。

flowchart LR
    A["fa:fa-twitter Twitter"] --> B["fa:fa-github GitHub"]

複数の線のスタイルと接続

ノード間に複数の線を引くことができ、線の種類やスタイルも変更できます。

flowchart LR
    A --> B
    A === B
    A -.-> B
    B o--o C
%%{init: {'theme':'neutral'}}%% flowchart LR A --> B A === B A -.-> B B o--o C

サブグラフの折りたたみ

サブグラフを折りたたみ可能にすることで、より整理されたチャートを作成できます。

flowchart TB
    subgraph グループ
        A --> B
        B --> C
    end
    D --> グループ --> E
%%{init: {'theme':'neutral'}}%% flowchart TB subgraph グループ A --> B B --> C end D --> グループ --> E

ダイアグラムの方向

フローチャートの方向を設定するには、flowchartの横にTB(上から下)やLR(左から右)などの指定を行います。

flowchart LR
    A --> B --> C
%%{init: {'theme':'neutral'}}%% flowchart LR A --> B --> C

他のテーマのスタイルはこちらから確認できます。

具体例 フローチャートのカスタマイズ

複雑な決定ツリー

複雑な条件分岐のあるフローチャートも簡単に作成できます。

graph TD
    A[開始] --> B{条件1}
    B -->|Yes| C[処理1]
    B -->|No| D{条件2}
    C --> E[終了]
    D -->|Yes| F[処理2]
    D -->|No| G[処理3]
    F --> E
    G --> E
%%{init: {'theme':'neutral'}}%% graph TD A[開始] --> B{条件1} B -->|Yes| C[処理1] B -->|No| D{条件2} C --> E[終了] D -->|Yes| F[処理2] D -->|No| G[処理3] F --> E G --> E

サブグラフを含むフローチャート

フローチャート内にサブグラフを含めることも可能です。

graph TB
    subgraph サブグラフ1
        A1 --> A2
    end
    subgraph サブグラフ2
        B1 --> B2
    end
    A[開始] --> サブグラフ1 --> B[終了]
%%{init: {'theme':'neutral'}}%% graph TB subgraph サブグラフ1 A1 --> A2 end subgraph サブグラフ2 B1 --> B2 end A[開始] --> サブグラフ1 --> B[終了]

ダイアグラムのテーマとスタイル

Mermaidにはテーマ機能があり、デザインを簡単に変更できます。テーマの設定には、%%{init: {'theme':'dark'}}%%のようなディレクティブを使用します。

%%{init: {'theme':'forest'}}%%
flowchart LR
    A --> B --> C
%%{init: {'theme':'neutral'}}%% %%{init: {'theme':'forest'}}%% flowchart LR A --> B --> C

その他のテーマについては、下記を参照ください。

線のカーブやノード間の距離の調整

線のカーブを変更するには、flowchartのオプションにcurveを指定します。また、ノード間の距離はnodeSpacingrankSpacingで調整可能です。

%%{init: { 'flowchart': { 'curve': 'basis', 'nodeSpacing': 50, 'rankSpacing': 100 } } }%%
flowchart LR
    A --> B --> C
%%{init: {'theme':'neutral'}}%% %%{init: { 'flowchart': { 'curve': 'basis', 'nodeSpacing': 50, 'rankSpacing': 100 } } }%% flowchart LR A --> B --> C

ノードの個別スタイル設定

ノードごとにスタイルを変更する場合は、styleディレクティブを使用します。

graph LR
    A --> B --> C
    style B fill:#f9f,stroke:#333,stroke-width:2px;
    style C fill:#f66,stroke:#000,stroke-width:4px;
%%{init: {'theme':'neutral'}}%% graph LR A --> B --> C style B fill:#f9f,stroke:#333,stroke-width:2px; style C fill:#f66,stroke:#000,stroke-width:4px;

まとめ

Mermaidは、直感的な構文で複雑なダイアグラムを簡単に作成できる強力なツールです。カスタマイズ性も高く、様々なニーズに対応できます。ダイアグラムの方向、スタイル、テーマ、ノード間の距離などを自由に調整し、プロジェクトのニーズに合った美しい視覚表現を実現してみてください。

Recommend