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


# はじめに

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

↓↓[MermaidJS Editor](https://mermaid.live/edit)にソースを張り付けるor Notionのソースブロックに張り付けてください



# 色を付けよう（簡易編）

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

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

## デフォルト図形

```
graph TD
    a --> b
```

```mermaid
graph TD
    a --> b
```

## 色付き図形

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

```mermaid
%%{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
```

```mermaid
     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
```


```mermaid
%%{
  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
	
```
```mermaid
%%{
  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
	
```
# 参考記事
https://mermaid.js.org/config/theming.html