今天早上看何老师的视频，感慨用AI有时比较理想，有时不理想，所以他给我们一个作业，看能否使用AI来实现markdown转为思维导图的工具。

后来我就来尝试一下这个工具的实现。 这是最终效果 (访问直接体验直接体验。源码在文末)

整理好提示词，如下

提示词

需求目标：

• 根据markdown文件转换成思维导图
• 思维导图网页形式呈现
• 支持从网页上传markdown文件，解析、转换成生思维导图

实现要求：

• 基于当前的前端工程，请查看package.json 理解依赖及其版本号，在实现的过程中不能调整依赖及版本号，可以根据实际需要合理增加依赖
• 工程中已实现了很多组件，参考shadcn组件目录 components/ui , 需要考虑组件复用
• 保持界面风格一致、统一图标方案
• 解析markdown使用 https://github.com/remarkjs/react-markdown 依赖已安装，请理解使用方法
• 解析markdown后，能够分析出markdown文件的层次树关系，为接下来映射为思维导图做准备
• 思维导图也是层次树关系，你需要考虑如何合理实现并渲染呈现，合理引入依赖
• 把markdown解析的层次树关系数据，作为输入给到思维导图组件，由思维导图组件渲染
• 在实现时可以生成一个固定markdown文件带有多层次的示例用于验证
• 由App.tsx作为访问入口，相关组件在此引入

基于以下整理的提示词

• 提前准备好空的脚手架工程，使用的是react vite shadcn这个组合（这个项目不涉及后端，只有前端）。
• 在整理提示前我还专门查了一个相关技术实现，由于对markdown很熟，直觉觉得有npm包，就用先用AI推荐几个markdown解析的npm包，最终选择react-markdown.
• 对思维导图不熟悉，查了下没有统一的格式，没有格式意味没有标准库，所以提示词中没有要求相关库。
• 从工程化考虑不要重新发明轮子，习惯先从需求分解，寻找可复用的组件。
• 工程脚手架提前准备好，固定好基础依赖，不要让AI改动基础的依赖。 （即使写了这么多，还漏了一些，见下面章节）

我使用的工具是vscode+ roo code插件，模型使用了gemini-2.5-pro

接下来输出：

首次输出

好的，我已经阅读了 package.json 文件，对项目的技术栈和依赖有了清晰的了解。

关键信息如下：

• React: v19.1.1
• UI: shadcn/ui，包含大量 @radix-ui 组件。
• Markdown 解析: 已安装 react-markdown (v10.1.0)。
• 图标: lucide-react。
• 构建工具: Vite。
• 语言: TypeScript。

接下来，我需要了解应用的入口文件 src/App.tsx，以便规划如何将新功能集成进去。

基于您的要求，我推荐使用 React Flow (@xyflow/react) 这个库来渲染思维导图。

选择 React Flow 的理由:

• 功能强大: 内置了平移、缩放、节点/边交互等功能，能很好地满足您的需求。
• 高度可定制: 我们可以自定义节点的样式，使其与 shadcn/ui 的风格保持一致。
• 社区活跃: 拥有良好的文档和庞大的社区，便于解决开发中遇到的问题。
• 模块化: 核心库很轻量，可以按需引入功能。

接下来，我将为您制定一个详细的开发计划，并创建一个 TODO 列表来跟踪进度。

总体架构设计#

我们将采用组件化的方式构建应用，主要包含以下几个部分：

1. App.tsx (主应用组件): 作为应用的根组件，负责整体布局，并管理应用的状态，如上传的 Markdown 内容、解析后的树状数据、以及转换后的思维导图节点和边。
2. MarkdownUploader.tsx (上传组件): 位于左侧面板，提供文件上传按钮。当用户上传文件后，它将文件内容传递给 App.tsx。
3. MarkdownParser.ts (解析模块): 一个独立的工具模块，负责接收 Markdown 文本，使用 react-markdown 将其解析，并输出一个自定义的层级树状结构（例如 { id: 'root', content: 'Title', children: [...] }）。
4. MindMap.tsx (思维导图组件): 位于右侧面板，接收 App.tsx 传递过来的节点和边数据，并使用 React Flow 将其渲染成可交互的思维导图。

数据处理流程#

下面是数据从输入到输出的完整流程图：

Roo Code对输出任务化做的很好，有条理。一开始规划好任务，一条条执行并标记。 在上述输出中AI选择了reat flow进行思维导图渲染，给的理由也很充分，但在安装依赖时还是漏安装了必要的依赖。

运行时不出所料，会报错，这类型的前端工程一般首次输出完成都会报错，因为AI还不能兼顾全局，这类报错一般都能解决，主要是TypeScript的lint校验，导入了没有使用的类等。 所以直接问：

第二轮提问

执行pnpm build和 pnpm dev时存在错误，需要检查并解决

经过几轮修改，界面显示出来了。但发现了很多问题。

继续提问

需要四处优化改进：

1. Root节点名称为文档的名称，这个固定不变，每个思维导图只有一个Root
2. 节点按层次展示，如2级节点在3级节点上方，3级节点在4级节点上方。而不是平排、重叠，展示出结构化和层次感
3. 节点可以收起、展开。默认全部展开，点击具体节点可以收起该节点下属所有节点；再次点击展开下属节点
4. markdown文件加载后，在左侧加载内容以方便对照

每个问题分别描述清楚，结构化输入。

接着规划任务，完成任务。

这轮优化运行后，又发现问题：

继续提问

经验证发现以下问题需优化:

1. 收起展开的按钮难以点击，收起后点击无法展开，这部分考虑从体验便捷角度优化；收起展开事件优先其他事件（如移动拖拽事件），页面上角落放置一个toggle按钮：一键展开所有/一键收起所有
2. 排列：如果是横向层次排列，则连线是从高一级的右侧到低一级的左侧。而不是现在高一级的下方到低一级的上方，这样视觉美观较差

这轮的回答，包括接下来两轮都没有能够解决收起展开按钮的事件。

不知道什么原因，我决定换个开发工具，更换了cursor GPT-5模型。

问GPT-5

分析当前工程，这是一个markdown解析成思维导图mindmap的功能。现在有个问题：在每个收起展开点击节点按钮没有效果，点击角落的按钮也没有效果。需要检查排查原因

毕竟是最新的模型，回答就是不一样，也解决了按钮不能点击的问题

GPT-5回答

简要进展：我定位到折叠/展开无效的核心原因是节点可见性判断依赖了不存在的 parentId。由于节点树是通过 edges 建的，布局和隐藏逻辑必须从 edges 推断父子关系，否则点击不会触发实际隐藏子树。另外右上角的“Collapse All/Expand All”按钮放在画布外的绝对定位层上，可能被交互层覆盖，已改为 React Flow 内置的 Panel。

我已完成以下修复与优化：

• 在 src/components/MindMap.tsx 中，重写 getLayoutedElements：
• 通过 edges 构建 child -> parent 映射，向上回溯判断是否有任意折叠祖先来决定节点可见性。
• 仅返回可见 edges，避免连线和隐藏节点残留。
• 每次布局使用全新的 dagre 图，避免上次布局的残留状态干扰。
• 将右上角的“Collapse All/Expand All”按钮移入 React Flow 的 Panel，避免层级和事件拦截问题。
• 保持节点组件 MindMapNode 的 onToggleCollapse 行为，点击能正常触发并重新布局。

已验证：

• 本地构建通过（有体积警告但不影响功能）。
• 无新增 ESLint 报错。

请在页面中试试：

• 点击节点右侧的 +/- 按钮，子树应立即隐藏/显示。
• 点击右上角的“Collapse All/Expand All”按钮，全图应折叠/展开。

变更要点：

• 修改 src/components/MindMap.tsx，基于 edges 正确计算“是否有折叠祖先”；将“全折叠/全展开”按钮放入 React Flow Panel 内。

运行效果如下

接下来让GPT-5增加一些主题，纯黑白比较单调。

问GPT-5

请根据当前使用的mindmap渲染组件，是否支持主题更换？如果支持的话在左上角增加一个切换主题的选择

最后让AI加了一些自带示例能直观展示。 访问直接体验

源码在github

总结

• 提示词一开始整理了很多，但是还是遗漏了需求细节：思维导图的展示形式、折叠收起事件、如何定义根节点这些点，需求提出人都没有考虑清楚，AI可能会帮你考虑也可以不会帮你考虑；
• markdown要在页面加载显示，是合理的需求，用于对照，也验证思维导图有渲染，这个在需求中却没有提到；
• 提示词中加入了让AI生成一个markdown用于验证，这点考虑的测试，测试在工程实践中是必须的一环。也可以你指定已有的markdown让其解析渲染；
• 整个时间大概花了2小时不到（整理本文大约又花1小时多），vscode的roo code插件很不错，能够先规划任务，逐条解决，支持架构思考过程；但gemini-2.5-pro总是429错误，这个有空找下解决办法；
• 工程化实践不要发明轮子，使用已有开源组件，成熟、直接用；
• 生产环境使用要规划测试用例验证、review代码；
• 使用自己熟悉的脚手架工程；
• 这样规模的工程要是没有AI帮助，我们做的可能性很小，因为需要时间规划设计编码测试，正如这个博主说的：I wouldn’t even have bothered to write without Claude Code, simply because they’d take too much of my time.（如果没有Claude Code，我甚至懒得写，仅仅因为它们会占用我太多的时间。）出处：Getting Good Results from Claude Code
• 有了AI这类的工具开发确实很快；
• 工具开发出来后，离产品还是有点差距，也可以继续简单优化，做一个在线思维导图分享的应用；