Mermaid.jsにおけるカラーテーマのカスタマイズ

はじめに

前回の記事「Next.jsのMDXにMermaidダイアグラムを追加する」では、Next.jsのMDXを使用したブログにMermaid.jsダイアグラムを追加する方法を解説しました。今回は、Mermaid.jsのダイアグラムをTailwind CSSのカラーパレットに合わせてカスタマイズする方法を紹介します。

カスタマイズの基本

Mermaid.jsのテーマは、mermaid.initialize()のthemeVariablesを指定することで、デフォルトのテーマをベースとしたスタイルのオーバーライドが可能です。

mermaid.initialize({
  theme: "base",
  themeVariables: {
    primaryColor: "#f3f4f6",
    primaryTextColor: "#111827",
    primaryBorderColor: "#d1d5db",
    // その他の変数...
  },
});

設定できる変数は主に共通変数とダイアグラム固有の変数に分かれます。

共通変数

すべてのダイアグラムタイプで共通して使用できる基本的な変数です。背景色・テキスト色・境界線色など、ダイアグラム全体で使用されます。

ダイアグラム固有変数

各ダイアグラムタイプに特化した変数です。シーケンス図のアクターやパイチャートのセクション色など、ダイアグラムごとの特徴的な要素をカスタマイズできます。

この他にもガントチャートやER図など、他のダイアグラムタイプに特化した変数が多数用意されています。詳細はTheme Variablesを参照してください。

カスタマイズ例（ライトモード）

このブログで実際に使用している設定を紹介しておきます。

背景・テキスト・境界線の共通変数をグレースケールで統一しています。明るいグレー（gray-100、gray-200）を背景に、暗いグレー（gray-800、gray-900）をテキストに使用してコントラストを確保しました。

mermaid.initialize({
  theme: "base",
  themeVariables: {
    // 背景色
    primaryColor: "#f3f4f6",        // gray-100
    secondaryColor: "#e5e7eb",      // gray-200
    tertiaryColor: "#f3f4f6",       // gray-100
    background: "#ffffff",          // white
    mainBkg: "#f9fafb",             // gray-50
    
    // テキスト色
    primaryTextColor: "#111827",    // gray-900
    secondaryTextColor: "#4b5563",  // gray-600
    tertiaryTextColor: "#6b7280",   // gray-500
    textColor: "#1f2937",           // gray-800
    
    // 境界線色
    primaryBorderColor: "#d1d5db",  // gray-300
    nodeBorder: "#9ca3af",          // gray-400
    lineColor: "#d1d5db",           // gray-300
  },
});

カスタマイズ例（ダークモード）

ダークモードでは、背景とテキストの色を反転させています。暗いグレー（gray-700、gray-800）を背景に、明るいグレー（gray-50、gray-100）をテキストに使用し、明度を下げながらも十分なコントラストを保つことで可読性を確保しています。

mermaid.initialize({
  theme: "base",
  themeVariables: {
    // 背景色
    primaryColor: "#374151",        // gray-700
    secondaryColor: "#6b7280",      // gray-500
    tertiaryColor: "#374151",       // gray-700
    background: "#1f2937",          // gray-800
    mainBkg: "#374151",             // gray-700
    
    // テキスト色
    primaryTextColor: "#f9fafb",    // gray-50
    secondaryTextColor: "#d1d5db",  // gray-300
    tertiaryTextColor: "#9ca3af",   // gray-400
    textColor: "#f3f4f6",           // gray-100
    
    // 境界線色
    primaryBorderColor: "#4b5563",  // gray-600
    nodeBorder: "#9ca3af",          // gray-400
    lineColor: "#4b5563",           // gray-600
  },
});

以下が実際の表示例です。ライトモード・ダークモードを切り替えて確認してみてください。

ダイアグラムタイプ別カスタマイズ

続いて、ダイアグラムタイプごとにカスタマイズできる主要な変数を紹介します。

シーケンス図

シーケンス図で使用する主要な変数と、このブログで設定している具体的な色の値を示します。

パイチャート

パイチャートで使用する主要な変数と、このブログで設定している具体的な色の値を示します。

パイチャートの色は、このブログで実際に使用しているテーマファイルの設定です。セクションの背景色として使用されるため、ライトモードでは明るめの色（*-300）を、ダークモードでは暗い色（*-800〜*-900）を使用し、テキストとのコントラストを確保しています。

色の順序は blue → green → amber → red → violet → pink → teal → orange → cyan → lime → indigo → rose の12色を配置し、色相を分散させることで隣接するセクションが視覚的に区別しやすくなるよう設計しています。

フローチャート

フローチャートで使用する主要な変数と、このブログで設定している具体的な色の値を示します。

クラス図

クラス図で使用する主要な変数と、このブログで設定している具体的な色の値を示します。

ユーザージャーニー図

ユーザージャーニー図で使用する主要な変数と、このブログで設定している具体的な色の値を示します。

セクションごとに8種類の色パターンが自動的に割り当てられ、各タスクの満足度（1〜5）に応じて色の濃淡が自動調整されます。背景色として使用するため、ライトモードでは明るめの色（*-300）を、ダークモードでは暗い色（*-900）を使用し、テキストとのコントラストを確保しています。

まとめ

mermaid.jsのカスタマイズはそれほど難しくないことが分かったかと思います。ブログのデザインに合わせて統一感のあるダイアグラムを作成してみてください。

この記事で紹介したテーマファイルは以下からダウンロードできます。

• ライトモードテーマ
• ダークモードテーマ