Notionでマインドマップが作成できることをご存じですか?Notionは、マインドマップを作成するためにも利用できる柔軟で魅力的なツールです。この記事では、Notionでマインドマップを作る魅力的な3つの方法を紹介します。今回は、mermaid 記法を使用して作成する方法、オンラインツールを埋め込む方法、そして有料のnotion AIを使用する方法をご紹介します。それぞれの方法には、特長や使い方が異なりますので、自分に合った方法を選択してみてください。
Notionでマインドマップを作る魅力的な3つの方法は以下の通りです。
- mermaid 記法を使用する方法【習得するには時間がかかる】
- Embed指令を使用して オンラインツールを挿入する方法【簡単かつ無料】
- notion AIを使用する方法
方法1:mermaid 記法を使用
まずはNotion内でマインドマップを作成する方法について解説します。
「/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記法でmindmapの作成の仕方
基本文法:
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進数値や色の名前を使用して指定できます。
ノードの形状の指定:
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;
classDef square fill:#fff,stroke:#000,stroke-width:2px,shape:square;
class B square;
この例では、ノードA、B、Cの形状がそれぞれ指定されています。style属性内のfillプロパティはノードの塗りつぶし色を、strokeプロパティは枠線の色を、stroke-widthプロパティは枠線の太さを指定します。形状はclassDefディレクティブを使用して定義され、shapeプロパティに指定されます。この例では、square形状が定義され、ノードBにsquare形状が適用されています。
方法2:Embed指令を使用してオンラインツールを挿入する方法
Mermaid記法の習得は面倒だと思ったら、オンラインのマインドマップ作成ツールEdrawMind Web版をNotionに埋め込んでしまえば、とても簡単です。
まずは空白の図面で「/embed」を入力してください。
入力欄で https://www.edrawmind.com/app/create をコピペ―してください。
そうすると、マインドマップ作成の専用ツールをnotionに挿入しました。
「新規ファイル」>「マインドマップ」の順で新しいマインドマップファイルを立ち上げます。
以上のように、マインドマップのひな形が表示されます。
その上、トピック/枝分かれの追加とか、スタイルの変更とか、かんたんに完成できます。専門ツールですので、操作しやすくて、テンプレートも豊富です。
Mermaid記法を習得しなくても、マインドマップをパパッと作れます。それに、共有リンクを他の人に送れば共同編集が可能です。無料機能もMermaid記法よりきれいなマインドマップを作成することができます。
この使いやすいツールは無料インストール版もあります。インストール版が欲しい方は以下のボタンからダウンロードしましょう。
方法3:notion 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のアピールポイントは、自動化されたタスク管理、インテリジェントな情報整理、自然な言語処理、カスタムワークフローの作成、チームコラボレーション、柔軟性と拡張性にあります。