図の構文

Mermaidの構文は、図を作成するために使用されます。それはそれほど難しくなく、1日で学ぶことができます。次のセクションでは、各図の種類の構文について詳しく説明します。

構文、展開、および構成がMermaid全体を構成しています。

図の例はMermaid Live Editorで見ることができ、素晴らしい練習エリアでもあります。

構文の構造

すべての図の定義は、図の種類の宣言から始まり、その後に図の定義とその内容が続くことに気付くでしょう。この宣言は、パーサーに対してコードが生成すべき図の種類を通知します。

例：以下のコードは、erDiagramの宣言で指定されたエンティティリレーションシップ図のためのものです。以下は、それに表現される異なるEntitiesの定義です。

Code:

Getting Startedセクションもmermaid構文の実用的な例を提供できます。

図の破損

一部の単語や記号を使用することに注意する必要があります、これらは図を壊す可能性があります。これらの単語や記号は少なく、特定の種類の図にのみ影響を与えることがよくあります。以下の表は継続的に更新されます。

図の破損要因	理由	解決策
コメント
%%{``}%%	ディレクティブと似ており、レンダラーを混乱させます。	コメントで%%を使用する際は、{}を避けてください。
フローチャート
'end'	"End"という単語がフローチャートやシーケンス図を壊す可能性があります。	破損を防ぐために、引用符で囲みます。
ノード内のノード	Mermaidがネストされた形状に混乱する	破損を防ぐために引用符で囲みます。

Mermaid Live Editor

図に追加してはいけないものを確認したので、Mermaid Live Editorでいじってみることができます。

構成

構成はMermaidの3番目の部分であり、展開と構文の後に続きます。これは、さまざまな展開でMermaidをカスタマイズする方法を扱います。

Mermaid図を変更・カスタマイズすることに興味がある場合は、Configurationこちらで使用可能なメソッドと値を見つけることができます。テーマも含まれています。このセクションでは、Mermaid図の動作や外観を構成するさまざまな方法を紹介します。以下は最も一般的に使用される方法で、すべてMermaidの展開方法に関連しています。

Live Editorの構成セクション

ここでは、図の動作や外観を変更するために特定の値を編集できます。

initialize()コール

MermaidがAPI経由で呼び出されるとき、または<script>タグを通じて使用されます。

ディレクティブ

図がレンダリングされる直前に、図の限制御を可能にします。フォントスタイルや色、他の美的側面を変更することができます。%%{ }%%の中に定義と共にディレクティブを渡すことができます。それは図の定義の上または下に行うことができます。

テーマ操作

テーマを変更するためのディレクティブを使用する実装。Themeは、図の色スキームを決定するMermaidの設定内の値です。

レイアウトと外観

Mermaidが図を描画する方法を再構築し、レイアウトと外観を選択するなどの新機能を有効にしました。現在、これはフローチャートと状態図でサポートされていますが、すべての図の種類に対するサポートを拡張する計画があります。

図の外観を選択する

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

利用可能な外観：

• 手描き外観：より個人的でクリエイティブなタッチのために、手描きの外観は図にスケッチのような品質をもたらします。このスタイルは、非公式の設定や、図にちょっとした個性を加えたいときに最適です。
• クラシック外観：伝統的なMermaidスタイルを好む場合、クラシック外観は多くのユーザーが馴染みのある元の外観を維持します。プロジェクト間での一貫性に優れているか、馴染みのある美学を維持したいときに適しています。

外観の選択方法：

Mermaid図コードのメタデータセクションにlookパラメータを追加することで、外観を選択できます。以下はその例です。

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

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

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

• Dagre（デフォルト）：これは、長い間Mermaidで使用されているクラシックなレイアウトアルゴリズムです。シンプルさと視覚的な明確さのバランスが取れており、ほとんどの図に適しています。
• ELK：特に大規模または複雑な図を扱う時に、より洗練されたレイアウト機能を必要とする人のために、ELK（Eclipse Layout Kernel）レイアウトは高度なオプションを提供します。重なりを減少させ、可読性を向上させるためによく最適化された配置を提供します。これはアウトオブボックスでは含まれておらず、elkサポートを希望するサイト/アプリケーションの統合時に追加する必要があります。

レイアウトアルゴリズムを選択する方法：

レイアウトアルゴリズムをMermaid図コードのメタデータセクションに直接指定できます。以下の例を見てください。

この例では、layout: elk行が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]

#### クラシックな外観でDagreレイアウトを使用する：

もう一つの例：

---
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を統合する際には、初期化コールと共に外観とレイアウトの構成を含めることができます。ここで、elkの読み込みも追加します。