Mermaidダイアグラムのテーマ、色、フォントのカスタマイズ

Mermaidのテーマカスタマイズ

Mermaidは色、フォント、線のスタイル、全体的な外観を制御できる強力なテーマシステムを提供しています。組み込みテーマを使用するか、完全にカスタムなスタイルを作成できます。

組み込みテーマ

Mermaidにはinitディレクティブで有効化できる複数のテーマが付属しています：

%%{init: {'theme': 'forest'}}%%
flowchart LR
    A --> B --> C

利用可能なテーマ：

テーマ	説明
default	青とグレーのパレット
dark	暗い背景に明るいテキスト
forest	グリーン系の自然パレット
neutral	グレースケール、印刷向き
base	フルカスタマイズ用の最小テーマ

テーマ変数

themeVariablesを使って特定の色やフォントをオーバーライドします：

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#4f46e5',
    'primaryTextColor': '#ffffff',
    'primaryBorderColor': '#3730a3',
    'secondaryColor': '#f59e0b',
    'tertiaryColor': '#f3f4f6',
    'lineColor': '#6b7280',
    'fontFamily': 'Inter, sans-serif',
    'fontSize': '14px'
  }
}}%%
flowchart TD
    A[Step 1] --> B[Step 2]
    B --> C[Step 3]
    C --> D[Step 4]

主要なテーマ変数

変数	影響範囲
primaryColor	メインノードの塗りつぶし色
primaryTextColor	プライマリノード内のテキスト色
primaryBorderColor	プライマリノードの枠線
secondaryColor	代替ノードの塗りつぶし色
lineColor	矢印と線の色
fontFamily	グローバルフォントファミリー
fontSize	ベースフォントサイズ
nodeTextColor	ノード内のデフォルトテキスト色

ノード単位のスタイリング

styleキーワードで個々のノードにCSSライクなスタイルを適用します：

flowchart LR
    A[Normal] --> B[Highlighted] --> C[Error]
    style B fill:#dbeafe,stroke:#2563eb,stroke-width:2px
    style C fill:#fee2e2,stroke:#dc2626,color:#991b1b

クラスベースのスタイリング

再利用可能なスタイルクラスを定義します：

flowchart LR
    A[Step 1]:::success --> B[Step 2]:::warning --> C[Step 3]:::danger
    classDef success fill:#dcfce7,stroke:#16a34a,color:#166534
    classDef warning fill:#fef9c3,stroke:#ca8a04,color:#854d0e
    classDef danger fill:#fee2e2,stroke:#dc2626,color:#991b1b

ヒント

1. baseテーマから始める — 最大限のカスタマイズ制御が可能です。
2. ブランドに合わせる — primaryColorを会社のブランドカラーに設定して、統一感のあるドキュメントを作成しましょう。
3. ダーク・ライト両モードでテスト — カスタムカラーが両方のモードで十分なコントラストを持つことを確認します。
4. 可読性を保つ — 目に負担のかかる過度に彩度の高い色は避けましょう。