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