Notion（Mermaid）でマインドマップを書いてみる

今回の記事では「Notion（Mermaid）でマインドマップを書いてみる」に関して書いていきます。

以前の記事で、NotionでER図を書いたものを紹介しました。

関連記事

NotionでER図を書いてみる

上記のER図はMermaidというマークダウン構文によって生成されます。
このMermaidではマインドマップも書けるようで、試しに書いてみます。

細かく言うと、「NotionでMermaidというマークダウン構文が使えて、そのMermaidでマインドマップを書いてみる」という感じです。

それでは本題へ。

前提情報

Mermaidとは？

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

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

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

上記の引用に「マインドマップ」は書かれていませんが、マインドマップを生成することも可能です。

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

マインドマップとは？

マインドマップとは？に関しても書いておきます。

マインドマップは、人間の自然な思考プロセスを反映したノート法です。

頭の中で起きていることが「見える化」されるので、考え続けることが非常にラクになります。全体を一目で見渡すことができ統合的に考えるのを促すため、思考整理、記憶、アイデア発想などに威力を発揮します。

出典：マインドマップとは? - マインドマップの学校 | Mindmap School

詳しくは以下のリンクを見て頂ければと。
www.mindmap-school.jp

作成したマインドマップ

今回作成したマインドマップの画像を貼ります。
マインドマップの内容は様々ですが、今回は「自ブログのジャンル」をマインドマップで表現してみます。

マインドマップ

自ブログのジャンルのマインドマップ

背景色や文字色のパターンが少ない気がしますが、たくさんあるジャンルを一目で確認できるのは良いですね。

コード

上記のマインドマップを生成するコードは以下の通りです。

mindmap
	top((ブログジャンル))
		読書感想
			筋トレ
			睡眠
			頭痛
			勉強法
			SEO
			テレワーク
			マネジメント
			記事まとめ
		ラジオ
			オードリーANN
			ゆる言語学ラジオ
			アシタノカレッジ
			ナイツ ザ・ラジオショー
			マイゲーム・マイライフ
			アフター6ジャンクション
		資格
			HTML5プロフェッショナル
			OSS DB Silver
		Notion
			データベース作成手順
			データベース活用事例
			便利ポイント
		ブログカスタマイズ
			HTML・CSS
			JavaScript
			はてなブログ関連
			デザインテーマ
			記事まとめ
		その他
			自己紹介
			Chrome拡張機能
			Microsoft To Do
			仕事
			健康
			音楽

ブログのジャンル

上記のコードは、ブログのグローバルメニューに配置しているジャンルを基に書いています。

ブログのグローバルメニュー

参考リンク

以下のサイトを参考にさせて頂きました。ありがとうございます。
mermaid.js.org
qiita.com

作成手順

Notion（Mermaid）でマインドマップを作成する手順を書いていきます。

STEP

Notionページでコードブロックを作成する。

STEP

言語リストから「Mermaid」を選択する。

STEP

表示パターンで「分割」を選択する。

STEP

Mermaidのマインドマップ用のコードを入力する。
※今回は上記のコード

STEP

コードに間違いがなければ、マインドマップが即時で表示されます。

※コードに誤りがあると以下のようにエラー表示されます。

おわりに

ということで、「Notion（Mermaid）でマインドマップを書いてみる」に関してアレコレ書いてみました。

今回は自ブログのジャンルをマインドマップで表現してみましたが、他にも様々なことをマインドマップで表現できます。

頭の中でゴチャゴチャしている、まとまっていない内容をマインドマップに書いて整理したり。
仕事の懸案事項でも良いですし、ブログネタでも良いですし、日記でも良いかなと思います。

これをNotion（Mermaid）内で書けるのも利点かなと思います。
通常のメモやリンク、画像の貼り付けとも組み合わせながらマインドマップを書いてみたりするのも良いかなと思います。

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

Notion×Mermaid 関連記事

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