Mind Elixir核心库：一款强大的JavaScript思维导图引擎解析

井美婵Toby

于 2025-06-24 09:06:21 发布

阅读量277

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00353/article/details/148862112

Mind Elixir核心库：一款强大的JavaScript思维导图引擎解析

mind-elixir-core ⚗ Mind-elixir is a framework agnostic mind map core. 项目地址: https://gitcode.com/gh_mirrors/mi/mind-elixir-core

项目概述

Mind Elixir是一个开源的JavaScript思维导图核心库，它提供了构建思维导图应用所需的核心功能。作为一款轻量级、高性能的解决方案，它可以与任何前端框架无缝集成，非常适合需要思维导图功能的Web应用开发。

核心特性

1. 架构优势

轻量级设计：体积小巧，对项目构建影响极小
框架无关：可与React、Vue、Angular等主流框架配合使用
插件系统：支持功能扩展，满足个性化需求

2. 功能亮点

交互功能：
- 拖拽节点调整结构
- 节点编辑（文本、图标、标签等）
- 撤销/重做操作
- 快捷键支持
数据操作：
- 多种格式导出（JSON、Markdown等）
- 数据导入/导出
- 批量操作支持
可视化：
- 主题定制
- 节点样式自定义
- 多种布局方向
- 图像导出功能

快速入门指南

安装方式

NPM安装（推荐）

npm install mind-elixir --save

然后在项目中引入：

import MindElixir from 'mind-elixir'

CDN引入

<script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>

基础使用示例

准备容器：

<div id="mindmap" style="height: 500px; width: 100%;"></div>

初始化思维导图：

const options = {
  el: '#mindmap',
  direction: MindElixir.LEFT, // 布局方向
  // 其他配置项...
}

const mind = new MindElixir(options)
mind.init({
  topic: '中心主题',
  id: 'root',
  children: [
    { topic: '分支1', id: 'branch1' },
    { topic: '分支2', id: 'branch2' }
  ]
})

核心概念解析

数据结构模型

Mind Elixir使用树状结构表示思维导图，每个节点包含以下主要属性：

{
  topic: '节点标题',
  id: '唯一标识符', // 自动生成
  style: { fontSize: '16', color: '#333' }, // 样式配置
  expanded: true, // 是否展开
  children: [], // 子节点
  // 其他可选属性...
  tags: ['重要'], // 标签
  icons: ['⭐'], // 图标
  hyperLink: 'https://example.com', // 超链接
  image: { // 图片
    url: 'image.png',
    height: 100,
    width: 100
  }
}

事件系统

Mind Elixir提供了完善的事件监听机制：

// 监听操作事件
mind.bus.addListener('operation', (operation) => {
  console.log('操作类型:', operation.name)
  console.log('目标节点:', operation.obj)
})

// 监听节点选择事件
mind.bus.addListener('selectNode', (node) => {
  console.log('选中节点:', node)
})

高级功能

主题定制

Mind Elixir支持深度主题定制：

// 初始化时设置主题
const options = {
  theme: {
    name: '深色主题',
    palette: ['#848FA0', '#748BE9'], // 连接线颜色
    cssVar: {
      '--main-color': '#ffffff', // 文字颜色
      '--main-bgcolor': '#4c4f69' // 背景色
    }
  }
}

// 运行时切换主题
mind.changeTheme({
  name: '浅色主题',
  palette: ['#dd7878', '#ea76cb'],
  cssVar: {
    '--main-color': '#444446',
    '--main-bgcolor': '#ffffff'
  }
})

图像导出

Mind Elixir提供两种图像导出方式：

内置导出（推荐）：

const blob = await mind.exportPng()
const url = URL.createObjectURL(blob)
// 创建下载链接...

使用现代截图库：

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

const dataUrl = await domToPng(mind.nodes, {
  padding: 300, // 边距
  quality: 1 // 质量
})
// 创建下载链接...