ディレクティブ

警告

ディレクティブはv10.5.0から非推奨です。設定を渡すには、frontmatterで`config`キーを使用してください。詳細は設定を参照してください。

ディレクティブ

ディレクティブは、適用された設定を変更することで、レンダリング前にダイアグラムの外観を変更する機能をダイアグラム作成者に提供します。

ディレクティブを持つことの重要性は、ダイアグラムの作成中にそれらを利用でき、デフォルトのグローバル設定とダイアグラム固有の設定を変更できることです。そのため、ディレクティブはデフォルト設定の上に適用されます。ディレクティブの利点は、個々のレベル、つまり特定のダイアグラムの設定を変更するために使用できることです。

ディレクティブではデフォルトの設定のほとんどを変更できますが、セキュリティ上の理由から使用できないものもあります。また、ダイアグラムの作成者がディレクティブでオーバーライドできるようにする設定のセットを定義するオプションもあります。

ディレクティブオプションの種類

Mermaidは基本的に、ディレクティブでオーバーライドされる2種類の設定オプションをサポートしています。

1. 一般/トップレベル設定：これらは、すべてのダイアグラムで使用可能で適用される設定です。最も重要なトップレベル設定の一部は次のとおりです。

   • theme
   • fontFamily
   • logLevel
   • securityLevel
   • startOnLoad
   • secure

2. ダイアグラム固有の設定：これらは、特定のダイアグラムで使用可能で適用される設定です。各ダイアグラムには、その特定のダイアグラムの外観と動作を変更する特定の設定があります。たとえば、`mirrorActors`は`SequenceDiagram`に固有の設定であり、アクタをミラーリングするかどうかを変更します。そのため、この設定は`SequenceDiagram`タイプでのみ使用できます。

注記：ここに記載されているのは、すべての設定オプションではありません。すべての設定オプションを入手するには、ソースコードのdefaultConfig.tsを参照してください。

情報

近日中に、トップレベル設定とダイアグラム固有の設定の完全なリストとその可能な値をドキュメントに公開する予定です。

ディレクティブの宣言

使用可能な設定の種類を定義したので、ディレクティブの宣言方法を学習できます。ディレクティブは常に`%%`記号で始まり、`%% {directive_text} %%`のようにその間にディレクティブテキストを含みます。

ここで、ディレクティブテキストの構造は、ネストされたキーバリューペアマップまたはJSONオブジェクトのようなもので、ルートはinitです。すべての一般設定はトップレベルに定義され、すべてのダイアグラム固有の設定はそのセクションのキー/ルートとしてダイアグラムタイプを1レベル深く定義します。

次のコードスニペットは、ディレクティブの構造を示しています。

%%{
  init: {
    "theme": "dark",
    "fontFamily": "monospace",
    "logLevel": "info",
    "flowchart": {
      "htmlLabels": true,
      "curve": "linear"
    },
    "sequence": {
      "mirrorActors": true
    }
  }
}%%

ディレクティブは次のように1行で定義することもできます。

%%{init: { **insert configuration options here** } }%%

たとえば、次のコードスニペット

%%{init: { "sequence": { "mirrorActors":false }}}%%

注記：{**argument**}として渡されるJSONオブジェクトは、有効なキーバリューペアでなければならず、引用符で囲まれている必要があります。そうでない場合は無視されます。有効なキーバリューペアはconfigにあります。

簡単なグラフの例

ここで、ディレクティブ宣言により、`logLevel`が`debug`に、`theme`が`dark`に設定され、レンダリングされたmermaidダイアグラムの外観が変更されます。

注記：`init`と`initialize`の両方がinitディレクティブとして許容されます。また、`%%init%%`と`%%initialize%%`ディレクティブは解析後にグループ化されます。

たとえば、上記を解析すると、2つのディレクティブを結合し、最後に与えられた`loglevel`の値を保持した単一の`%%init%%`JSONオブジェクトが生成されます。

{
  "logLevel": "fatal",
  "theme": "dark",
  "startOnLoad": true
}

これは、レンダリングのために`mermaid.initialize(...)`に送信されます。

ディレクティブの例

ディレクティブの概念を説明したので、ディレクティブの使用例をいくつか見てみましょう。

ディレクティブによるテーマの変更

次のコードスニペットは、`theme`を`forest`に変更します。

%%{init: { "theme": "forest" } }%%

可能なテーマの値は、`default`、`base`、`dark`、`forest`、`neutral`です。デフォルト値は`default`です。

例

ディレクティブによるfontFamilyの変更

次のコードスニペットは、fontFamilyをTrebuchet MS、Verdana、Arial、Sans-Serifに変更します。

%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%

例

ディレクティブによるlogLevelの変更

次のコードスニペットは、`logLevel`を`2`に変更します。

%%{init: { "logLevel": 2 } }%%

可能な`logLevel`の値は次のとおりです。

• `1`：デバッグ
• `2`：情報
• `3`：警告
• `4`：エラー
• `5`：致命的エラーのみ

デフォルト値は`5`です。

例

ディレクティブによるフローチャート設定の変更

一般的なフローチャート設定の一部は次のとおりです。

• htmlLabels: true/false
• curve: linear/curve
• diagramPadding: 数値
• useMaxWidth: 数値

フローチャート設定の完全なリストについては、ソースコードのdefaultConfig.tsを参照してください。近日中に、ドキュメントに更新されたすべてのダイアグラム固有の設定の完全なリストを公開する予定です。

次のコードスニペットは、フローチャートの設定を変更します。

%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%

ここでは、一般的な設定ではなく、フローチャートの設定のみをオーバーライドし、`htmlLabels`を`true`に、`curve`を`linear`に設定しています。

ディレクティブによるシーケンス図設定の変更

一般的なシーケンス図設定の一部は次のとおりです。

• width: 数値
• height: 数値
• messageAlign: left, center, right
• mirrorActors: 真偽値
• useMaxWidth: 真偽値
• rightAngles: 真偽値
• showSequenceNumbers: 真偽値
• wrap: 真偽値

シーケンス図設定の完全なリストについては、ソースコードのdefaultConfig.tsを参照してください。近日中に、ドキュメントに更新されたすべてのダイアグラム固有の設定の完全なリストを公開する予定です。

そのため、`wrap`はデフォルトでシーケンス図の値が`false`になります。

例を見てみましょう。

それでは、シーケンス図のwrapを有効にしてみましょう。

次のコードスニペットは、シーケンス図の設定を`wrap`を`true`に変更します。

%%{init: { "sequence": { "wrap": true} } }%%

上記のダイアグラムにそのスニペットを適用することにより、`wrap`が有効になります。