Repolode
提交项目
SSShooter

SSShooter/mind-elixir-core

与框架无关的 JavaScript 思维导图核心库，可在网页应用中嵌入可交互、可编辑的思维导图。

可替代:MindManagerXMind

在 GitHub 查看官网
Star
3,197
Fork
419
未关闭 Issue
11
最近提交
4天前

这是什么？

Mind Elixir Core 是一个在浏览器中渲染和编辑思维导图的 JavaScript 库，不依赖任何前端框架，既可以直接挂载到普通 HTML 页面，也可以与 React、Vue 等库配合使用。

它支持拖拽编辑、多节点选择、撤销与重做、键盘快捷键，并提供移动端触摸事件支持。导图可导出为 SVG、PNG 或 HTML，样式可通过 CSS 变量或带自定义调色板的主题对象调整。节点数据是普通的 JavaScript 对象，可通过 getData 读取，并用 init 或 refresh 恢复。

开发者可以通过插件扩展功能，使用操作守卫在添加或删除节点等变更前执行逻辑，还能为节点内容接入自定义 Markdown 解析器。项目已发布到 npm，也可通过 script 标签从 CDN 加载。

核心功能

  • 01与框架无关，可用于任意前端技术栈。
  • 02支持拖拽编辑、多节点选择以及撤销与重做。
  • 03支持触摸事件与键盘快捷键。
  • 04可导出为 SVG、PNG 和 HTML。
  • 05通过 CSS 变量和自定义主题调整样式。
  • 06提供插件系统和变更前的操作守卫。

适用场景

  • 在 Web 应用中加入可编辑的思维导图视图。
  • 在浏览器中构建笔记或头脑风暴类工具。
  • 将结构化数据生成思维导图并导出。
  • 在 React、Vue 或普通 JavaScript 页面中快速原型验证导图功能。

快速上手

  1. 1

    从 npm 安装包

    npm i mind-elixir -S
  2. 2

    在代码中导入库及其样式表

    import MindElixir from 'mind-elixir' import 'mind-elixir/style.css'
  3. 3

    创建容器 div 并用示例数据初始化思维导图

使用前须知

  • 需要为容器元素设置明确的高度才能显示思维导图。

收录于专题

图表、示意图与动画可视化工具前端框架与界面组件

标签

#mind-map#javascript#typescript#visualization#frontend#graph#drag-and-drop#mind-mapping#mindmap#tool

常见问题

mind-elixir-core 是什么？
与框架无关的 JavaScript 思维导图核心库，可在网页应用中嵌入可交互、可编辑的思维导图。 Mind Elixir Core 是一个在浏览器中渲染和编辑思维导图的 JavaScript 库，不依赖任何前端框架，既可以直接挂载到普通 HTML 页面，也可以与 React、Vue 等库配合使用。
mind-elixir-core 可以免费使用吗？用的什么许可证？
mind-elixir-core 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
mind-elixir-core 还在维护吗？
活跃维护中。mind-elixir-core 最近一次提交是在 2026年11月4日。
mind-elixir-core 适合用来做什么？
在 Web 应用中加入可编辑的思维导图视图。 在浏览器中构建笔记或头脑风暴类工具。 将结构化数据生成思维导图并导出。 在 React、Vue 或普通 JavaScript 页面中快速原型验证导图功能。
mind-elixir-core 怎么安装和运行？
从 npm 安装包: npm i mind-elixir -S 在代码中导入库及其样式表: import MindElixir from 'mind-elixir' import 'mind-elixir/style.css' 创建容器 div 并用示例数据初始化思维导图
在哪里获取 mind-elixir-core？
源代码和安装说明在 GitHub 上：https://github.com/SSShooter/mind-elixir-core

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目