今回はNotionで使えるMermaid記法に関して書いていきます。
以前、Mermaidで状態遷移図を書いてみた記事を投稿しました。
更に、色テーマを全て試してみる記事も投稿しました。
上記の色テーマでも充分ではあったのですが、どうやら色を指定できるようです。
ということで今回は、上記に続く流れで状態遷移図のテーマをカスタマイズ（色指定）してみます。
それでは本題へ。
前提情報
Mermaidとは？
まずはMermaidとは？に関して書いておきます。
Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。
出典：グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
詳しくは以下のリンクを見て頂ければと。
dev.classmethod.jp
状態遷移図とは？
状態遷移図とは？に関しても書いておきます。
「状態遷移」とは、ソフトウェアやシステムの状態がさまざまな条件やイベントによって変化することを指しますが、それらの変化を図形や矢印で表現したものが「状態遷移図（ステートマシン図）」です。システムやソフトウェアの仕様が文章で書かれている場合に、ビジュアルでより俯瞰的に仕様をとらえることができます。
詳しくは以下のリンクを見て頂ければと。
service.shiftinc.jpcacoo.com
色の指定例
コード
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': 'blue',
'primaryTextColor': 'white',
'textColor': 'red'
}
}
}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン以下の部分で色を指定しています。
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': 'blue',
'primaryTextColor': 'white',
'textColor': 'red'
}
}
}%%「theme」には”base”を指定する必要があるみたいです。
「themeVariables」で各要素の色を指定していきます。
- primaryColor：ノードの背景色
- primaryTextColor：ノード内の文字色
- titleColor：遷移コメントの色（矢印の色も？）
といった感じです。
他にも用意されている要素はありますが、上記あたりを指定すると状態遷移図の色合いがガラッと変わります。
状態遷移図
ということで、上記コードを適用した状態遷移図がこちらです。
かなり派手な色合いですが、とりあえず見分けがつきやすいように目立つ色を指定しています。
いくつか試してみる
上記は派手な色合いなので、次はそれっぽい色合いをいくつか試してみます。
base
いくつか試してみる前に、まずはbaseテーマの状態遷移図を載せておきます。
※コピペ用にコードも貼っておきます
%%{init:{'theme':'base'}}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン
primaryColor（#C2D9F5）
ここから実際に、「primaryColor」を指定した状態遷移図をいくつか載せていきます。
※コピペ用にコードも貼っておきます
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#C2D9F5'
}
}
}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン
primaryColor（#B5EA7B）
※コピペ用にコードも貼っておきます
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#B5EA7B'
}
}
}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン
primaryColor（#FBD89F）
※コピペ用にコードも貼っておきます
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#FBD89F'
}
}
}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン
primaryColor（#1B5DAA）× primaryTextColor（#FFF）
ここからは「primaryColor」に濃い目の色を指定していきます。
それに対応して「primaryTextColor」は白色を指定します。
※コピペ用にコードも貼っておきます
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#1B5DAA',
'primaryTextColor': '#FFF',
'textColor': '#000'
}
}
}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン
primaryColor（#538B16）× primaryTextColor（#FFF）
※遷移コメントの背景色を「secondaryColor」で調整しています
※コピペ用にコードも貼っておきます
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#538B16',
'primaryTextColor': '#FFF',
'secondaryColor': '#FFF',
'textColor': '#000'
}
}
}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン
primaryColor（#AF7108）× primaryTextColor（#FFF）
※コピペ用にコードも貼っておきます
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#AF7108',
'primaryTextColor': '#FFF',
'secondaryColor': '#FFF',
'textColor': '#000'
}
}
}%%
stateDiagram-v2
待機中 --> 計測中:START・STOPボタン
計測中 --> 一時停止中:START・STOPボタン
一時停止中 --> 計測中:START・STOPボタン
一時停止中 --> 待機中:RESETボタン
参考リンク
以下のサイトを参考にさせて頂きました。ありがとうございます。
状態遷移図に関して
mermaid.js.org
色テーマに関して
mermaid.js.org
色選びに関して
copypalette.appcolorbase.app
おわりに
ということで、「【Notion×Mermaid】状態遷移図のテーマをカスタマイズ（色指定）する」に関してアレコレ書いてみました。
「primaryColor」を指定するだけで状態遷移図の色合いがガラッと変わりますね。
ここまで自由に色指定できると色選びに悩みますが、まぁこれは楽しい部分でもあるかなと。
この記事が参考になれば幸いです。
Notion×Mermaid 関連記事
Notion×Mermaidは他にも記事を書いています。
こちらも良ければぜひ。
Notion×Mermaid×状態遷移図 関連記事
