Mermaidのテーマ変更
レンダリング時にテーマ名や独自のテーマ設定を指定する。
最も簡単なのは%%{init: { 'theme': 'dark' }}%%のようにコードブロックの冒頭でテーマを宣言するやり方で、これによりMermaidがデフォルトで用意しているdefault、dark、forest、neutralなどのテーマを手軽に切り替えられる。
code:例1_ダークテーマ
%%{init: { "theme": "dark" }}%%
graph LR
配色やノードのスタイルを細かく制御したい場合は、themeVariablesを使ってカスタムテーマを定義できる。
たとえば、アクセントカラー、フォントサイズ、線の色などを調整することで、図表全体のトーンを統一したり、資料のブランドカラーに合わせたりすることが可能になる。
code:例2_カスタムテーマ
%%{init: {
"theme": "base",
"themeVariables": {
"primaryColor": "#1d4ed8", /* ノード背景 */
"primaryTextColor": "#ffffff", /* ノード文字色 */
"primaryBorderColor": "#1e40af", /* ノード枠色 */
"lineColor": "#1e3a8a", /* 矢印や線 */
"fontSize": "16px",
"fontFamily": "sans-serif"
}
}}%%
graph LR
詳細なカスタマイズとして、テーマ変数を用いた設定がある。
この方法では既存テーマをベースにした上で、必要な部分だけを柔軟に上書きできる。
どの程度細かくスタイルを変えられるかはthemeVariablesで指定できる項目次第で、ノード背景色、線色、フォント、境界線など幅広く調整できる。
こうした手法を使うことで、Mermaidの図を資料やWebページ全体のデザインと統一したり、読みやすさを向上させたりすることができる。
たとえば、主色を青系にし、フォントを大きめに設定する場合は次のように書く。
code:例2_カスタムテーマ
%%{init: {
"theme": "base",
"themeVariables": {
"primaryColor": "#3b82f6",
"primaryTextColor": "#ffffff",
"fontSize": "18px"
}
}}%%
graph TD