mermaidでマインドマップを作成する

最近、MarkdownやNotionの中で図を描く際に「Mermaid」を使う方が増えています。中でも注目されているのが、Mermaidでマインドマップを描く方法です。シンプルなテキスト記法で思考を整理でき、コードさえ書ければすぐに構造図を作成できる点が魅力です。

しかし、「ノードの色を変えたい」「線をカスタマイズしたい」「もう少しレイアウトを整えたい」と思ったことはありませんか。
Mermaidは軽量で便利な反面、デザインやレイアウトの自由度が限られているのが難点です。

この記事では、Mermaidでマインドマップを作成する2つの方法（A＝mindmap記法／B＝flowchart応用）を、それぞれの特徴・記法・実用サンプル付きで詳しく解説します。さらに、VSCodeでの表示方法、そしてより美しく完成させたい方のために、直感的な操作で作図できるWondershare EdrawMindの活用方法も紹介します。

Part1. Mermaidでマインドマップを描く2つの方法

Mermaidでは、マインドマップを作る手段が主に2つあります。ひとつは公式で提供されている「mindmap」記法（方法A）、もうひとつは「flowchart」記法を応用する方法（方法B）です。両者には明確な違いがあり、用途に応じた使い分けがポイントです。

方法A：Mermaidの公式「mindmap」記法

方法Aは、Mermaidが提供している正式なマインドマップ構文です。インデント（字下げ）と改行によって階層関係を表現するシンプルな仕組みで、思いついたアイデアをすばやくツリー構造にまとめられます。

メリット

• コード量が少なく、軽量。
• Markdownファイルにも埋め込みやすく、学習コストが低いです。

デメリット

• スタイル調整の自由度が低い点が課題です。
• ノードの形や文字、線の色を細かく設定することは難しく、レイアウトの制御も限定的です。

サンプル

%%{init: {'theme': 'base', 'themeVariables': {
    'mindmapRootColor': '#BCE2E8',
    'mindmapLineColor': '#7FB8BF',
    'mindmapTextColor': '#0B0F10',
    'mindmapMainColor': '#F9E3C0',
    'mindmapSecondaryColor': '#EFD9E6'
}}}%%
mindmap
  AIスキル学習プラン
    (目標設定)
      期間: 3か月
      成果物: ポートフォリオ1件
    [学習トピック]
      基礎理論
        線形代数
        統計と確率
    ))プログラミング((
        Python基礎
        可視化
    **実践タスク**
      Kaggleミニ課題
      個人アプリ作成
     学び方
      毎日の学習リズム
        平日: 60分
        週末: 2〜3時間の集中学習
      記録と振り返り
        Notionで要点メモ
        週次レビューで改善

ポイント

• 階層はインデント（スペース）で管理
• ノードの形は括弧で管理

(○○)

[○○]

))○○((

**○○**

• 「学習計画」や「構想メモ」など、まず大枠を整理したいときに最適

方法B：flowchartを応用してマインドマップ風に描く

方法Bは、flowchart（フローチャート）構文を応用してマインドマップのような構造を表現する方法です。ノードの形や線のスタイル、レイアウト方向（左右・上下）を自由に制御できるのが魅力です。

メリット

デザインの自由度が高く、線の種類や色、ノードの形・位置などを細かく調整できます。図の完成度を高めたい場合に向いています。

デメリット

接続を手動で指定する必要があり、コードがやや複雑になります。大きなマップでは管理が煩雑になることもあります。

サンプル

flowchart LR
  A[AIスキル学習プラン]:::root

  A --> B([目標設定]):::main
  B --> B1[期間: 3か月]:::note
  B --> B2[成果物: ポートフォリオ1件]:::note

  A --> C[[学習トピック]]:::main
  C --> C1[基礎理論]:::topic
  C1 --> C1a[線形代数]:::leaf
  C1 --> C1b[統計と確率]:::leaf
  C --> C2(((プログラミング))):::topic
  C2 --> C2a[Python基礎]:::leaf
  C2 --> C2b[可視化]:::leaf

  A --> D{{実践タスク}}:::task
  D --> D1[Kaggleミニ課題]:::leaf
  D --> D2[個人アプリ作成]:::leaf

  A --> E([学び方]):::main
  E --> E1[毎日の学習リズム]:::topic
  E1 --> E1a[平日: 60分]:::note
  E1 --> E1b[週末: 2〜3時間の集中学習]:::note
  E --> E2[記録と振り返り]:::topic
  E2 --> E2a[Notionで要点メモ]:::note
  E2 --> E2b[週次レビューで改善]:::note

  %% スタイル定義
  classDef root fill:#BCE2E8,stroke:#7FB8BF,color:#0B0F10,font-weight:bold,stroke-width:2px;
  classDef main fill:#F9E3C0,stroke:#E2B877,color:#0B0F10;
  classDef topic fill:#EFD9E6,stroke:#C9A8C4,color:#0B0F10;
  classDef leaf fill:#FFFFFF,stroke:#D0D0D0,color:#0B0F10;
  classDef note fill:#E6F5F9,stroke:#B8DDE6,color:#0B0F10,font-style:italic;
  classDef task fill:#DDF5D0,stroke:#A6CF8C,color:#0B0F10,font-weight:bold;

  class A root;
  class B,C,E main;
  class C1,C2,E1,E2 topic;
  class D task;
  class B1,B2,C1a,C1b,C2a,C2b,D1,D2,E1a,E1b,E2a,E2b leaf,note;

ポイント

•  冒頭で flowchart LR（左右）や flowchart TB（上下）を指定します。
•  ノード形状は [四角]、(丸)、{ひし形} などを使い分けます。
•  :::root は、後半で定義される classDef root のスタイルを適用する指定です。
•  --> は A から B へ矢印でつなぐ という意味です。

どちらを選ぶべき？

素早く思考を整理したいときは方法A（mindmap記法）、見た目の完成度を重視したいときは方法B（flowchart応用）がおすすめです。

ただし、どちらも「線の形」「文字の配置」などを完全にコントロールすることはできません。「より自由にデザインしたい」「プレゼン資料として使いたい」といった場合は、次で紹介するWondershare EdrawMindを活用するのが最適です。

Part2. Mermaidでマインドマップを作成する利用環境

Part1でMermaidの書き方を理解したところで、次に実際の描画・利用環境を見ていきましょう。Mermaidはブラウザ、エディタ、ノートアプリなどさまざまな環境で動作し、それぞれに特徴があります。下の表は主な利用環境の概要を比較したものです。

Part3. 高度なマインドマップを作成したいなら、EdrawMindがおすすめ 

Mermaidは軽量で便利な一方で、装飾やレイアウトの自由度には限界があります。一方、Wondershare EdrawMindは直感的な操作で美しいマインドマップを作成できる専用ツールです。下の表では、その特徴と使い分けのコツを整理しました。