Notionでマインドマップを作る魅力的な3つの方法

Notionでマインドマップが作成できることをご存じですか？Notionは、マインドマップを作成するためにも利用できる柔軟で魅力的なツールです。この記事では、Notionでマインドマップを作る魅力的な3つの方法を紹介します。今回は、mermaid 記法を使用して作成する方法、オンラインツールを埋め込む方法、そして有料のnotion AIを使用する方法をご紹介します。それぞれの方法には、特長や使い方が異なりますので、自分に合った方法を選択してみてください。

Notionでマインドマップを作る魅力的な3つの方法は以下の通りです。

1. mermaid 記法を使用する方法【習得するには時間がかかる】
2. Embed指令を使用して オンラインツールを挿入する方法【簡単かつ無料】
3. 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記法よりきれいなマインドマップを作成することができます。

この使いやすいツールは無料インストール版もあります。インストール版が欲しい方は以下のボタンからダウンロードしましょう。