mindmap-skill
基于OPML文件生成交互式思维导图的React工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：mindmap-skill。 它的用途是：基于OPML文件生成交互式思维导图的React工具 完整的 Skill 内容见：https://321skill.com/skills/mindmap-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我把这份产品功能清单的Markdown文档转换成OPML格式，用于生成思维导图。” 它会提取文档的层级结构，生成符合规范的OPML XML代码。或者，当你想调整思维导图配色时，可以说：“根据这个品牌主色#042940，生成一个包含5种协调颜色的palette.xml文件。”
介绍
这个Skill解决了一个常见痛点：如何将结构化的文本内容（如项目计划、知识体系、业务流程）快速、美观地转化为可交互的视觉化思维导图。它接受标准的OPML格式文件作为输入，自动生成一个支持点击、拖拽、缩放等操作的动态思维导图，并允许通过XML文件自定义配色方案。
使用方式非常简单。用户只需按照项目结构要求，准备好描述思维导图内容的mindmap.opml文件和定义颜色的palette.xml文件，然后通过一个轻量级的本地静态服务器（如Python的http.server或npx serve）运行项目即可在浏览器中查看和交互。整个过程无需复杂的构建步骤或依赖安装。
它非常适合需要将结构化文档进行可视化呈现的各类角色。例如，产品经理可以用它来梳理产品功能架构，内容创作者可以规划文章或视频的大纲，项目经理可以可视化项目任务分解，学生则可用于整理课程知识脉络。
使用建议方面，请确保通过本地服务器访问页面，而非直接双击HTML文件，以避免浏览器安全策略导致的文件读取失败。在编辑OPML文件时，遵循最佳实践，如保持节点标签简短、利用_note属性添加详细说明，并控制层级深度在3层以内，以确保生成的可视化结果清晰易读。
核心特点
与许多需要在线服务或复杂配置的思维导图工具不同，此Skill完全基于前端技术栈（React），支持纯本地、离线运行，且数据源（OPML）和样式（XML配色）完全由用户掌控的文本文件定义，易于版本管理和定制化。其交互细节（如悬停滚动长描述、Alt键切换节点状态）也经过精心设计。
注意事项
不适合需要实时协作、导出为多种格式（如PDF/图片）或处理超大规模（如数百个节点）思维导图的场景。
常见问题
为什么直接打开HTML文件显示‘Loading mind map…’？
由于浏览器安全限制，直接打开本地文件时无法读取同目录下的OPML/XML文件。必须通过本地静态服务器（如运行 `python3 -m http.server 3000`）来访问。
如何修改思维导图的布局和样式？
核心布局参数（如节点间距、分支角度）在 `index.jsx` 文件的React组件中定义，可以通过修改 `baseRadius`、`distanceFromParent` 等变量进行调整。字体和基础样式可在 `index.html` 中引用的CSS中修改。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/mindmap-skill/raw/index.md 读取 mindmap-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/mindmap-skill/raw/index.md（查看排版版本）