ダイアグラム構文

Mermaidの構文は、ダイアグラムを作成するために使用されます。それほど難しくなく、1日で習得できることがわかるでしょう。次のセクションでは、各ダイアグラムの種類の構文を詳しく説明します。

構文は、展開と設定とともに、Mermaid全体を構成します。

ダイアグラムの例はMermaidライブエディタで見つけることができます。練習にも最適です。

構文構造

すべての**ダイアグラムの定義は**、**ダイアグラムの種類**の宣言で始まり、次にダイアグラムとその内容の定義が続きます。この宣言により、パーサーはコードが生成するべきダイアグラムの種類を認識します。

**例:** 以下のコードは、`erDiagram`宣言で指定されたエンティティ関係図です。その後は、図に表される様々な`エンティティ`の定義が続きます。

はじめにセクションでは、Mermaid構文の実用的な例もいくつか紹介しています。

ダイアグラムの破壊

ダイアグラムを壊す可能性のある**特定の単語や記号の使用には注意する**必要があります。これらの単語や記号は少なく、多くの場合、特定の種類のダイアグラムのみに影響します。以下の表は継続的に更新されます。

ダイアグラム破壊要因	理由	解決策
コメント
%%{``}%%	ディレクティブと似ているため、レンダラーを混乱させます。	`%%`を使用したコメントでは、「{}」を使用しないでください。
フローチャート
`end`	「End」という単語は、フローチャートとシーケンス図を壊す可能性があります。	壊れるのを防ぐために、引用符で囲みます。
ノード内のノード	Mermaidは入れ子になったシェイプを誤って解釈します。	壊れるのを防ぐために、引用符で囲みます。

Mermaidライブエディタ

これで、ダイアグラムに追加しないものを確認できたので、Mermaidライブエディタで自由に試すことができます。

設定

設定は、展開と構文に続くMermaidの3番目の部分です。Mermaidを様々な展開環境でカスタマイズできる様々な方法を扱います。

Mermaidダイアグラムの変更とカスタマイズに興味がある場合は、設定で使用できるメソッドと値をここで見つけることができます。テーマを含みます。このセクションでは、Mermaidダイアグラムの動作と外観を設定する様々な方法を紹介します。以下は最も一般的に使用される方法であり、すべてMermaidの展開方法に関連付けられています。

ライブエディタの設定セクション。

ここでは、特定の値を編集して、ダイアグラムの動作と外観を変更できます。

initialize()呼び出し

MermaidがAPI経由、または<script>タグを介して呼び出される場合に使用されます。

ディレクティブ

ダイアグラムがレンダリングされる直前に、ダイアグラムの限定的な再構成を可能にします。ダイアグラムのフォントスタイル、色、その他の美的側面を変更できます。`%%{ }%%`内で定義と一緒にディレクティブを渡すことができます。ダイアグラム定義の上または下に配置できます。

テーマ操作

ディレクティブを使用してテーマを変更するアプリケーションです。`Theme`は、ダイアグラムの色を決定するMermaidの設定内の値です。

レイアウトと外観

Mermaidのダイアグラムのレンダリング方法を再構成し、レイアウトと外観の選択などの新機能を有効にしました。**現在、これはフローチャートと状態図でサポートされています**が、すべてのダイアグラムの種類にサポートを拡大する予定です。

ダイアグラムの外観の選択

Mermaidでは、ダイアグラムのスタイルまたは「外観」を多様に提供しており、特定のニーズや好みに合わせて視覚的な外観を調整できます。手描きスタイルやクラシックスタイルのどちらを好む場合でも、ダイアグラムを簡単にカスタマイズできます。

利用可能な外観

• 手描き風: より個人的で創造的なタッチのために、手描き風の外観はダイアグラムにスケッチのような品質をもたらします。このスタイルは、非公式な設定や、ダイアグラムに個性を持たせたい場合に最適です。
• クラシック風: 従来のMermaidスタイルを好む場合は、クラシック風を使用すると、多くのユーザーが使い慣れている元の外観を維持できます。プロジェクト全体で一貫性を保つ必要がある場合、または使い慣れた美観を維持したい場合に最適です。

外観の選択方法

Mermaidダイアグラムコードのメタデータセクションにlookパラメーターを追加して、外観を選択できます。例を以下に示します。

レイアウトアルゴリズムの選択

ダイアグラムの外観をカスタマイズすることに加えて、Mermaid Chartでは、より複雑な構造を扱う場合に、ダイアグラムをより適切に整理して提示するための様々なレイアウトアルゴリズムを選択できるようになりました。レイアウトアルゴリズムは、ノードとエッジがページ上にどのように配置されるかを決定します。

サポートされているレイアウトアルゴリズム:

• Dagre（デフォルト）: これは、長年にわたってMermaidで使用されてきた従来のレイアウトアルゴリズムです。シンプルさと視覚的な明瞭さのバランスが優れているため、ほとんどのダイアグラムに最適です。
• ELK: 特に大規模または複雑なダイアグラムを扱う際に、より高度なレイアウト機能を必要とするユーザー向けに、ELK（Eclipse Layout Kernel）レイアウトは高度なオプションを提供します。より最適化された配置を提供し、重なりを減らし、可読性を向上させる可能性があります。これは標準では含まれていませんが、elkのサポートが必要なサイト/アプリケーションにMermaidを統合する際に追加する必要があります。

レイアウトアルゴリズムの選択方法:

Mermaidダイアグラムコードのメタデータセクションで、レイアウトアルゴリズムを直接指定できます。例を以下に示します。

この例では、`layout: elk`行により、手描き風とforestテーマと共にELKレイアウトアルゴリズムを使用するようにダイアグラムが設定されます。

ELKレイアウトのカスタマイズ:

ELKレイアウトを使用する場合は、ノードの配置方法や平行エッジを結合するかどうかなど、ダイアグラムの設定をさらに調整できます。

• 平行エッジを結合するには、`mergeEdges: true | false`を使用します。
• ノードの配置を設定するには、次のオプションを使用して`nodePlacementStrategy`を使用します。
  • SIMPLE
  • NETWORK_SIMPLEX
  • LINEAR_SEGMENTS
  • BRANDES_KOEPF（デフォルト）

設定例

---
config:
  layout: elk
  elk:
    mergeEdges: true
    nodePlacementStrategy: LINEAR_SEGMENTS
---
flowchart LR
  A[Start] --> B{Choose Path}
  B -->|Option 1| C[Path 1]
  B -->|Option 2| D[Path 2]

#### Using Dagre Layout with Classic Look:

別の例

---
config:
  layout: dagre
  look: classic
  theme: default
---

flowchart LR
A[Start] --> B{Choose Path}
B -->|Option 1| C[Path 1]
B -->|Option 2| D[Path 2]

これらのオプションにより、見た目だけでなく、データの構造と流れに最適な配置のダイアグラムを作成できます。

Mermaidを統合する際には、initialize呼び出しで外観とレイアウトの設定を含めることができます。elkの読み込みを追加する場所でもあります。