让AI实时生成生长中的思维导图Mind Elixir流式渲染实战教程【免费下载链接】mind-elixir-core⚗ Mind Elixir 是一个框架无关的前端思维导图内核项目地址: https://gitcode.com/SSShooter/mind-elixir-coreMind Elixir 是一个免费的、框架无关的 JavaScript 思维导图内核只需几行代码即可嵌入任意前端项目。本教程将手把手教你利用它的Plaintext 格式 内置转换器实现AI 边生成、思维导图边生长的实时流式渲染效果——用户不再干等而是看着节点像呼吸一样逐个冒出来。为什么流式渲染是 AI 思维导图的刚需大多数AI 生成思维导图的产品流程都是这样的用户点击生成转圈等待 530 秒整张图一次性蹦出来问题在于AI 的输出生本就是逐 token 流式到达的你却非要等全部拿完才渲染白白浪费了边生成边展示的机会。流式渲染的目标是AI 每吐出一段文字页面上的思维导图就长出一片新枝叶。体验立刻从等结果变成看表演 Mind Elixir 为什么天生适合流式渲染两个关键设计让它成为流式场景的理想选择refresh(data)整图刷新 API不需要 diff、不需要手动增删节点每次直接把最新的数据整体喂进去内核负责重绘Plaintext 纯文本格式 内置转换器思维导图可以用缩进文本表达而不完整的缩进文本依然能解析——这是流式场景最重要的特性JSON 差一个括号就全废缩进文本截断在半行照样能画出来。关于数据结构的详细说明可以参考项目内的转换逻辑文档refs/plaintext-converter.md。核心格式3 秒看懂 PlaintextMind Elixir 的 Plaintext 格式长这样规则只有两条一行一个节点、每层缩进 2 个空格- 前端技术栈 - 框架 - React - Vue - 构建工具 - Vite它还支持引用 ID[^id]、节点间箭头连接、{}内联样式和}总结节点完整的格式规范见 skills/plaintext-format/SKILL.md。对这个格式转换器入口在 src/utils/plaintextToMindElixir.ts对外通过mind-elixir/plaintextConverter子路径导出见 package.json 的exports配置。三步实现让思维导图实时生长第一步安装并初始化内核npm install mind-elixirimport MindElixir from mind-elixir import mind-elixir/style.css const mind new MindElixir({ el: #map, direction: MindElixir.RIGHT, })第二步累积流式文本并实时解析用内置的plaintextToMindElixir()把已到达的部分文本转成内核数据不完整的行直接忽略import { plaintextToMindElixir } from mind-elixir/plaintextConverter let buffer for await (const chunk of aiStream) { buffer chunk try { mind.refresh(plaintextToMindElixir(buffer)) } catch (e) { // 半行数据解析失败很正常跳过即可 } }第三步交给内核刷新上一步的mind.refresh(data)就是全部了。每次调用内核都会用最新数据整体重绘画布思维导图随之长高。官方流式渲染的完整参考实现含组件封装与节流代码在这里skills/streaming-mindmap/SKILL.md。三个让体验更顺滑的优化技巧技巧做法效果⏱️ 节流更新每 200500ms 才解析渲染一次而不是每个字节都刷新避免大地图时 UI 卡顿️ 容错解析try/catch包住解析失败就跳过这一帧半行文本不会导致页面报错 自动跟随每次刷新后定位到最后一个节点镜头追着新长出的节点走自动跟随的实现也很直白遍历数据找到最后一个节点然后调用mind.findEle(nodeId)拿到 DOM 元素再mind.scrollIntoView(element)即可。让 AI 直接输出思维导图提示词技巧在 Prompt 里明确告诉 AI 使用 Plaintext 格式成功率最高请以下面的缩进文本格式生成思维导图每行一个节点每级缩进 2 个空格- 根节点 - 子节点 1 - 细节 1.1另外项目内置了npx skills add技能安装机制可以把包括流式思维导图渲染在内的官方指南装进你的 AI 编码工具让 AI 照着最佳实践帮你写集成代码小结与延伸阅读回顾一下这条链路其实非常短AI 流式输出文本 →plaintextToMindElixir()解析 →mind.refresh()重绘几个值得继续深挖的资料入口流式渲染完整教程skills/streaming-mindmap/SKILL.mdPlaintext 格式规范skills/plaintext-format/SKILL.md双向转换逻辑详解refs/plaintext-converter.md转换器实现源码src/utils/plaintextConverter.ts中文功能介绍readme/zh.md现在你的 AI 应用也可以拥有看着思想一点点长出来的思维导图了 【免费下载链接】mind-elixir-core⚗ Mind Elixir 是一个框架无关的前端思维导图内核项目地址: https://gitcode.com/SSShooter/mind-elixir-core创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考