Qiitaでも効くMermaidのデザインカスタマイズ完全ガイド - 図表を自分好みに変える方法

注意：この記事はAIが作成しています
参照元の存在、参考元のリンクの信頼度、事実の歪曲がないかをAIによりセルフチェックしています

Mermaidのデザインカスタマイズ完全ガイド - 図表を自分好みに変える方法

はじめに

Mermaidは、テキストベースで図表を作成できる強力なツールですが、デフォルトのデザインでは物足りないと感じることがあるでしょう。本記事では、Mermaidのデザインをカスタマイズして、プロフェッショナルで魅力的な図表を作成する方法を詳しく解説します。

Mermaidのカスタマイズ概要

Mermaidのデザインカスタマイズは、主に以下の4つの方法で実現できます：

カスタマイズの4つのアプローチ

1. テーマ設定

• デフォルトテーマ - 標準的な明るい配色
• ダークテーマ - ダークモード対応の配色
• フォレストテーマ - 緑系の自然な配色
• カスタムテーマ - 独自のテーマ変数を定義

2. CSSスタイリング

• ノードスタイル - 個別ノードの見た目を調整
• リンクスタイル - 接続線のスタイルを変更
• クラス定義 - 再利用可能なスタイルセットを作成

3. 設定オプション

• 初期化設定 - mermaid.initialize()での全体設定
• 図表固有設定 - 各図表タイプ独自の詳細設定

4. ディレクティブ

• %%ディレクティブ - 図表の先頭で設定を記述
• インライン設定 - 図表内で直接スタイルを指定

1. テーマ設定

組み込みテーマ

Mermaidには複数の組み込みテーマが用意されています。

mermaid.initialize({
  theme: 'default'  // 'default', 'dark', 'forest', 'neutral', 'base'
});

テーマ変数のカスタマイズ

mermaid.initialize({
  theme: 'base',
  themeVariables: {
    primaryColor: '#ff0000',
    primaryTextColor: '#fff',
    primaryBorderColor: '#7C0000',
    lineColor: '#F8B229',
    secondaryColor: '#006100',
    tertiaryColor: '#fff'
  }
});

主要なテーマ変数一覧

変数名	説明	デフォルト値
primaryColor	メインノードの背景色	#ECECFF
primaryTextColor	メインノードのテキスト色	#333
primaryBorderColor	メインノードの境界線色	#9370DB
secondaryColor	サブノードの背景色	#ffffde
tertiaryColor	第三レベルノードの背景色	#hsl(80, 100%, 96.2745098039%)
background	図表の背景色	white
mainBkg	メイン背景色	#ECECFF
fontSize	フォントサイズ	16px
fontFamily	フォントファミリー	"trebuchet ms", verdana, arial

2. CSSによるスタイリング

ノードのスタイル設定

実装コード：

graph LR
    A[標準ノード] --> B[カスタムスタイル]
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style B fill:#bbf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5 5

クラスの定義と適用

3. 図表タイプ別カスタマイズ

フローチャート

シーケンス図

ガントチャート

4. 高度なカスタマイズテクニック

ディレクティブを使用した設定

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#ff0000',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#7C0000',
    'lineColor': '#F8B229'
  },
  'flowchart': {
    'curve': 'linear',
    'htmlLabels': true
  }
}}%%

設定オプション一覧

mermaid.initialize({
  startOnLoad: true,
  theme: 'forest',
  logLevel: 'info',
  securityLevel: 'loose',
  flowchart: {
    useMaxWidth: true,
    htmlLabels: true,
    curve: 'basis',  // 'basis', 'linear', 'cardinal'
    padding: 8,
    nodeSpacing: 50,
    rankSpacing: 50,
    diagramPadding: 8
  },
  sequence: {
    diagramMarginX: 50,
    diagramMarginY: 10,
    actorMargin: 50,
    width: 150,
    height: 65,
    boxMargin: 10,
    boxTextMargin: 5,
    noteMargin: 10,
    messageMargin: 35,
    mirrorActors: true,
    bottomMarginAdj: 1,
    useMaxWidth: true
  },
  gantt: {
    numberSectionStyles: 4,
    axisFormat: '%Y-%m-%d',
    topPadding: 50,
    leftPadding: 75,
    gridLineStartPadding: 35,
    fontSize: 11,
    fontFamily: '"Open Sans", sans-serif',
    numberSectionStyles: 4,
    sectionFontSize: 11
  }
});

5. 実践的なカスタマイズ例

企業向けプレゼンテーション用スタイル

ダークモード対応デザイン

6. トラブルシューティング

よくある問題と解決方法

問題	原因	解決方法
スタイルが適用されない	セキュリティレベルが'strict'	securityLevel: 'loose'に設定
文字が見えない	背景色とテキスト色が同じ	primaryTextColorを調整
図表が切れる	useMaxWidthがfalse	useMaxWidth: trueに設定
カスタムCSSが効かない	CSPポリシー	CSPヘッダーを確認・調整

まとめ

Mermaidのデザインカスタマイズは、以下の方法を組み合わせることで実現できます：

1. テーマ設定 - 全体的な見た目を素早く変更
2. テーマ変数 - 色やフォントを細かく調整
3. CSSスタイル - 個別要素の詳細なカスタマイズ
4. クラス定義 - 再利用可能なスタイルの作成
5. ディレクティブ - 図表ごとの個別設定

これらの機能を活用することで、ブランドガイドラインに沿った図表や、ダークモード対応のドキュメント、プレゼンテーション用の洗練されたビジュアルを作成できます。

参照リンク

• Mermaid公式ドキュメント - Theming
• Mermaid Configuration
• Mermaid Live Editor
• GitHub - mermaid-js/mermaid
• Mermaid Theme Configuration Reference