如何快速上手Mind Elixir：零基础思维导图核心库完整指南 🚀

Mind Elixir 是一个开源的 JavaScript 思维导图核心库，支持与任何前端框架集成，提供流畅的交互体验和高效的思维导图编辑功能，帮助开发者轻松实现思维导图功能。

📋 准备工作：Mind Elixir 安装指南

一键安装步骤（NPM方式）

Mind Elixir 支持通过 NPM 快速安装，适用于现代前端项目：

npm i mind-elixir -S

安装完成后，在项目中引入核心模块和样式文件：

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

传统引入方式（Script标签）

如果你的项目不使用构建工具，可直接通过 Script 标签引入：

<script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
<style>
  @import 'https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css';
</style>

🔰 3分钟初始化思维导图

创建容器元素

首先在 HTML 中添加一个用于渲染思维导图的容器：

<div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

基础配置与初始化

通过简单配置即可创建思维导图实例，支持自定义方向、工具栏、快捷键等功能：

const options = {
  el: '#map', // 容器选择器
  direction: MindElixir.LEFT, // 思维导图方向
  draggable: true, // 启用拖拽
  toolBar: true, // 显示工具栏
  nodeMenu: true, // 节点菜单
  keypress: true, // 启用快捷键
  locale: 'zh_CN', // 中文本地化
}

// 创建实例并初始化
const mind = new MindElixir(options)
// 初始化数据（使用默认示例数据）
mind.init(MindElixir.new('根节点'))

Mind Elixir 思维导图基础编辑界面，展示根节点与工具栏

✨ 核心功能使用教程

节点操作：添加、编辑与删除

Mind Elixir 提供直观的节点操作方式，支持多种交互模式：

• 添加节点：选中节点后通过工具栏按钮或快捷键（Tab添加子节点，Enter添加同级节点）
• 编辑内容：双击节点直接编辑文本，支持自定义markdown解析
• 删除节点：选中节点后按Delete键或使用右键菜单

Mind Elixir 节点编辑功能展示，包含添加子节点和编辑文本

高级功能：批量操作与历史记录

多节点选择与操作

通过框选或Ctrl+点击实现多节点选择，支持批量移动、复制和删除：

// 监听节点选择事件
mind.bus.addListener('selectNodes', nodes => {
  console.log('选中节点数量:', nodes.length)
})

撤销/重做功能

完整的操作历史记录，支持无限次撤销/重做：

// 快捷键支持
// Ctrl+Z: 撤销
// Ctrl+Y: 重做
// 也可通过API调用
mind.undo() // 撤销
mind.redo() // 重做

Mind Elixir 多节点复制功能演示，支持批量操作

📤 数据导入导出全攻略

数据导出为JSON

一键导出思维导图数据，方便存储和分享：

// 导出JavaScript对象
const data = mind.getData()
// 导出JSON字符串
const dataStr = mind.getDataString()
console.log('思维导图数据:', dataStr)

从JSON导入数据

支持初始化导入和动态更新数据：

// 初始化时导入
const mind = new MindElixir(options)
mind.init(importedData)

// 动态更新数据
mind.refresh(newData)

导出为图片文件

通过插件支持将思维导图导出为PNG/SVG格式（需安装@ssshooter/modern-screenshot）：

import { domToPng } from '@ssshooter/modern-screenshot'

// 导出为PNG图片
const downloadImage = async () => {
  const dataUrl = await domToPng(mind.nodes, { padding: 20 })
  const link = document.createElement('a')
  link.download = 'mind-map.png'
  link.href = dataUrl
  link.click()
}

🎨 个性化定制：主题与样式

内置主题切换

支持明暗主题切换，可自定义颜色方案：

// 深色主题配置
mind.changeTheme({
  name: 'Dark',
  cssVar: {
    '--main-bgcolor': '#252526',
    '--main-color': '#ffffff',
  }
})

自定义节点样式

通过API动态修改节点样式：

// 获取节点并修改样式
const node = mind.getNode('node-id')
node.style = {
  fontSize: '16px',
  color: '#3298db',
  background: '#ecf0f1'
}
mind.updateNodeStyle(node)

Mind Elixir 中文界面与主题效果展示

🛠️ 插件系统与扩展

Mind Elixir采用插件化架构，可通过插件扩展功能：

官方插件使用

// 导入插件
import contextMenu from 'mind-elixir/plugin/contextMenu'
import toolBar from 'mind-elixir/plugin/toolBar'

// 安装插件
mind.install(contextMenu)
mind.install(toolBar)

常用插件介绍

• contextMenu: 右键菜单插件 src/plugin/contextMenu.ts
• operationHistory: 操作历史插件 src/plugin/operationHistory.ts
• exportImage: 图片导出插件 src/plugin/exportImage.ts

🚀 项目实战：快速集成到你的应用

React/Vue集成示例

Vue3集成

<template>
  <div ref="mapContainer" style="height: 500px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import MindElixir from 'mind-elixir'
import 'mind-elixir/style.css'

const mapContainer = ref(null)

onMounted(() => {
  const mind = new MindElixir({
    el: mapContainer.value,
    direction: MindElixir.RIGHT,
  })
  mind.init(MindElixir.new('Vue集成示例'))
})
</script>

性能优化建议

• 对于大型思维导图（>1000节点），启用虚拟滚动
• 通过overflowHidden: true选项限制视口范围
• 避免频繁的数据刷新，使用局部更新

📚 资源与文档

官方文档与示例

• 完整API文档：src/docs.ts
• 示例数据：src/exampleData/

开发与贡献

# 获取源码
git clone https://gitcode.com/gh_mirrors/mi/mind-elixir-core
cd mind-elixir-core

# 安装依赖
pnpm i

# 开发模式
pnpm dev

💡 常见问题解答

Q: 如何在移动端使用Mind Elixir？

A: 库内置支持触摸事件，确保设置正确的视口元标签，并通过CSS调整容器高度为100vh。

Q: 支持哪些数据格式导入？

A: 原生支持JSON格式，可通过扩展插件支持XMind、Markdown等格式src/plugin/export-html.ts。

Q: 如何自定义节点样式？

A: 通过node.style属性自定义，支持fontSize、color、background等CSS属性，详见类型定义src/types/index.ts。

Mind Elixir凭借其轻量级设计和强大功能，成为思维导图开发的理想选择。无论你是构建知识管理工具还是项目规划应用，都能快速集成并扩展出符合需求的思维导图功能。立即尝试，开启高效思维导图开发之旅吧！ 🚀