AiMarkmap 是一个零依赖、纯前端的单文件 HTML 应用。它利用大语言模型（LLM）的强大能力，将您的文本、想法或 Markdown 内容智能地转换成结构清晰、可交互的思维导图。
关于本项目的一个有趣事实：
这个项目从最初的概念到最终的实现，超过 90% 的代码（包括 HTML, CSS, 和 JavaScript 逻辑）均由 AI（主要由 gemini-2.5-pro 和 claude-3-7-sonnet）编写、重构和迭代完成。
（以及Github发布和本帖内容都是由AI完成了主要任务。）
我个人主要用于快速浏览一些比较长的新闻…
非常感谢论坛各位大佬提供的公益API。
@tbphp @neuroplexus @curaalizm @colin1112
@lazy_craft @dabuliu
主要特性
AI 智能生成：输入任意主题或粘贴大段文本，AI 将自动为您提炼关键信息并生成结构化的思维导图。
多版本生成：通过调节滑块，一次生成多个（1-5个）不同风格和结构的思维导图版本，供您挑选最佳方案。
Markdown 实时预览：支持直接编写或粘贴 Markdown，并实时渲染为思维导图。同时，AI 生成的结果也支持编辑和即时更新。
高度可定制：
- API 设置：支持连接任何兼容 OpenAI API 格式的终端节点（包括自托管模型）。
- 模型选择：自动查询并加载可用模型列表，同时支持输入自定义模型名称。
- Prompt 自定义：通过独立的设置面板，您可以完全掌控发送给 AI 的指令（Prompt），以满足个性化需求。
双语界面：内置中英双语切换，满足不同用户的语言习惯。
导出为 PNG：一键将当前思维导图导出为高清 PNG 图片，方便分享和保存。
快捷键支持：提供全屏（F11）、切换版本（←/→）、保存（Ctrl+S）等快捷键，提升操作效率。
隐私安全：所有配置（包括 API 密钥）均保存在您本地浏览器的 localStorage中，不会上传至任何服务器。
快速开始
您可以直接在浏览器中打开 AiMarkmap.html 文件开始使用，无需安装或构建。
- 下载文件：下载
AiMarkmap.html文件。 - 浏览器打开：直接在您的现代浏览器（如 Chrome, Firefox, Edge）中打开该 HTML 文件。
- 配置 API：
- 点击界面右上角的
⚙️ API设置按钮。 - 在 API 地址 输入框中，填入您的 AI 服务提供商提供的 API 地址（它会自动为您补全
/chat/completions）。例如：https://api.openai.com/v1。 - 在 API 秘钥 输入框中，填入您的 API Key。
- 点击
💾 保存并关闭。
- 点击界面右上角的
- 开始生成：
- 在左侧输入框中输入您想生成导图的内容。
- 通过滑块选择希望生成的 版本数量。
- 点击
🚀 AI生成按钮。
- 浏览与导出：
- 等待 AI 处理完成，右侧将展示生成的思维导图。
- 如果生成了多个版本，点击顶部的
版本 X按钮进行切换。 - 点击
导出 PNG按钮即可保存图片。
配置详解
API 设置
- API 地址: 必须是一个兼容 OpenAI
chat/completions接口的 URL。工具会自动处理末尾的路径。 - API 秘钥: 您的服务凭证。点击旁边的
👁️图标可以切换密钥的可见性。
模型与 Prompt
- 模型选择:
- 点击
🔍 查询按钮可以从您的 API 地址自动获取可用的模型列表，并填充到下拉框中。 - 您也可以在下拉框中选择
自定义，并手动输入模型名称。
- 点击
- Prompt 设置:
- 点击
📝 Prompt设置按钮打开 Prompt 编辑器。 - 您可以修改模板来指导 AI 的行为。请务必保留
{{CONTENT}}占位符，它将被替换为您的输入内容。
- 点击
快捷键
| 按键 | 功能 |
|---|---|
F11 |
切换/退出思维导图全屏显示 |
Ctrl + S |
导出思维导图为 PNG 图片 |
← / → |
在多个 AI 生成版本之间切换 |
技术栈
本项目完全基于原生 Web 技术构建，无任何外部框架依赖。
- 核心逻辑: Vanilla JavaScript (ES6+)
- 思维导图渲染: Markmap (
markmap-lib&markmap-view) - SVG 渲染核心: D3.js
- 图片导出: html2canvas
大佬见笑了！
