【免费下载链接】mind-elixir-core⚗ Mind Elixir is a JavaScript, framework-agnostic mind map core.项目地址https://gitcode.com/gh_mirrors/mi/mind-elixir-core点击查看免费下载Mind Elixir 是一个开源的 JavaScript 思维导图核心mind map core它不绑定任何前端框架可以无缝接入 React、Vue、原生 JS 等任意技术栈。本文以官方中文文档 readme/zh.md 为主体结合仓库源码src/index.ts、src/types/index.ts、src/const.ts、src/utils/theme.ts 等逐层展开帮助你从零掌握 Mind Elixir 的安装、初始化、数据结构、事件系统、Markdown 扩展、操作守卫、图片导出、主题定制与快捷键体系最终能在自己的项目中快速搭建一个可交互、可持久化、可定制的思维导图。特性总览Mind Elixir 的设计目标可以概括为四个维度用户体验流畅直观的交互、现代简洁的界面、面向移动设备的触摸事件支持以及为高级用户准备的键盘快捷键。性能与架构最小的打包体积、针对大型思维导图优化的高性能渲染、框架无关可与任何前端框架配合使用、可扩展的插件化架构。核心功能内置拖放与节点编辑、多节点批量选择与操作、完整的撤销/重做操作历史、自定义节点连接Arrow与内容总结Summary。导出与定制支持 SVG / PNG / HTML 多种导出格式、基于 CSS 变量的轻松样式化、内置主题与自定义主题。这些能力并非空泛描述例如“完整的操作历史”对应 src/plugin/operationHistory.ts 的实现“多节点选择”由仓库内嵌的 viselect 模块src/viselect/src/index.ts驱动而“主题支持”则由 src/const.ts 中内置的THEME/DARK_THEME与 src/utils/theme.ts 的changeTheme实现支撑。下文将逐一给出可运行的代码。快速开始安装与引入Mind Elixir 提供 NPM 与 Script 标签两种安装方式二者最终都指向同一个核心包mind-elixir。通过 NPM 安装npm i mind-elixir -S然后在你的模块代码中引入import MindElixir from mind-elixir包管理器安装后还需要引入配套样式。中文文档在示例中使用的是import example from mind-elixir/dist/example1加载示例数据同时package.json的exports字段package.json为子路径导出了完整入口mind-elixir、Lite 版mind-elixir/lite、示例数据mind-elixir/example、SSR 布局工具mind-elixir/LayoutSsr、明文转换器mind-elixir/plaintextConverter、i18n 语言包mind-elixir/i18n以及样式入口mind-elixir/style与mind-elixir/style.css可以按需引入import MindElixir from mind-elixir import mind-elixir/style.css通过 Script 标签引入script typemodule srchttps://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js/script并在你的 CSS 文件中添加import https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css;初始化一个思维导图初始化是接入 Mind Elixir 的第一步。先准备一个容器元素div idmap/div style #map { height: 500px; width: 100%; } /style重大变更提醒自 1.0.0 起data应传递给init()而不是构造options。也就是说new MindElixir(options)只负责创建实例与配置真正的数据装载发生在mind.init(data)。完整的初始化流程如下import MindElixir from mind-elixir import { en } from mind-elixir/i18n import example from mind-elixir/dist/example1 let options { el: #map, // 或 HTMLDivElement direction: MindElixir.LEFT, draggable: true, // 默认 true contextMenu: true, // 默认 true toolBar: true, // 默认 true keypress: true, // 默认 true overflowHidden: false, // 默认 false mouseSelectionButton: 0, // 0 为左键2 为右键默认 0 contextMenuOption: { locale: en, // [cn,zh_CN,zh_TW,en,ru,ja,pt,it,es,fr,ko,ro,da,fi,de,nl,nb,sv] focus: true, link: true, extend: [ { name: 节点编辑, onclick: () { alert(扩展菜单) }, }, ], }, before: { insertSibling(el, obj) { return true }, async addChild(el, obj) { await sleep() return true }, }, } let mind new MindElixir(options) mind.install(plugin) // 安装你的插件 // 创建新的地图数据 const data MindElixir.new(new topic) // 或 example // 或从 .getData() 返回的数据 mind.init(data) // 获取一个节点 MindElixir.E(node-id)初始化选项详解源码级对照 src/types/index.ts 的Options接口各选项的类型与默认值如下选项类型默认值说明elstring \| HTMLElement必填容器选择器或 DOM 元素构造时会校验非法元素会抛出MindElixir: el is not a valid element见 src/index.tsdirection0 \| 1 \| 2 \| 31RIGHT布局方向分别对应LEFT、RIGHT、SIDE、DOWNdraggablebooleantrue已弃用建议改用editableeditablebooleantrue是否允许编辑contextMenuboolean \| ContextMenuOptiontrue右键菜单传对象可配置locale、focus、link、extendtoolBarbooleantrue顶部工具栏keypressboolean \| KeypressOptionstrue快捷键传对象可覆盖默认快捷键mouseSelectionButton0 \| 20框选触发键0 左键、2 右键beforeBefore{}操作守卫见下文“操作守卫”newTopicNamestringNew Node新建节点的默认主题文字allowUndobooleantrue是否启用撤销/重做overflowHiddenbooleanfalse为true时容器overflow: hidden且不再挂载鼠标事件平移/缩放被禁用compactbooleanfalse紧凑模式强制节点间距为小值generateMainBranch/generateSubBranch函数内置main/sub自定义主线/子线 SVG 生成器src/utils/generateBranch.tsthemeTheme跟随系统深色模式主题对象selectionContainerstring \| HTMLElement容器自身框选区域挂载的容器alignmentroot \| nodesroot布局对齐基准scaleSensitivitynumber0.1滚轮/快捷键缩放的灵敏度scaleMin/scaleMaxnumber0.2/1.4缩放上下限handleWheeltrue \| 函数true滚轮事件处理可自定义markdown函数undefined自定义 Markdown 解析器见下文imageProxy函数undefined图片 URL 代理主要用于解决跨域CORS问题pasteHandler函数undefined剪贴板中无 Mind Elixir 节点时的自定义粘贴处理mobileMultiSelectbooleanfalse启用移动端多选模式这些默认值在 src/index.ts 的构造函数中通过??运算符逐一落实例如this.direction direction ?? 1、this.scaleMin scaleMin ?? 0.2。此外构造函数还会根据prefers-color-scheme自动选择初始主题this.theme (theme || (mediaQuery.matches ? DARK_THEME : THEME))。方向常量与示例数据四个方向常量LEFT/RIGHT/SIDE/DOWN定义于 src/const.ts对应值分别为0 / 1 / 2 / 3同时作为MindElixir的静态属性暴露src/index.ts。仓库在 src/exampleData 目录下提供了多套可直接导入的示例数据如1.cn.ts、1.ts、org.ts等方便你快速体验不同布局与结构。数据结构节点对象规范Mind Elixir 的数据模型是标准的树形结构。截至当前版本单个节点NodeObj的完整结构如下// 到目前为止的整个节点数据结构 const nodeData { topic: 节点主题, id: bd1c24420cd2c2f5, style: { fontSize: 32, color: #3298db, background: #ecf0f1 }, expanded: true, parent: null, tags: [标签], icons: [], hyperLink: https://github.com/ssshooter/mind-elixir-core, image: { url: https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png, // 必填 // 你需要查询图片的高度和宽度并计算显示图片的适当值 height: 90, // 必填 width: 90, // 必填 }, children: [ { topic: 子节点, id: xxxx, // ... }, ], }对照 src/types/index.ts 的NodeObj接口除了文档示例中的字段还存在以下常用可选字段branchColor分支连线颜色dangerouslySetInnerHTML在节点内渲染自定义 HTML会替换节点内的所有内容note节点备注metadata任意类型的泛型元数据image.fit图片填充模式取值为fill | contain | covertags既可以是字符串数组也可以是TagObj{ text, style?, className? }从而为标签附加内联样式style支持fontSize、fontFamily、color、background、fontWeight、width、border、textDecorationdirection0 | 1用于SIDE左右分布布局时指定节点挂在左侧还是右侧。需要注意parent字段由框架在init时通过fillParent递归补齐见 src/methods.ts不要手动设置根节点的parent为null。顶层数据结构MindElixirDatasrc/types/index.ts除nodeData外还包含arrows连线、summaries摘要、direction、theme、compact与meta地图级任意元数据。事件处理基于总线Bus的订阅模型Mind Elixir 内部实现了一个轻量的发布订阅总线src/utils/pubsub.ts所有实例都暴露mind.bus支持addListener、fire、removeListener三个方法。常用事件监听写法mind.bus.addListener(operation, operation { console.log(operation) // 返回 { // name: 操作名称, // obj: 目标对象 // } // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit] // obj: 目标 // name: moveNode // obj: {from:目标1,to:目标2} }) mind.bus.addListener(selectNodes, nodes { console.log(nodes) }) mind.bus.addListener(expandNode, node { console.log(expandNode: , node) })src/utils/pubsub.ts 定义的完整事件表还包括selectNewNode、unselectNodes、changeDirection、linkDiv、scale、move、updateArrowDelta、selectArrow、unselectArrow、selectSummary、unselectSummary、showContextMenu。其中operation事件是接入业务持久化、审计、同步协作的关键通道——例如官方操作历史插件正是监听operation事件来记录快照的见 src/plugin/operationHistory.ts。updateArrowDelta的注释特别提示该事件触发频繁请使用节流throttling防止性能退化。数据导出与导入// 数据导出 const data mind.getData() // JavaScript 对象见 src/example.js mind.getDataString() // 字符串化对象 // 数据导入 // 初始化 let mind new MindElixir(options) mind.init(data) // 数据更新 mind.refresh(data)getData()返回MindElixirData对象可整体序列化存入后端或 localStoragegetDataString()内部调用stringifyData实现见 src/interact.ts返回 JSON 字符串init(data)用于首次装载内部会JSON.parse(JSON.stringify(data))深拷贝数据、填充parent引用、按data.theme/data.compact/data.direction覆盖实例配置src/methods.tsrefresh(data)用于更新已有实例的数据。仓库还提供了「思维导图 ⇄ 明文Markdown/大纲」双向转换能力mind-elixir/plaintextConverter子路径导出转换器对应源码 src/utils/plaintextConverter.ts、src/utils/plaintextToMindElixir.ts 与 src/utils/mindElixirToPlaintext.ts并有配套测试 tests/plaintext-parser.spec.ts 保障解析正确性可用于导入/导出大纲文本。Markdown 支持Mind Elixir 本身默认不启用Markdown 渲染markdown选项省略即不处理但提供两种接入方式// 禁用 markdown默认 let mind new MindElixir({ // 省略 markdown 选项 - 不进行 markdown 处理 }) // 使用自定义 markdown 解析器 let mind new MindElixir({ markdown: text { // 你的自定义 markdown 实现 return text .replace(/\*\*(.*?)\*\*/g, strong$1/strong) .replace(/\*(.*?)\*/g, em$1/em) .replace(/(.*?)/g, code$1/code) }, }) // 使用任何 markdown 库例如 marked、markdown-it 等 import { marked } from marked let mind new MindElixir({ markdown: text marked(text), })从类型定义看src/types/index.tsmarkdown回调的完整签名是(markdown: string, obj: NodeObj | Arrow | Summary) string第二个参数会告诉你当前渲染的是节点、连线还是摘要便于为不同对象差异化处理。仓库自带 src/markdown.css 为渲染后的 HTML 提供基础排版样式并在src/index.ts中一并引入。此外skills/customize-markdown/SKILL.md 提供了关于自定义 Markdown 渲染的专项说明。操作守卫before 钩子在节点插入、移动、删除等操作真正执行前Mind Elixir 允许你通过before选项插入校验逻辑。钩子返回false或 resolve 为false的 Promise即可否决该操作let mind new MindElixir({ // ... before: { insertSibling(el, obj) { console.log(el, obj) if (this.currentNode.nodeObj.parent.root) { return false } return true }, async addChild(el, obj) { await sleep() if (this.currentNode.nodeObj.parent.root) { return false } return true }, }, })从源码看before的实现机制非常优雅src/methods.ts中的beforeHook将nodeOperation里的每个操作方法包装成「先跑钩子、通过后再执行原方法」的异步函数src/methods.ts并通过Object.assign混入MindElixir.prototype。Before类型定义src/types/index.ts表明每一个节点操作方法都有对应的守卫钩子且钩子内this指向当前MindElixir实例因此可以在守卫中访问this.currentNode、this.getData()等实例成员。典型应用场景包括根节点不可删除、异步校验权限/数据库写入成功后放行英文文档示例中即展示了await saveDataToDb()后再返回true的写法。导出为图片自 v5 起官方推荐使用zumer/snapdom对节点 DOM 进行截图导出import { snapdom } from zumer/snapdom const download async () { const result await snapdom(mind.nodes) await result.download({ format: jpg, filename: my-capture }) }mind.nodes是包含整张思维导图渲染结果的 DOM 容器在 src/index.ts 中创建为me-nodes元素把它交给snapdom即可得到图片并触发下载。已弃用的 API⚠️已弃用mind.exportSvg()方法已弃用将在未来版本中移除。// 已弃用 - 请不要在新项目中使用 const svgData await mind.exportSvg()源码侧的证据同样明确src/plugin/exportImage.ts中的exportSvg与exportPng都带有deprecatedJSDoc 注释src/plugin/exportImage.ts并建议改用 modern-screenshot 方案。如果你想理解旧方案的原理可以阅读generateSvg它遍历me-nodes下的me-tpc节点、标签、图标、超链接与图片将每个 DOM 节点转换为对应的 SVG 元素rect、text、foreignObject、a、image再组合主线、子线、连线与摘要图层最后以image/svgxml的 Blob 返回exportPng则在此基础上将 SVG 转为 data URL 再绘制到 canvas并利用 base64 绕过 canvas 污染src/plugin/exportImage.ts。仓库另外维护了独立的 HTML 导出生态包mind-elixir/export-html可在 readme.md 的生态一节查看。主题定制Mind Elixir 的主题由「调色板 CSS 变量」两部分构成可在初始化时传入也可在运行时用changeTheme切换const options { // ... theme: { name: Dark, // 主线颜色调色板 palette: [#848FA0, #748BE9, #D2F9FE, #4145A5, #789AFA, #706CF4, #EF987F, #775DD5, #FCEECF, #DA7FBC], // 覆盖 CSS 变量 cssVar: { --main-color: #ffffff, --main-bgcolor: #4c4f69, --color: #cccccc, --bgcolor: #252526, --panel-color: 255, 255, 255, --panel-bgcolor: 45, 55, 72, }, // 所有变量见 /src/index.less }, // ... } // ... mind.changeTheme({ name: Latte, palette: [#dd7878, #ea76cb, #8839ef, #e64553, #fe640b, #df8e1d, #40a02b, #209fb5, #1e66f5, #7287fd], cssVar: { --main-color: #444446, --main-bgcolor: #ffffff, --color: #777777, --bgcolor: #f6f6f6, }, })请注意Mind Elixir不会观察prefers-color-scheme的变化。当系统明暗方案变化时请手动调用changeTheme切换主题。主题机制的源码解读内置主题src/const.ts 定义了浅色THEMELatte与深色DARK_THEMEDark并导出完整的cssVar变量集--node-gap-x、--main-gap-x、--root-color、--selected、--accent-color、--map-padding等同时以MindElixir.THEME/MindElixir.DARK_THEME静态属性暴露src/index.ts。合并策略src/utils/theme.ts 的changeTheme会先以theme.type dark为基准取内置深/浅主题的cssVar再用自定义cssVar覆盖合并最后通过container.style.setProperty逐项写入shouldRefresh参数默认为true即切换主题后自动重绘。紧凑模式联动当compact为true时changeTheme会额外强制覆盖间距变量为--node-gap-x: 15px、--main-gap-x: 30px等小值src/utils/theme.ts运行时可用changeCompact(boolean)动态切换。主题级分支生成器Theme类型支持在主题内携带generateMainBranch/generateSubBranchchangeTheme会同步替换实例的分支连线生成函数src/utils/theme.ts默认实现见 src/utils/generateBranch.ts。快捷键Mind Elixir 内置了一套面向键盘重度用户的快捷键体系其完整映射实现在 src/plugin/keypress.ts。常用键位如下按键功能Enter在节点后插入同级节点ShiftEnter在节点前插入同级节点Ctrl/CmdEnter插入父节点Tab添加子节点Delete/Backspace删除当前节点或连线、摘要F2编辑当前节点若选中摘要/连线则编辑其文本F1视图回到中心方向键在节点间移动选择DOWN布局下语义不同Ctrl/Cmd方向键切换左右布局Alt↑/↓、PageUp/PageDown节点上移/下移Ctrl/Cmd/Ctrl/Cmd-放大 / 缩小画布Ctrl/Cmd0重置缩放为 100%CtrlKCtrl0折叠全部节点CtrlKCtrl1展开全部节点CtrlKCtrl2...9展开到第 N 层Ctrl/CmdC / X / V复制 / 剪切 / 粘贴节点基于MIND-ELIXIR-WAIT-COPY魔数标记的剪贴板 JSON细节补充方向键的逻辑分支在 src/plugin/keypress.ts左右布局下←/→负责层级跳转根节点按左右侧选区中间节点、进入子节点、返回父节点↑/↓负责同级前后切换而在DOWN自上而下布局中语义互换。CtrlK是复合快捷键序列的起始键按下后 2 秒内未接续按键会自动取消src/plugin/keypress.ts。快捷键通过keypress: true默认启用若传入对象则对象中的键位会覆盖默认映射...options展开见 src/plugin/keypress.ts适合按产品需求定制。官方快捷键指南详见文档站仓库的 tests 目录如 tests/keyboard-undo-redo.spec.ts也包含针对键盘行为的 Playwright 回归测试。撤销 / 重做撤销与重做是「核心功能」中完整操作历史的具体体现实现位于 src/plugin/operationHistory.ts每个操作都会被记录为{ prev, next, operation, currentSelected, currentTarget }快照prev/next分别是操作前后的整份MindElixirDatamind.undo()/mind.redo()通过refresh()恢复对应快照并尽力恢复操作前后的选中节点例如删除类操作撤销后选中被恢复的节点监听operation、selectNodes、unselectNodes事件维护选中状态Ctrl/CmdZ撤销、Ctrl/CmdShiftZ或Ctrl/CmdY重做使用e.code物理按键匹配规避输入法与 CapsLock 干扰见 src/plugin/operationHistory.tsallowUndo默认为true当设为false时撤销能力关闭。加载新数据后若不想让用户一路撤销回旧图可调用mind.clearHistory()重置历史栈与基线快照src/index.ts。插件体系与常用生态插件化是 Mind Elixir 架构的核心卖点。mind.install(plugin)接收一个以实例为参数的函数mind.install(plugin) // 安装你的插件内部实现为install: (this, plugin) plugin(this)即插件获得完整实例引用可自由订阅mind.bus事件、调用公开方法或扩展 DOM。仓库自带工具栏、右键菜单、快捷键、拖拽、历史记录、导出等插件全部位于 src/plugin 目录例如 src/plugin/contextMenu.ts 支持通过contextMenuOption.extend追加自定义菜单项中文文档示例中的「节点编辑」菜单即由此实现。官方维护的周边生态包括mind-elixir/node-menu/mind-elixir/node-menu-neo节点右键菜单增强mind-elixir/export-xmind导出 XMind 格式mind-elixir/export-html导出 HTMLmind-elixir-reactReact 封装。开发与构建如果你想在本地开发或贡献代码仓库使用 pnpm 管理依赖见 pnpm-workspace.yamlpnpm i pnpm dev使用dev.dist.ts测试生成的文件pnpm build pnpm link ./更新 API 文档基于microsoft/api-extractor# 安装 api-extractor pnpm install -g microsoft/api-extractor # 维护 /src/docs.ts # 生成文档 pnpm doc pnpm doc:md重新生成MindElixir类成员MindElixir类的选项与方法声明src/index.ts 中的// #region GENERATED区块由 gen-members.js 基于dist/types中的编译产物生成从而让发布的.d.ts和 API 文档展示完整展开的签名。修改混入方法src/methods.ts或Options接口src/types/index.ts后请执行pnpm tsc # 生成最新的 dist/types pnpm gen:members # 重写 src/index.ts 中的生成区块src/index.ts底部的编译期守卫_MethodsDeclared、_OptionsDeclared、_MethodsInSync、_OptionsInSync见 src/index.ts会在区块不同步时让tsc失败因此忘记重新生成也会被及时发现。结语从安装引入、实例初始化、数据建模到事件订阅、操作守卫、Markdown 扩展、图片导出、主题定制与快捷键Mind Elixir 以「框架无关的核心 插件化架构」提供了完整的思维导图解决方案。本文中的每一项能力都能在仓库源码中找到对应实现如 src/methods.ts、src/plugin 目录、tests 目录的回归测试建议你在实际项目中边用边读源码必要时直接以插件形式扩展自己的功能。赞分享【免费下载链接】mind-elixir-core⚗ Mind Elixir is a JavaScript, framework-agnostic mind map core.项目地址https://gitcode.com/gh_mirrors/mi/mind-elixir-core点击查看免费下载相关推荐Mind Elixir Core 5.x 完全指南从安装初始化到主题定制与快捷键实操基于 readme/ko.mdMind Elixir Core 5.x 完全指南从安装初始化到主题定制与快捷键实操基于 readme/ko.md Mind Elixir 是一个开源、轻Mind Elixir思维导图从零开始的完整使用指南Mind Elixir思维导图从零开始的完整使用指南 Mind Elixir是一个 框架无关的开源思维导图核心库 无论你是前端开发者还是普通用户都能轻松创2025 超详细 Grayscale 主题实战指南从安装到深度定制的一站式解决方案2025 超详细 Grayscale 主题实战指南从安装到深度定制的一站式解决方案 你是否正在寻找一个既能彰显专业质感又能快速部署的单页网站框架作为开发者上一篇GitHub官方Primer CSS企业级Web应用样式解决方案终极指南下一篇终极Material-UI芯片输入解决方案material-ui-chip-input完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考