用途:指导在前端实现流式思维导图渲染,使导图随 AI 模型生成或流式获取的数据实时生长。
主要能力:基于 mind-elixir 创建渲染组件;支持流式文本解析与增量更新;支持 JSON 与纯文本两种数据格式,其中纯文本(缩进或 Markdown 列表形式)更易做部分解析,推荐用于流式场景。
使用方式:先安装依赖 npm install mind-elixir;创建封装组件处理生命周期与更新,用 new MindElixir 初始化并在数据变化时调用 refresh;解析时可用 mind-elixir/plaintextConverter 的 plaintextToMindElixir 将文本转为 JSON 格式,并按需清理 Markdown 代码块;流式读取用 fetch 配合 reader.read() 与 TextDecoder 累积文本,再触发更新。
优化建议:对更新做节流(如 200-500ms)避免界面卡顿;尽量保持稳定的根节点 ID 防止整图闪烁;可用 findEle 与 scrollIntoView 自动滚动到最新节点;忽略不完整分块的解析错误。
适用场景:需要实时展示生成中思维导图的前端应用,尤其是配合 LLM 输出。
限制:示例基于 React,但也可用于其他前端框架;具体实现细节、平台与收费等资料暂未提供。