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

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

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

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

flowchart LR
    A[開始] --> B[処理1] --> C[処理2] --> D[終了]

ノードの種類

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

flowchart TB
    A["四角形ノード"] --> B(("円形ノード")) --> C{"ひし形ノード"}

ノードのグループ化

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

flowchart TB
    subgraph グループ1
        A --> B
    end
    subgraph グループ2
        C --> D
    end
    グループ1 --> グループ2

クリック可能なノード

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

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

フォントアイコンの使用

MermaidはFont 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

サブグラフの折りたたみ

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

flowchart TB
    subgraph グループ
        A --> B
        B --> C
    end
    D --> グループ --> E

ダイアグラムの方向

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

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

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

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

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

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

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

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

%%{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;

まとめ

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