学习工作 + MindFlow —— 在线思维导图编辑器demo

TRAE AI 创造力大赛 【大赛初赛专区】
1

学习工作 + MindFlow —— 在线思维导图编辑器

0. 先和大家打个招呼吧 :waving_hand:

你是谁： [独立开发者]

你是怎么用 TRAE 把 Demo 做出来的： 我本身是写代码的，但平时很少碰前端。这次用 TRAE Work，最大的感受是它把“想做个东西”到“有东西能用”之间的路径缩到了最短 。

不用搭环境、不用查文档、不用纠结选什么库——直接把想法用中文说清楚，它就生成一个能跑的 HTML。我需要加功能的时候，也是在对话框里接着聊，它会在已有代码的基础上继续改，不会把之前的逻辑搞乱。

最省心的是调试阶段：遇到报错直接把日志贴给它，它能定位问题并给出修复代码，省去了我自己翻 Stack Overflow 的时间。几十轮对话下来，从骨架到 2.0 版本，全程没写过一行前端代码。TRAE 对我来说，就是一个把“产品想法”翻译成“可运行代码”的翻译器 。

1. Demo 简介

是什么： MindFlow 是一款打开即用、无需安装、无需注册的在线思维导图编辑器，整个产品封装在单个 HTML 文件中，双击即可在浏览器中运行。

面向谁： 核心用户是学生、产品经理、策划人员、知识工作者——任何需要快速梳理思路、整理笔记的人。

主要功能：

  • 节点编辑：点击选中节点，支持添加子节点/同级节点、双击编辑文字、拖拽调整位置、折叠/展开子节点
  • 样式自定义：支持节点颜色、形状（圆角/圆形/菱形/矩形）、字体大小、内边距、边框颜色的个性化调整
  • 多格式导出：支持导出为 PNG 图片、PDF 文档、SVG 矢量图，以及 .mindflow 专有格式用于备份和分享
  • 数据持久化：自动保存到浏览器 localStorage，关闭页面后内容不丢失
  • 撤销/重做：支持 Ctrl+Z / Ctrl+Y 撤销重做操作

:camera_with_flash: 产品截图：

image
image1920×1032 68.5 KB

image
image1912×994 166 KB

2. Demo 创作思路

灵感来源： 我自己在做项目规划和读书笔记时，经常想随手画个思维导图理清逻辑。但每次打开 XMind 需要等待加载，打开 ProcessOn 需要登录，往往思路就断了。我想要一个**「双击即开、写完即走」**的纯粹工具。

想解决的问题： 现有思维导图工具存在明显的使用门槛——桌面端需要下载安装或付费，在线版需要注册登录且免费版功能受限。用户只是想快速整理思路，却被工具的「准备工作」消耗了注意力和时间。

为什么做这个方向： 我选择做单 HTML 文件形态，是因为它做到了真正的零门槛——不需要安装、不需要网络、不需要账号，任何一个有浏览器的人都能用。同时所有数据存在用户本地，没有隐私泄露风险。这个方向虽然「轻」，但恰恰解决了大多数用户最核心的痛点。

3. Demo 体验地址

本 Demo 为交互式 HTML 格式文件，已使用 Zip 格式打包，请下载下方附件解压后，双击 index.html 文件即可在浏览器中直接体验。

:paperclip: 附件：
MindFlow.zip (24.4 KB)

4. TRAE 实践过程

开发流程概述

整个 Demo 的开发完全基于 TRAE Work 完成。整体流程如下：

  1. 需求描述：在 TRAE Work 中描述创意，要求生成一个单 HTML 文件的思维导图编辑器
  2. 核心功能实现：基于 jsMind 开源库实现节点增删改、拖拽、折叠展开等核心交互
  3. 功能增强：逐步增加导出图片/PDF/SVG、导入 .mindflow 文件、节点样式自定义、线条样式自定义、撤销/重做等功能
  4. UI 打磨：优化界面设计和交互体验，确保美观度和易用性
  5. Bug 修复：修复图片节点文字更新、PDF 导出引用错误等细节问题

关键步骤截图

:camera_with_flash: 截图（不少于 3 张）

序号 截图说明
截图1 TRAE Work 中描述需求并生成初始 HTML 的对话界面
![image 690x358](upload://l80h4AkocmHmAZTNXY3T9WDfDi8.jpeg)

| 截图2 | 思维导图编辑器的核心界面（展示节点编辑、工具栏等） |

image
image1912×994 181 KB

| 截图3 | 导出功能演示（PNG / PDF / SVG 导出选项） |

image
image737×320 22.6 KB

| 截图4 | 节点样式自定义面板（颜色、形状等） |

image
image603×705 20 KB

关键任务 Session ID

序号 任务描述 Session ID
1 生成初始思维导图编辑器 HTML 框架

4320415240168828:6d98f60946b7f70baad7199bcc8da376_6a4b04ac0bc74c6904ba6905.6a4b04ad0bc74c6904ba6908.6a4b04ac0bc74c6904ba6906:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 09:28:13) |

| 2 | 实现节点增删改、拖拽、折叠展开等核心交互 | 4320415240168828:bb06c0ca3c1a4bf6981bfef4c23ea26f_6a4b04ac0bc74c6904ba6905.6a4b0cf00bc74c6904ba6a67.6a4b0cf00bc74c6904ba6a65:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 10:03:28) |

| 3 | 增加导出 PNG / PDF / SVG 功能 | 4320415240168828:8f0d2176510e3a4cbbc8124640177df7_6a4b04ac0bc74c6904ba6905.6a4b2b2e0bc74c6904ba7374.6a4b2b2e0bc74c6904ba7372:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 12:12:30) |

4 UI 优化与 Bug 修复 4320415240168828:6194d39e2e66dbe4757b59b6dca33097_6a4b04ac0bc74c6904ba6905.6a4c4f5176db6294386d9510.6a4c4f5176db6294386d950e:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 08:58:57)

5. 对应的报名审核通过的帖子链接

:paperclip: 我的报名帖：学习工作 + MindFlow —— 在线思维导图编辑器 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区

1 个赞