MermaidJS のテーマ・スタイルの変更方法 図形の色を設定できてすごい

はじめに

普段の学習の記録をとる際に、MermaidJSで図解してNotionで記録をとることが多いです。また、markdownファイルに図形を挿入したりしていますが、MermaidJSで作成される図形のデザインがいまいち気に入らなかったです。そこで、色を変える方法を調べて習得しました。

↓↓MermaidJS Editorにソースを張り付けるor Notionのソースブロックに張り付けてください

色を付けよう（簡易編）

themeに以下のテーマを設定すれば簡易的に色が変更できます

テーマ名	説明
default	全てのダイアグラムに適用されるデフォルトのテーマ
neutral	白黒で印刷する文書に適したテーマ
dark	ダークモードや、暗い要素と相性の良いテーマ
forest	緑色のシェードが含まれるテーマ
base	カスタマイズ用のベースとして使用するテーマ。このテーマは変更可能。

デフォルト図形

graph TD
    a --> b

色付き図形

%%{init: {'theme':'forest'}}%%
  graph TD
    a --> b

上級編

下記で使用している各プロパティとその説明をまとめたものです。

プロパティ	説明	例
theme	テーマの名前を指定します。	base
themeVariables	テーマに関連する変数を含むオブジェクトです。
primaryColor	プライマリカラー（メインカラー）を指定します。	#BB2528
primaryTextColor	プライマリカラーのテキストカラーを指定します。	#fff (白)
primaryBorderColor	プライマリカラーの境界線（ボーダー）カラーを指定します。	#7C0000
lineColor	線の色を指定します。	#F8B229
secondaryColor	セカンダリカラー（サブカラー）を指定します。	#006100
tertiaryColor	テルシャリカラー（サブカラーのサブカラー）を指定します。	#fff (白)

デフォルト画像

     graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

色付き図形

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#2A303C'
    }
  }
}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

余談

subgraphがすごい便利です

以下、私のゴールデンウィークの学習内容をまとめてみました。

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#2A303C'
    }
  }
}%%
graph TB

	subgraph Develop["GW Study"]
		subgraph C#
			CodeWars
			DDD
		end
		subgraph JS
			subgraph NextJS
				DDD
				TestCode
			end
			TimerAppDevelop
		end
		subgraph AWS
			Udemy
			WebAppRelease
		end			
	end
	

参考記事