【AI時代の図形】マインドマップ・ホワイトボード2選 — Markmap・Excalidraw徹底比較

当サイトを閲覧いただきありがとうございます。本記事はAI時代にコード管理できる図形シリーズの第7回として、マインドマップ・ホワイトボード系2種を比較解説します。シリーズ全体の一覧は完全ガイドをご覧ください。

MermaidやD2は「テキストを書けば図が出る」ツールでしたが、今回はちょっと毛色が違います。GUI操作で直感的に図を描きつつ、データ自体はJSON/Markdownとしてコード管理するというハイブリッドなアプローチのツールです。

AI時代において特にMarkmapの活躍の幅は大きいです。AIに調べ物や思考の整理を依頼すると、見出しとリスト構造のMarkdownが返ってきます。それをそのままMarkmapに流し込めば瞬時にマインドマップとして可視化できる。「AIに整理させる → 全体像を目で確認する → 不足を発見して追加指示する」というループが非常に早く回ります。

2種比較表

Markmap — Markdownからマインドマップを自動生成

MarkmapはMarkdownの見出し・リスト構造からマインドマップを自動生成するツールです。ブラウザ上でノードの展開・折りたたみやズームが可能で、拡大しても劣化しないSVG形式で描画されます。

入力がMarkdownなので特別な構文を覚える必要がなく、VS Code拡張でリアルタイムプレビューもできます。

サンプル

# AI時代の図形ツール

## 汎用ダイアグラム
- Mermaid
  - GitHub標準対応
  - 学習コスト低い
- D2
  - モダンな設計
  - 美しいデフォルトテーマ
- PlantUML
  - UML全般対応

## データ可視化
- Vega-Lite
  - 宣言的JSON
- Chart.js
  - Webアプリの定番
- Recharts
  - React特化

## テキスト系
- ASCII Art
- Ditaa
- Svgbob

このMarkdownを渡すだけで、中央から放射状に広がるマインドマップが生成されます。

メリット・デメリット

学習コストがほぼゼロなのが一番の特長です。入力はMarkdownの見出しとリストそのままなので、新しい構文を覚える必要が一切ありません。展開・折りたたみやズームもブラウザ上で行えますし、VS Code拡張ならリアルタイムプレビューもできます。

ただ、マインドマップ以外の図は描けません。また、Markdownの見出しが深くなると図のノードもどんどん小さくなるので、5階層以上のネストは実用上かなり厳しいです。情報量が増えたらファイルを分けるか、深い階層を折りたたんで使うのがコツです。

AIとの相性

Markdownの見出し・リスト構造はLLMにとって最も自然な出力パターンなので、AIとの相性が非常に良いです。「この概念をマインドマップ用のMarkdownで整理して」と依頼すると、そのままMarkmapに通せる構造化されたMarkdownが出てきます。

私はAIに調べ物をさせた後の思考整理によく使っていて、AIの出力をMarkmapのVS Code拡張に貼り付けるだけで全体像がパッと見えるのがとても便利です。

Excalidraw — 手書き風ダイアグラムをJSONで管理

Excalidrawは手書き風スタイルでダイアグラムを描画できるオープンソースのホワイトボードツールです。2020年のリリース以来、ソフトウェアエンジニアの間で急速に普及しました。データはJSONファイル（.excalidraw）として保存され、Git管理もできます。

なお、ExcalidrawにはExcalidraw+という有料プランもあります。

データフォーマット（JSON）

{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {
      "type": "rectangle",
      "x": 100, "y": 100,
      "width": 200, "height": 80,
      "backgroundColor": "#a5d8ff",
      "fillStyle": "hachure",
      "roughness": 1,
      "boundElements": [{ "type": "text", "id": "text1" }]
    },
    {
      "type": "text",
      "id": "text1",
      "x": 150, "y": 130,
      "text": "Server"
    }
  ]
}

メリット・デメリット

手書き風のスタイルが独特で、「まだ決定稿じゃないよ」というニュアンスが自然に伝わります。GUIが直感的でドラッグ&ドロップですぐ描けますし、ライブコラボレーションやオフライン動作にも対応しています。

コード管理という観点では弱点があります。JSONの中身は座標と幅と高さの数値の羅列で、図形を少し動かしただけで差分が大量に発生します。Git上ではほぼレビュー不能になるので、差分管理はあきらめてバージョン管理だけの用途と割り切るのが現実的です。テキストから図を自動生成するタイプのツールではないので、MermaidやD2とは使い方が根本的に違います。

AIとの相性

ExcalidrawのJSON（座標・幅・高さの数値が並ぶ構造）をAIに直接生成させるのは現実的ではありません。座標計算はLLMの苦手分野で、要素が重なったり画面外に飛んだりします。

ただし、ExcalidrawにはMermaidインポート機能があるので、「AIにMermaidで生成 → Excalidrawにインポートして手書き風に清書」というワークフローは実用的です。AIの得意なテキスト生成とExcalidrawの直感的なGUI編集を組み合わせる使い方です。

選定ガイド

実践Tips：AI → Mermaid → Excalidrawワークフロー

Excalidraw単体ではAI生成が難しいと書きましたが、実はMermaidを経由する方法がかなり実用的です。

1. AIに「○○のフローチャートをMermaidで」と生成させる
2. Excalidrawを開き、メニューから「Mermaid to Excalidraw」を選択
3. 生成されたMermaidコードを貼り付けてインポート
4. 手書き風の図として自由に配置やスタイルを調整

この方法ならAIの生成力とExcalidrawの表現力を両立できます。プレゼン資料や設計ドキュメントに「カッチリしすぎない手書き風の図」を入れたいときに便利です。

導入方法

Markmap

npm install -g markmap-cli
markmap input.md -o output.html

VS Code拡張「Markmap」でリアルタイムプレビューもできます。

Excalidraw

excalidraw.comにアクセスするだけで使えます。VS Code拡張「Excalidraw」もあります。

この記事に関連する記事

まとめ

本記事ではAI時代のコード管理図形として、マインドマップ・ホワイトボード系2種を比較解説しました。如何だったでしょうか。

個人的にはAIとの相性でMarkmapがかなり気に入っています。AIに思考整理を頼んでMarkdownで出力させれば、それがそのままマインドマップになるのは本当に楽です。GUIで直感的に描きたいならExcalidrawが手軽で、Mermaidインポート機能を使えばAI生成からの清書もスムーズにできます。

次回は数学・学術系（TikZ、KaTeX/MathJax）について解説します。

シリーズ目次 → 『AI時代の図形』完全ガイド

各ツールの詳細は公式サイトも参考にしてください：Markmap / Excalidraw

それでは次の記事も閲覧いただけると幸いです。