Notionでマインドマップを作る魅力的な3つの方法✅
編集者： Edraw
マインドマップ How-Tos
Notionでマインドマップが作成できることをご存じですか？Notionは、マインドマップとロジックツリーを作成するためにも利用できる柔軟で魅力的なツールです。この記事では、Notionでマインドマップを作る魅力的な3つの方法を詳しく紹介します。
- mermaid記法を使用する方法【無料・時間がかかる】
- Embed指令を使用して オンラインツールを挿入する方法【無料体験・迅速な作成】
- notion AIを使用する方法【有料】
それぞれの方法には、長所短所と使い方が異なりますので、ニーズに合わせて選択してみてください。
1.Mermaid記法でマインドマップを描く方法
- 長所：完全無料
- 短所：習得には時間がかかる、カスタマイズするのがやや面倒
まずはmermaidでマインドマップを作成する方法について解説します。
「/Code」と入力すると候補のひとつとして「コード」が表示されますので、クリックします。
以下では言語選択を行います。青枠部分をクリックすると言語候補がでてきますので、Mermaidを選択します。
今回はコードとしては以下を入力します。
|
graph TD; A[Root] --> B[Node A]; A --> C[Node B]; A --> D[Node C]; |
先に示した例では、graphディレクティブを使用してマインドマップを作成しています。TDは"top-down"を意味し、マインドマップが上から下へと展開されることを示しています。A[Root]はルートノードを表し、B[Node A]、C[Node B]、D[Node C]はそれぞれAの子ノードを表しています。矢印（-->）は親ノードから子ノードへの関係を示しています。
このMermaid記法を使用して、マインドマップを作成し、それをレンダリングすることができます。以下がマインドマップの例です。
mermaid記法の基本文法：
Mermaid記法のgraphディレクティブは、グラフを作成するための基本的なディレクティブです。以下に、graphディレクティブの基本的な文法を示します。
[direction]: グラフの方向を指定します。一般的な方向は次のようになります。
|
TD: 上から下へ（Top Down） LR: 左から右へ（Left to Right） RL: 右から左へ（Right to Left） BT: 下から上へ（Bottom Up） |
[options]: グラフのオプションを指定します。一般的なオプションは次のようになります。
width: グラフの幅を指定します。
height: グラフの高さを指定します。
その他、スタイリングやレイアウトに関するオプションがあります。
ノードとリンクの定義: ノードやリンクの定義はインデントされています。ノードはノードID[ラベル]の形式で定義されます。リンクはノードA --> ノードBの形式で定義されます。各行はセミコロン（;）で終わります。
これはgraphディレクティブの基本的な構文です。これを使用して、グラフを作成し、レンダリングすることができます。
分岐の指定：
Mermaid記法のgraphで分岐を表現する方法について説明します。分岐は、ノードが複数の異なる方向に接続される場合に使用されます。以下に、分岐を作成する方法を示します。
|
graph TD; A[Root] --> B[Node A]; A --> C[Node B]; A --> D[Node C]; B --> E[Node D]; B --> F[Node E]; C --> G[Node F]; |
この例では、ノードA（Root）から3つのノードB、C、Dへの分岐が示されています。そして、ノードBから2つのノードE、Fへの分岐が示されています。同様に、ノードCから1つのノードGへの分岐が示されています。
これにより、複数のノードが異なる方向に分岐するグラフが作成されます。
ノードの色の指定：
Mermaid記法のgraphでノードの色を指定する方法について説明します。ノードの色を指定するには、ノードの定義内でstyle属性を使用します。以下に、ノードの色を指定する方法を示します。
|
graph TD; A[Root] --> B[Node A]; A --> C[Node B]; A --> D[Node C]; style A fill:#ffcccc,stroke:#ff0000,stroke-width:2px; style B fill:#ccffcc,stroke:#00ff00,stroke-width:2px; style C fill:#ccccff,stroke:#0000ff,stroke-width:2px; |
この例では、ノードA、B、Cの色がそれぞれ指定されています。style属性内のfillプロパティはノードの塗りつぶし色を、strokeプロパティは枠線の色を、stroke-widthプロパティは枠線の太さを指定します。色は16進数値や色の名前を使用して指定できます。
豆知識：使いたい色の16進数値を分かるには、スクリーンショットを多用する便利ツール Snipasteで活用すればいいです。
ノードの形状の指定：
Mermaid記法のgraphでノードの形状を指定する方法について説明します。ノードの形状を指定するには、ノードを囲む記号の変更が必要です。
- [Node] は長方形
- (Node)は丸角長方形
- ((Node)) は円形
- {Node}はひし形
それだけでなく、Mermaidの公式HP（英語）では更なる詳細な設定が記載されていますので、興味がある方はご確認ください。
以下に、ノードの形状を指定する方法を示します。
2.Embed指令でオンラインツールを挿入する方法
- 長所：コードの記法を勉強する必要がない、軽くて操作しやすい、デザイン性も高い
- 短所：ネット環境の安定性が求められる
Mermaid記法の習得は面倒だと思ったら、オンラインのマインドマップ作成ツールEdrawMind Web版をNotionに埋め込んでしまえば、とても簡単です。
まずは空白の図面で「/embed」を入力してください。
入力欄で https://www.edrawmind.com/app/create をコピペ―してください。
そうすると、マインドマップ作成の専用ツールをnotionに挿入しました。
「新規ファイル」>「マインドマップ」の順で新しいマインドマップファイルを立ち上げます。
以上のように、マインドマップのひな形が表示されます。
その上、トピック／枝分かれの追加とか、スタイルの変更とか、かんたんに完成できます。専門ツールですので、操作しやすくて、テンプレートも豊富です。
Mermaid記法を習得しなくても、マインドマップをパパッと作れます。それに、共有リンクを他の人に送れば共同編集が可能です。無料版でもMermaid記法よりきれいなマインドマップを作成することができます。
AI機能も搭載しておりますので、マインドマップの自動生成も実現可能です。
この使いやすいツールのインストール版が欲しい方は以下のボタンからダウンロードしましょう。
3.notion AIを使用する方法
- 長所: コードを勉強する必要がない、AIと対話しながらマインドマップを作成する
- 短所: 有料機能
Notion AIはNotionに付属しているAI機能です。Notion AIは無料でも利用できますが、無料枠を超過するとサブスクリプションの購入を促されますのでご注意ください。
引用(https://www.notion.so/ja-jp/product/ai)
まずはNotionを開きます。
入力箇所で「スペース」キーを入力すると、Notion AIに対するプロンプト画面に切り替わります。今回は、マインドマップを作成したいので以下のように「新しい趣味の見つけ方をmermaid形式で出力してください」とプロンプトに入力します。
結果として以下のようなmermaid形式の図が表示されました。
まとめ
Notionは、オンラインのノートやプロジェクト管理、ドキュメント作成など、さまざまな使途に活用できるツールです。マルチツールとしての機能が豊富で、ユーザーが個々のニーズに合わせたカスタマイズが可能です。Notionでマインドマップを作る3つの方法には、まずmermaid記法を使う方法があります。これは無料で利用可能で、視覚的なマインドマップを簡単に作成できます。次に、オンラインツールを埋め込む方法があり、EdrawMind Web版などを使ってマインドマップを作成し、Notionに挿入できます。最後に、有料のnotion AIを使う方法もあります。Notion AIのアピールポイントは、自動化されたタスク管理、インテリジェントな情報整理、自然な言語処理、カスタムワークフローの作成、チームコラボレーション、柔軟性と拡張性にあります。
関連記事