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

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

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