テーマ設定
ダイナミックで統合されたテーマ設定がMermaidバージョン8.7.0で導入されました。
テーマはサイト全体のレベルまたは個々のMermaidダイアグラムでカスタマイズできるようになりました。サイト全体のテーマカスタマイズには、initializeコールが使用されます。特定のダイアグラムのカスタマイズには、initディレクティブが使用されます。
利用可能なテーマ
default - これはすべてのダイアグラムのデフォルトテーマです。
neutral - このテーマは、印刷される黒と白の文書に最適です。
dark - このテーマは、暗色の要素やダークモードに適しています。
forest - このテーマは緑の色合いを含んでいます。
base - これは唯一変更可能なテーマです。カスタマイズの基礎としてこのテーマを使用してください。
サイト全体のテーマ
サイト全体のテーマをカスタマイズするには、mermaidのinitializeメソッドを呼び出します。
themeをbaseに設定するinitializeコールの例：
javascript
mermaid.initialize({
securityLevel: 'loose',
theme: 'base',
});ダイアグラム特有のテーマ
個々のダイアグラムのテーマをカスタマイズするには、initディレクティブを使用します。
themeをforestに設定するinitディレクティブの例：
Code:
mermaid
リマインダー: カスタマイズできる唯一のテーマは
baseテーマです。次のセクションでは、themeVariablesを使用したカスタマイズ方法について説明します。
themeVariablesを使用したテーマのカスタマイズ
カスタムテーマを作成するには、initを介してthemeVariablesを変更します。
唯一変更可能なテーマとしてbaseテーマを使用する必要があります。
| パラメータ | 説明 | 型 | プロパティ |
|---|---|---|---|
| themeVariables | initディレクティブで変更可能 | オブジェクト | primaryColor, primaryTextColor, lineColor (完全リストを見る) |
initディレクティブを使用してthemeVariablesを変更する例：
Code:
mermaid
色と色計算
ダイアグラムの可読性を保証するために、特定の変数のデフォルト値は計算または他の変数から派生します。例えば、primaryBorderColorはprimaryColor変数から派生します。したがって、primaryColor変数がカスタマイズされると、MermaidはprimaryBorderColorを自動的に調整します。調整には、色の反転、色相の変更、10％の暗くする/明るくするなどが含まれます。
テーマエンジンは16進数の色のみを認識し、色名は認識しません。したがって、#ff0000は機能しますが、赤は機能しません。
テーマ変数
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| 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 | 背景に基づいて計算された値 | |
| textColor | primaryTextColorに基づいて計算された値 | たとえば、ラベルやシーケンスダイアグラムの信号、またはガントダイアグラムのタイトルなどの背景に対するダイアグラム内のテキスト |
| mainBkg | primaryColorに基づいて計算された値 | フローチャートオブジェクト内の背景（長方形/円、クラスダイアグラムのクラス、シーケンスダイアグラムなど） |
| 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 | パイダイアグラムの1番目のセクションの色 |
| 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番目のセクションの塗りつぶし |