Mind Elixir 数据结构详解一个JSON彻底看懂思维导图树模型【免费下载链接】mind-elixir-core⚗ Mind Elixir 是一个框架无关的前端思维导图内核项目地址: https://gitcode.com/SSShooter/mind-elixir-coreMind Elixir 是一个框架无关的开源前端思维导图内核而理解它的数据结构是玩转这款思维导图工具的第一步。整张思维导图——所有节点、连线、总结框、布局方向——最终都保存在一个纯 JSON 对象里。本文带你从零拆解这个思维导图树模型不用写一行代码也能看懂看完即可自由构造、导入、导出 Mind Elixir 的思维导图数据。一、全局总览思维导图 JSON 长什么样Mind Elixir 导出的完整数据MindElixirData由 4 大块组成定义见 src/types/index.ts{ nodeData: { topic: 我的思维导图, id: me-root, children: [] }, arrows: [], summaries: [], direction: 1, theme: { name: Latte, palette: [#dd7878] } }字段必填作用nodeData✅整棵节点树唯一必需的字段arrows❌跨节点连线自定义链接数组summaries❌总结框把一组节点框起来数组direction❌布局方向0/1/2/3theme❌主题调色板 CSS 变量meta❌任意自定义扩展数据 最简情况一个只含根节点的nodeData就能渲染出一张思维导图。二、树的核心NodeObj 节点对象整棵树就是一层层嵌套的NodeObj完整字段定义见 src/types/index.ts。只有 2 个必填字段{ topic: 节点文本, id: bd1c24420cd2c2f5, children: [ { topic: 子节点, id: c1f068377de9f3a0 } ] }可选字段按用途分组一目了然分组字段说明外观style字号、颜色、背景、加粗等内容增强tags/icons/hyperLink/image标签、图标、超链接、内嵌图片结构expanded是否展开折叠状态保存在数据里结构direction主分支朝左(0)还是朝右(1)扩展note/metadata备注以及任意自定义业务数据高级branchColor/dangerouslySetInnerHTML分支配色用 HTML 完全替换节点内容两个容易踩坑的细节parent字段不用手填。父节点引用是内核渲染时自动挂上去的见 src/types/index.ts 的注释导出数据时会被自动剔除导出类型NodeObjExport OmitNodeObj, parent就保证了 JSON 无循环引用。id是 16 位十六进制字符串由内核的generateUUID()生成src/utils/index.ts。手写数据时随便给唯一值即可复制数据导致 id 重复时内核提供refreshIds一键重刷全部 id。三、direction 布局方向0 / 1 / 2 / 3 各是什么意思方向常量定义在 src/const.ts值常量布局效果0LEFT左右布局节点默认朝左1RIGHT左右布局节点默认朝右2SIDE双侧布局左右各一半3DOWN上下布局从上往下生长它出现在两处顶层MindElixirData.direction控制主分支默认方向而每个主分支节点自己的direction0 或 1可以单独指定它朝左还是朝右实现左右混排。四、arrows 连线用两个 id 把任意节点连起来连线不是树结构的一部分而是平铺在顶层的数组。每个箭头对象核心字段定义见 src/arrow.ts{ id: ac5fb1df7345e9c4, label: Render, from: beeb784cc189375f, to: beeb7a6bec2d68f5, bidirectional: false, style: { stroke: #8839ef, strokeDasharray: 2,5 } }关键设计from和to存的是目标节点的id而不是节点本身。这样节点无论怎么移动、删除连线数据始终是一份轻量引用删除节点后内核会自动清理指向已删节点的连线。delta1/delta2记录拖拽控制点的偏移用于弯曲弧线不填则自动计算。五、summaries 总结框parent start/end 索引总结框用来把同一个父节点下的连续几个兄弟节点框在一起。结构定义见 src/summary.ts{ id: a5e6978f1bc69f4a, label: 底部菜单功能, parent: bd1ba66996df4ba4, start: 0, end: 3 }parent被框节点们的父节点 idstart/end父节点children数组中的下标范围含两端同样是用索引引用不存节点本身所以插入/删除节点后失效的总结框会被渲染时自动清理。六、动手实践创建、导入、导出数据三步搞定数据流转创建空图MindElixir.new(根节点文本)直接生成一个合法 JSONsrc/index.ts导入mind.init(data)首次初始化mind.refresh(data)运行中替换整图导出mind.getData()返回 JS 对象mind.getDataString()直接拿到 JSON 字符串存数据库或发后端都方便仓库里有一份完整的示例数据包含 tags、icons、图片节点、双箭头、总结框和主题配置强烈建议对着读一遍src/exampleData/1.ts。七、新手常见问题QJSON 里必须带parent吗不需要。parent是内核运行时自动维护的序列化时会被剥掉手写数据只管children嵌套即可。Q如何把业务数据如数据库主键存进节点用metadata字段它支持任意 JSON 类型且可泛型化NodeObjMyMeta类型系统帮你全程校验。Q导出的 JSON 太大节点文本里的换行、样式会丢吗不会。getData()是数据的完整快照topic、style、expanded折叠状态、arrows、summaries、direction、theme原样保留重新init即可 1:1 还原。一句话总结一棵递归的children树 两份基于 id 引用的轻量数组arrows / summaries 布局与主题配置这就是 Mind Elixir 思维导图的全部数据模型。理解了它你就能轻松实现自定义导入导出、数据同步、AI 生成导图等一切高级玩法。【免费下载链接】mind-elixir-core⚗ Mind Elixir 是一个框架无关的前端思维导图内核项目地址: https://gitcode.com/SSShooter/mind-elixir-core创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考