テーマ設定
動的で統合されたテーマ設定は、Mermaidバージョン8.7.0で導入されました。
テーマは、サイト全体レベル、または個々のMermaidダイアグラムでカスタマイズできるようになりました。サイト全体のテーマのカスタマイズには、`initialize`呼び出しを使用します。ダイアグラム固有のカスタマイズには、`init`ディレクティブを使用します。
利用可能なテーマ
default - すべてのダイアグラムのデフォルトテーマです。
neutral - 白黒のドキュメントを印刷する場合に最適なテーマです。
dark - 暗い色の要素やダークモードに最適なテーマです。
forest - 緑色の色合いで構成されたテーマです。
base - 変更可能な唯一のテーマです。カスタマイズのベースとしてこのテーマを使用してください。
サイト全体のテーマ
サイト全体のテーマをカスタマイズするには、`mermaid`の`initialize`メソッドを呼び出します。
`initialize`呼び出しの例（`theme`を`base`に設定）
mermaid.initialize({
securityLevel: 'loose',
theme: 'base',
});ダイアグラム固有のテーマ
個々のダイアグラムのテーマをカスタマイズするには、`init`ディレクティブを使用します。
`init`ディレクティブの例（`theme`を`forest`に設定）
**注意:** カスタマイズ可能なテーマは`base`テーマのみです。次のセクションでは、カスタマイズに`themeVariables`を使用する方法について説明します。
`themeVariables`を使用したテーマのカスタマイズ
カスタムテーマを作成するには、`init`を介して`themeVariables`を変更します。
変更可能な唯一のテーマであるbaseテーマを使用する必要があります。
| パラメータ | 説明 | 型 | プロパティ |
|---|---|---|---|
| themeVariables | `init`ディレクティブで変更可能 | オブジェクト | `primaryColor`、`primaryTextColor`、`lineColor`（完全なリストを参照） |
`init`ディレクティブを使用した`themeVariables`の変更例
色と色の計算
ダイアグラムの可読性を確保するために、特定の変数のデフォルト値は、他の変数から計算または導出されます。たとえば、`primaryBorderColor`は`primaryColor`変数から導出されます。そのため、`primaryColor`変数をカスタマイズすると、Mermaidは`primaryBorderColor`を自動的に調整します。調整には、色の反転、色相の変化、10％の濃淡変更などが含まれる場合があります。
テーマエンジンは、16進数の色のみ認識し、色の名前は認識しません。そのため、`#ff0000`は機能しますが、`red`は機能しません。
テーマ変数
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| darkMode | false | 導出された色の計算方法に影響します。ダークモードの場合は値を`true`に設定します。 |
| background | #f4f4f4 | 背景色にする必要があるアイテム、または背景と対照的なアイテムの色を計算するために使用されます。 |
| fontFamily | trebuchet ms, verdana, arial | |
| fontSize | 16px | ピクセル単位のフォントサイズ |
| primaryColor | #fff4dd | ノードの背景色として使用される色。他の色はこれに基づいて導出されます。 |
| primaryTextColor | darkModeから計算 #ddd/#333 | `primaryColor`を使用するノードのテキストカラーとして使用される色 |
| secondaryColor | primaryColorから計算 | |
| primaryBorderColor | primaryColorから計算 | `primaryColor`を使用するノードの境界線の色として使用される色 |
| secondaryBorderColor | secondaryColorから計算 | `secondaryColor`を使用するノードの境界線の色として使用される色 |
| secondaryTextColor | secondaryColorから計算 | `secondaryColor`を使用するノードのテキストカラーとして使用される色 |
| tertiaryColor | primaryColorから計算 | |
| tertiaryBorderColor | tertiaryColorから計算 | `tertiaryColor`を使用するノードの境界線の色として使用される色 |
| tertiaryTextColor | tertiaryColorから計算 | `tertiaryColor`を使用するノードのテキストカラーとして使用される色 |
| noteBkgColor | #fff5ad | ノートの背景色として使用される色 |
| noteTextColor | #333 | ノートの四角形内のテキストの色 |
| noteBorderColor | noteBkgColorから計算 | ノートの四角形の境界線の色 |
| lineColor | backgroundから計算 | |
| textColor | primaryTextColorから計算 | 背景上のダイアグラムのテキスト（例：ラベルのテキスト、シーケンス図のシグナル、ガントチャートのタイトルなど） |
| mainBkg | primaryColorから計算 | フローチャートオブジェクト（rect/circle、クラス図のクラス、シーケンス図など）の背景 |
| errorBkgColor | tertiaryColor | 構文エラーメッセージの色 |
| errorTextColor | tertiaryTextColor | 構文エラーメッセージの色 |
フローチャート変数
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| nodeBorder | primaryBorderColor | ノードの境界線の色 |
| clusterBkg | tertiaryColor | サブグラフの背景 |
| clusterBorder | tertiaryBorderColor | クラスタの境界線の色 |
| defaultLinkColor | lineColor | リンクの色 |
| titleColor | tertiaryTextColor | タイトルの色 |
| edgeLabelBackground | secondaryColorから計算 | |
| nodeTextColor | primaryTextColor | ノード内のテキストの色 |
シーケンス図変数
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| actorBkg | mainBkg | アクタの背景色 |
| actorBorder | primaryBorderColor | アクタの境界線の色 |
| actorTextColor | primaryTextColor | アクタのテキストの色 |
| actorLineColor | actorBorder | アクタの線の色 |
| signalColor | textColor | シグナルの色 |
| signalTextColor | textColor | シグナルのテキストの色 |
| labelBoxBkgColor | actorBkg | ラベルボックスの背景色 |
| labelBoxBorderColor | actorBorder | ラベルボックスの境界線の色 |
| labelTextColor | actorTextColor | ラベルのテキストの色 |
| loopTextColor | actorTextColor | ループのテキストの色 |
| activationBorderColor | secondaryColorから計算 | アクティベーションの境界線の色 |
| activationBkgColor | secondaryColor | アクティベーションの背景色 |
| sequenceNumberColor | lineColorから計算 | シーケンス番号の色 |
円グラフ変数
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| pie1 | primaryColor | 円グラフの最初のセクションの塗りつぶし |
| pie2 | secondaryColor | 円グラフの2番目のセクションの塗りつぶし |
| pie3 | tertiaryから計算 | 円グラフの3番目のセクションの塗りつぶし |
| pie4 | primaryColorから計算 | 円グラフの4番目のセクションの塗りつぶし |
| pie5 | secondaryColorから計算 | 円グラフの5番目のセクションの塗りつぶし |
| pie6 | tertiaryColorから計算 | 円グラフの6番目のセクションの塗りつぶし |
| pie7 | primaryColorから計算 | 円グラフの7番目のセクションの塗りつぶし |
| pie8 | primaryColorから計算 | 円グラフの8番目のセクションの塗りつぶし |
| pie9 | primaryColorから計算 | 円グラフの9番目のセクションの塗りつぶし |
| pie10 | primaryColorから計算 | 円グラフの10番目のセクションの塗りつぶし |
| pie11 | primaryColorから計算 | 円グラフの11番目のセクションの塗りつぶし |
| pie12 | primaryColorから計算 | 円グラフの12番目のセクションの塗りつぶし |
| pieTitleTextSize | 25px | タイトルのテキストサイズ |
| pieTitleTextColor | taskTextDarkColor | タイトルのテキストの色 |
| pieSectionTextSize | 17px | 個々のセクションラベルのテキストサイズ |
| pieSectionTextColor | textColor | 個々のセクションラベルのテキストの色 |
| pieLegendTextSize | 17px | ダイアグラム凡例内のラベルのテキストサイズ |
| pieLegendTextColor | taskTextDarkColor | ダイアグラム凡例内のラベルのテキストの色 |
| pieStrokeColor | black | 個々の円グラフセクションの境界線の色 |
| pieStrokeWidth | 2px | 個々の円グラフセクションの境界線の幅 |
| pieOuterStrokeWidth | 2px | 円グラフの外側の円の境界線の幅 |
| pieOuterStrokeColor | black | 円グラフの外側の円の枠線の色 |
| pieOpacity | 0.7 | 個々の円グラフセクションの不透明度 |
状態の色
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| labelColor | primaryTextColor | |
| altBackground | tertiaryColor | 複合状態が深い場合の背景に使用されます |
クラスの色
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| classText | textColor | クラス図のテキストの色 |
ユーザージャーニーの色
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| fillType0 | primaryColor | ジャーニー図の1番目のセクションの塗りつぶし |
| fillType1 | secondaryColor | ジャーニー図の2番目のセクションの塗りつぶし |
| fillType2 | primaryColorから計算 | ジャーニー図の3番目のセクションの塗りつぶし |
| fillType3 | secondaryColorから計算 | ジャーニー図の4番目のセクションの塗りつぶし |
| fillType4 | primaryColorから計算 | ジャーニー図の5番目のセクションの塗りつぶし |
| fillType5 | secondaryColorから計算 | ジャーニー図の6番目のセクションの塗りつぶし |
| fillType6 | primaryColorから計算 | ジャーニー図の7番目のセクションの塗りつぶし |
| fillType7 | secondaryColorから計算 | ジャーニー図の8番目のセクションの塗りつぶし |