使用CodyBuddy通过AI编程实现一个Markdown文件生成思维导图功能

Hello，大家好，我是人月聊IT。今天继续聊AI辅助编程方面的话题。

在前面我曾经谈到过，先用AI编程做一个小工具，即通过Markdown格式的分解目录标题来自动生成一个可视化的思维导图。对于这个功能我开始做了不少的尝试，类似Claude4，GPT5，Qwen3等交几个大模型底层都做了验证，但是实际很难真正达到我期望的一个效果。

类似如下：

整个布局的美观性比较差，而且矩形框也出现了重叠情况。

就是一个防止节点重叠，实际AI自我迭代很多次，仍然没有完整的解决问题。我们后面思考了下，一个关键的原因可能还是增加了一个约束，就是必须输出svg格式的思维导图，我预计是由于增加这个约束导致AI很难按更好的方式来进行实现。

调了很多次没有调整好，而且后续进入越调整越乱的状态，我基本放弃。

昨天早上在跑步的时候，我突然想到类似思维导图这种应该是有标准的一些开源软件实现，我完全可以基于开源软件来进行修改实现我上面的需求。因此我又查询了下思维导图的一些开源实现。感觉jsmind库就是一个很好的选择。

于是说干就干，准备用CodeBuddy来实现这个AI辅助编程。刚好可以试验下CodeBuddy的几个新功能。

首先就是CodeBuddy支持直接从gitbub库进行克隆。类似如下命令：

git clone https://github.com/hizzgdev/jsmind

所以这里很方便就将这个项目克隆到了本地。

在打开这个项目后，我们在Example目录下找到了一个可用的demo.html程序，这个程序就是打开json格式的数据并展示为思维导图。那么我们就有了参考，很容易重新做一个提示语让AI来参考修改。

注意在这里，我开始只写了一个很简单提示语，即希望基于当前项目来帮我首先一个基于markdown格式文件来生成思维导图的新功能。

这个时候我们可以打开计划和设计模式，这个模式和Trae Solo类似。就是自己会进行相关的需求分析和设计，输出一个完整的设计文档，具体如下：

# Markdown思维导图转换器
## Core Features
- Markdown文件导入
- 思维导图配置面板
- 实时预览渲染
- 响应式布局
- 数据格式转换
## Tech Stack
{
  "Web": {
    "arch": "react",
    "component": "shadcn"
  }
}
## Design
现代简约的Material Design风格，左右分栏布局，左侧配置面板(320px)包含文件导入和参数配置，右侧思维导图容器自适应显示，采用蓝白配色方案和卡片式设计
## Plan
Note: 
- [ ] is holding
- [/] is doing
- [X] is done
[X] 创建React项目结构并安装shadcn/ui依赖
[X] 集成jsMind库并创建思维导图容器组件
[X] 实现Markdown文件上传组件，支持拖拽和点击上传
[X] 开发Markdown解析器，将标题层级转换为jsMind JSON格式
[X] 创建左侧配置面板，包含主题、布局、层级等配置选项
[X] 实现思维导图配置的实时更新和渲染功能
[X] 完善响应式布局和移动端适配
[X] 添加错误处理和用户反馈提示

最终生成的设计文件会先让你确认，确认没有问题后开始进行整个完整项目的生成工作。这个时候可以看到生成了一个完整的React项目。

但是实际上我们并不需要这么复杂。因为我们完全可以参考demo.html的方式，单独实现一个html页面来实现该功能就可以了。

因此我们重新修改提示语，关闭分析设计模型，提示语如下：

当前项目是一个js绘制思维导图的项目，我需要你先详细阅读该项目源代码和示例内容。exmaple下是其提供的demo程序和演示json数据。我现在需要实现一个基于markdown文件来生成思维导图的功能。具体就是可以通过一个按钮导入markdown文件，然后显示为一个思维导图。具体markdown文件格式参考 数据分析.md，最多四级标题。对于markdown格式文件导入后我希望你先转成该标准程序能够处理的标准json数据格式，再进行导图显示和渲染，这样很多逻辑都可以复用原来代码逻辑。注意我希望实现一个新的 html文件来实现该功能。该文件左边布局，左边是选择文件导入功能，同时将思维导图提供的类似样式，布局，默认显示等级，线条粗细等配置功能也显示在界面上可以灵活配置最终的思维导图显示方式。右边是一个显示思维导图的容易，我们需要自动适应布局最大化。因此我需要你单独生成一个html页面来完成。

在新方式下我们重新生成该html页面功能。

注意在这个生成出来后，我们后面只做了两次小调整。

一次是调整默认布局方式

注意导入的文件我不需要思维导图这个根节点，markdown文件中的一级标题就是根节点。markdown文件我会确保只有一个一级标题。另外导入文件我希望默认是左右布局方式。对于具体侧向布局，还是左右布局，我希望是一个配置项可以选择。

一次是增加混合配色方案选择

很好，增加一个主题 combine 的主题选择。这个主题根节点采用 Primary主题的底色，一级标题采用 Success主题的底色，二级标题采用Pumpkin的底色，三级标题采用Wisteria主题的底色。

最终我们运行测试，完全达到我们的效果如下：

注意整个功能完全达到我们的需求。而且整体展示效果也不错。

同时CodeBuddy还提供了一个关键功能，就是可以一键将你的程序持续集成和发布到Cloud Studio云环境上面，刚好对这个功能也进行了测试，具体返回如下信息：

🎉 部署成功！你的 Markdown 思维导图生成器已经成功部署到 CloudStudio。

📱 访问信息

预览地址：http://85282d8a825c4ccaa5eac39548f08790.ap-singapore.myide.io

🚀 功能特性

你现在可以在线使用以下功能：

1. 📁 文件导入 - 上传你的 数据分析.md 文件
2. 🎨 多种主题 - 包括特制的 "Combine (多彩层级)" 主题
3. 👁️ 布局控制 - 左右平衡、右侧、左侧布局可选
4. ✏️ 编辑模式 - 可以手动调整思维导图
5. 💾 导出功能 - 支持 JSON 导出和截图保存

🎯 使用建议

1. 打开预览地址
2. 点击"选择 Markdown 文件"上传你的 数据分析.md
3. 尝试选择 "Combine (多彩层级)" 主题查看多彩效果
4. 调整布局方式和展开层级
5. 使用导出功能保存结果

现在你可以在任何地方访问这个在线的 Markdown 思维导图生成器了！

所以大家也可以访问下这个地址来浏览该工具。

整个测试下来，整体感觉CodeBuddy在和Gtihub库的集成上，在开发完成的程序持续集成和部署上面都相当不错。但是对于当前提供的需求分析和设计模式能力，实际还是存在欠缺，往往需要经过多次迭代才能够达到比较理想的效果。

如果是国际版，主要还可以使用GPT5和Claude4.0大模型，从最终代码的生成质量和效率来看也相当不错。对于国际版本，当前也可以访问：

CodeBuddy.ai 这个网站来申请试用的邀请码。

今天对CodeBuddy工具的简单验证就到这里，希望对大家有启发。

最后打个小广告，8月16日也就是明天下午在深圳有一个腾讯云架构技术联盟的活动，重点就是讨论AI时代的AI编程和架构师个人成长，我到时候会参加AI时代架构师成长圆桌讨论，欢迎大家报名参加。