今回はNotionのMermaidに関して書いていきます。
これまでもNotionのMermaidに関して記事を書いています。
上記の記事を見てもらえば分かるのですが、ER図もマインドマップも色合いが地味です。記事を書いた当時は、色合いの変更方法が分かりませんでした。
色々と調べてみても分からなかったのでそのまま進めていたのですが、たまたま遭遇した記事で色合い（テーマ）を変更できることを知りました。
今回はその変更方法と、以前の記事で触れたER図とマインドマップに実際にテーマを適用してみます。
それではサクッと本題へ。
Mermaidとは？
まずはMermaidとは？に関して書いておきます。
Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。
出典：グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
詳しくは以下のリンクを見て頂ければと。
dev.classmethod.jp
参考リンク
記事の冒頭でも触れた、たまたま遭遇した記事はこちらです。
zenn.dev
「Mermaidの公式ページにテーマ変更の内容ってあった？」と思って探してみたら、ありました。
自分の探し方が良くなかったようです。
mermaid.js.org
テーマの変更方法
参考リンクを見てもらえば分かりますが、テーマの変更方法はかなり簡単です。
元のコードに以下の1行を追記するだけです。
%%{init:{'theme':'base'}}%%「base」のところには他に「default」「neutral」「dark」「forest」を指定できます。全部で5種類のようです。
※ちなみに公式ページによると「base」はカスタマイズできるようです。
テーマ変更してみる
ということで、以前の記事に載せた「ER図」「マインドマップ」にテーマを指定してみます。
指定可能なテーマ5種類、全て試してみます。
ER図（読書Notion）
まずは読書NotionのER図にテーマを指定してみます。
元記事も貼っておきます。
miya-moto-memo.hatenablog.com
コード
1行目がテーマ指定の記述です。
テーマ指定する必要がない場合は1行目を削除すればOKです。
%%{init:{'theme':'default'}}%%
erDiagram
"著者一覧" ||--|{ "読書記録": "1人の著者は複数の本を持つ"
"月別読書量" ||--|{ "読書記録": "1つの月は複数の本を持つ"
"年別読書量" ||--|{ "月別読書量": "1つの年は複数の月を持つ"
"読書記録" {
title title "タイトル"
url url "URL"
relation author_list "著者一覧"
select rating "評価"
select status "ステータス"
status comment "コメント"
multi-select genre "ジャンル"
select media "媒体"
date read_date "読了日"
relation monthly_reading "月別読書量"
last_updated updated "更新日時"
}
"著者一覧" {
title author "著者名"
number link_count "リンク数"
relation reading_record "読書記録"
last_updated updated "更新日時"
}
"月別読書量" {
title target_month "対象年月"
rollup reading_books_count "読書冊数"
relation reading_record "読書記録"
relation yearly_reading "年別読書量"
}
"年別読書量" {
title target_year "対象年"
rollup reading_books_count "読書冊数"
relation monthly_reading "月別読書量"
}
指定なし
default
neutral
dark
forest
base
ER図（筋トレNotion）
次に筋トレNotionのER図にテーマを指定してみます。
元記事も貼っておきます。
miya-moto-memo.hatenablog.com
コード
1行目がテーマ指定の記述です。
テーマ指定する必要がない場合は1行目を削除すればOKです。
%%{init:{'theme':'default'}}%%
erDiagram
"筋トレカレンダー" ||--|| "筋トレ部位": "1つの日は1つの部位を持つ"
"筋トレ部位" ||--|{ "筋トレメニュー": "1つの部位は複数のメニューを持つ"
"筋トレカレンダー" {
date date "日付"
status status "ステータス"
relation raining_part "筋トレ部位"
rollup raining_menu "筋トレメニュー"
title name "名前"
}
"筋トレ部位" {
title part "部位"
relation raining_menu "筋トレメニュー"
}
"筋トレメニュー" {
title menu "メニュー名"
relation raining_part "筋トレ部位"
}
指定なし
default
neutral
dark
forest
base
マインドマップ
最後にマインドマップにテーマを指定してみます。
とりあえず元記事を貼っておきます。
miya-moto-memo.hatenablog.com
コード
1行目がテーマ指定の記述です。
テーマ指定する必要がない場合は1行目を削除すればOKです。
%%{init:{'theme':'default'}}%%
mindmap
top((ブログジャンル))
読書感想
筋トレ
睡眠
頭痛
勉強法
SEO
テレワーク
マネジメント
記事まとめ
ラジオ
オードリーANN
ゆる言語学ラジオ
アシタノカレッジ
ナイツ ザ・ラジオショー
マイゲーム・マイライフ
アフター6ジャンクション
資格
HTML5プロフェッショナル
OSS DB Silver
Notion
データベース作成手順
データベース活用事例
便利ポイント
ブログカスタマイズ
HTML・CSS
JavaScript
はてなブログ関連
デザインテーマ
記事まとめ
その他
自己紹介
Chrome拡張機能
Microsoft To Do
仕事
健康
音楽
指定なし
default
neutral
dark
forest
base
おわりに
ということで、Notion（Mermaid）のテーマ変更に関してアレコレ書いてみました。
テーマを指定しない場合は、色合いがかなり地味でした。
特にマインドマップは色が地味なことで、ちょっと見づらい感じがありました。
それがテーマ変更により、かなり見やすくなりました。
ちなみに自分は、ER図もマインドマップも「forest」が好みの色合いでした。
今後Mermaidで書く際は、テーマ指定して書いていこうと思います。
この記事が参考になれば幸いです。
Notion×Mermaid 関連記事
Notion×Mermaidは他にも記事を書いています。
こちらも良ければぜひ。
