【VibeCodingChallenge＃12】マインドマップ自動生成ツール

🪄 はじめに：マンダラチャートからのひらめき

このVibeCodingChallengeでは、日々ツールを作成して、AIに何ができて、何ができないのか見定めようという個人的な挑戦です。
先日、ふと「マンダラチャート」のツールを作ったのですが

「マンダラチャートもいいけど、もっと柔軟にブレストできて、追加・削除・編集も簡単にできるマインドマップがあれば、もっと直感的に使えるのでは？」

そこから着想を得て、「AIと連携して、プロンプトベースでマインドマップを生成できるツール」を作ることに決めました。

※ちなみにマンダラチャートは以下です。
https://zenn.dev/acntechjp/articles/994cb0fb72b4bb

最終成果物

今回は以下のようなシンプルなマインドマップWebアプリを構築しました。
いつもの通り最終成果物です。
https://youtu.be/9TMyxwy_6EY

機能概要

1. テキスト入力からAIがマインドマップを自動生成
2. GUI上でノードの追加・削除・編集・ドラッグが可能
3. プロンプトでマップ全体を再編集可能（“○○を追加して”など）
4. 再編集のための提案もGeminiが一覧提示し、押下することで、自動修正
5. 保存すると、Json形式で保存。Json形式で読み込みも可能

Gemini APIで階層構造のJSONを生成し、Konva.jsで放射状に描画する仕組みです。

今回の学びKonva.js、D3.js

Konva.jsとは？

今回使ったKonva.jsはHTML5 Canvas上でインタラクティブな2Dグラフィックを描画できるライブラリです。特に以下の特徴を持ちます：

• ノードのドラッグ・ドロップが簡単
• テキスト・画像・図形の組み合わせが柔軟
• Reactと統合できる（React Konva）
• シンプルなAPIで学習コストが低い

D3.jsとの違い

今回ClaudeCodeを使う中で、「D3.jsは使わずに、、、」というフレーズが出てきたので、D3.jsとは？と思い、いつものことながら、AIに聞いてみました。

D3.js（Data-Driven Documents） は、データに基づいて 動的なグラフや可視化をHTML, SVG, CSSで描画するJavaScriptライブラリ です。

主な特徴：

• データをDOMにバインドして、視覚表現に変換できる
• 折れ線グラフ、円グラフ、ツリーマップ、ヒートマップなど豊富な可視化パターン
• トランジション（アニメーション）やインタラクションも可能
• SVGベースのため、拡大・印刷に強い
  ふむふむ、要するにデータを可視化させるためのライブラリですね。

でも、なんで比較対象に挙がったんだ？と思い、簡単に比較もしてみました
描画方式の違い
・Konva.js：HTML5 Canvas（ピクセルベースで高速描画）
・D3.js：SVGベース（構造が明確でスタイルがCSSで制御可能）
用途の違い
・Konva.js：UIインタラクションに強い（ノード編集、ドラッグ操作、ホワイトボード系）
・D3.js：データ可視化に強い（統計グラフ、ネットワーク図、トレンド分析など）
開発スタイルの違い
・Konva.js：ユーザー操作やイベントを中心とした命令的なロジック
・D3.js：データをDOMにバインドする宣言的スタイル
得意なシーンの違い
・Konva.js：マインドマップ、図形エディタ、キャンバスUI
・D3.js：折れ線グラフ、円グラフ、ツリーマップ、ヒートマップなど
パフォーマンスの違い
・Konva.js：Canvasなので大量ノードでも高速
・D3.js：SVGのためノード数が増えると描画が重くなりがち

ふむふむ、つまり、
軽くて、UI描写がインタラクションに変更できるような図を書きたい場合は、Konva.jsのほうがよさそう。
ちょっと複雑な数値データのグラフを使うときはD3.jsのほうがよさそうですね。

おわりに

今回やってみて「AI×GUIで思考を可視化する」この流れは今後さらに加速すると感じました。
以前から、私は、生成AIにとって、そのモデルやプロンプトだけでなく、いかにインプットやアウトプットを工夫するかが生成AIのポイントと言ってきましたが、今回マインドマップツールを作ってみて、さらにその考えを深めることができました。
今後もAIのみを使った、VibeCodingへの挑戦を続けていきますので、ぜひご覧ください。