kongkongyo/Ai-Markmap

解決する課題

長い記事やニュース、メモを読んで主要な構造を取り出すのは時間がかかります。AiMarkmapでは、生のテキストやトピックを貼り付けると、大規模言語モデル（LLM）が自動的に要点を抽出し、明確でインタラクティブなマインドマップに整理します。バックエンドやインストール、外部フレームワークは一切不要です。

仕組み

モダンなブラウザで単一のindex.htmlファイルを開きます。APIエンドポイント（OpenAIのchat/completions形式をサポートする任意のサービス。セルフホストモデルを含む）を設定し、APIキーを入力します。次にトピックを入力するかコンテンツを貼り付け、必要に応じて生成する代替マインドマップのバージョン数（1〜5）を選択し、生成ボタンをクリックします。アプリはコンテンツ（編集可能なプロンプトテンプレート付き）をLLMに送信し、構造化されたMarkdownアウトラインを受け取り、インタラクティブなマインドマップとしてレンダリングします。左側のMarkdownを編集するとマップがリアルタイムで更新され、ノードを右クリックして編集・削除が可能です。生成されたバージョンを切り替えたり、中心トピックから派生したスマートファイル名でPNGまたはSVGとしてエクスポートできます。APIキーを含め、すべてがブラウザのlocalStorageに保持され、サーバーには一切アップロードされません。

対象ユーザー

長文テキストを頻繁に要約する必要がある人（ジャーナリスト、学生、研究者、プロダクトマネージャー、一般の知識労働者）向けです。特に、ニュースの迅速な要約、記事構造の分析、会議メモの整理に役立ちます。APIキーの設定が必要なため、OpenAI互換のLLMサービスにアクセスできるユーザー、またはREADMEに記載されているSiliconFlowのような無料枠プロバイダーを利用しても構わないユーザーに適しています。

ハイライト

• ゼロ依存、純粋なフロントエンド: 単一のHTMLファイル。ブラウザで直接開くだけで、ビルドステップやサーバー、npmインストールは不要です。
• AI生成マインドマップ: 任意のテキストやトピックを貼り付けると、LLMが主要なアイデアの構造化された視覚マップを作成します。
• 複数バージョンを同時生成: スライダーで1〜5個の異なるマップスタイル/構造を生成し、最適なものを選択できます。
• リアルタイム編集: 左側のMarkdownソースを編集すると、マップが即座に更新されます。ノードを右クリックして編集・削除も可能です。
• ご自身のLLMを持ち込めます: セルフホストモデルを含む任意のOpenAI互換APIエンドポイントで動作し、利用可能なモデルを自動照会するか、カスタムモデル名を受け付けます。
• カスタマイズ可能なプロンプト: 専用設定パネルでAI指示テンプレートを変更できます（{{CONTENT}}プレースホルダーを維持する必要があります）。
• スマートエクスポート: topic_timestamp.png/svgのようなファイル名で高解像度PNGまたはSVGファイルをエクスポートできます。
• モバイルフレンドリー: スマートフォンとタブレットを完全サポート。下部タブバー、ハンバーガーメニュー、横向きプレビュー。
• プライバシー: すべての設定とAPIキーはブラウザのlocalStorageにのみ保存されます。
• コードの90%以上がAIによって記述: このプロジェクト自体がAI支援開発の興味深い例であり、HTML、CSS、JavaScriptの大部分がGPT-4o-mini、Gemini 2.5 Pro、Claude 3.7 Sonnetなどのモデルによって生成・リファクタリングされました。
• キーボードショートカット: Ctrl+Enterで生成、F11で全画面、Ctrl+SでPNGエクスポート、矢印キーでバージョン切り替えなどのクイック操作が可能です。