みやもとメモ

「Notion」「資格」「ブログカスタマイズ」「Microsoft To Do」「Chrome拡張機能」などについて書いていきます。

目次
目次

【Notion】MermaidでER図を書いてみる(作成手順も記載)

この記事をシェアする

Notionデータベース活用事例の記事をいくつか投稿しているのですが、リレーションが複雑になってきたものがいくつかあります。

具体的には「読書記録Notion」と「筋トレNotion」の2つです。

読書記録Notionは、4つのデータベースを使用しています。

  • 読書記録
  • 著者一覧
  • 月別読書量
  • 年別読書量

上記4つをリレーションで繋げて管理しています。

筋トレNotionは、3つのデータベースを使用しています。

  • 筋トレカレンダー
  • 筋トレ部位
  • 筋トレメニュー

上記3つをリレーションで繋げて管理しています。

データベースが増えていくと、どうしても全体像が見えにくくなってきます。
なので、「ER図」というものを作成して全体像を掴みやすくしてみます。
※ER図とは?に関しては後述。

今回の記事では、Notion上でのER図の書き方や、実際に作成したER図の画像を貼ったりしてみます。

それでは本題へ。

前提情報

Mermaidとは?

まずはMermaidとは?に関して書いておきます。

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。

出典:グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO

上記の引用に「ER図」は書かれていませんが、ER図を生成することも可能です。

詳しくは以下のリンクを見て頂ければと。
dev.classmethod.jp

ER図とは?

ER図とは?に関しても書いておきます。

ER図のEはエンティティ(Entity)の略で、Rはリレーションシップ(Relationship)の略です。つまりER図は「エンティティ=モノ」と「リレーションシップ=関係」の組み合わせでシステムのデータやデータ間の処理構造を設計します。

出典:ER図とは?書き方やテクニックをわかりやすく解説

詳しくは以下のリンクを見て頂ければと。
products.sint.co.jp

作成したER図

記事の冒頭でも触れた「読書記録Notion」と「筋トレNotion」、それぞれのER図を作成しました。

読書記録Notion

リンク

読書Notionの詳細は以下を見て頂ければと。
miya-moto-memo.hatenablog.commiya-moto-memo.hatenablog.commiya-moto-memo.hatenablog.com

ER図

読書NotionのER図はこちらです。

読書NotionのER図

プロパティ名とかはザックリの感じで、厳密ではないです。
ただ、各データベースの繋がりはイメージしやすくなったかなと思います。

コード

上記ER図の基となるコードはこちらです。

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 "月別読書量"
	}

筋トレNotion

リンク

筋トレNotionの詳細は以下を見て頂ければと。
miya-moto-memo.hatenablog.commiya-moto-memo.hatenablog.com

ER図

筋トレNotionのER図はこちらです。

筋トレNotionのER図
コード

上記ER図の基となるコードはこちらです。

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 "筋トレ部位"
	}

参考リンク

ER図を作成するにあたって、以下リンクを参考にさせて頂きました。
mermaid.js.orgzenn.devzenn.dev

作成手順

NotionでER図を作成する手順を書いていきます。


STEP
Notionページでコードブロックを作成する。
STEP
言語リストから「Mermaid」を選択する。
STEP
表示パターンで「分割」を選択する。
STEP
MermaidのER図用のコードを入力する。
※今回は上記の筋トレNotionのコード
STEP
コードに間違いがなければ、ER図が即時で表示されます。
※コードに誤りがあると以下のようにエラー表示されます。

テーマ(色合い)を変更できる

これまで紹介したER図は色合いがちょっと地味です。
それに関して色々と調べてみたところ、テーマ指定することで色合いを変更できるようです。
テーマ(色合い)変更に関して記事にしているので、こちらも良ければぜひ。

miya-moto-memo.hatenablog.com

ちなみにテーマ適用すると以下のような感じです。
テーマは5種類ほどあり、以下は「forest」を指定しています。

読書Notion(テーマ:forest)
筋トレNotion(テーマ:forest)

おわりに

ということで、「NotionでER図を書いてみる」に関してアレコレ書いてみました。

改めてER図を作成したことで、自分の中でもデータベース間の関係性を整理できました。

あと、ER図も書けてしまうNotionは便利だなぁと改めて思いました。

この記事が参考になれば幸いです。

Notion×Mermaid 関連記事

Notion×Mermaidは他にも記事を書いています。
こちらも良ければぜひ。

TOPへ戻る HOMEへ