Mind-Map国产纯前端思维导图神器

Mind-Map是一个JS思维导图库，完全运行在前端。这意味着你不需要额外的后端支持，直接集成到自己的web项目里就能用。

作者把它设计成两部分：

• • 思维导图核心
• • 一个简易的web操作界面

整个库不依赖任何UI框架，纯原生实现，真的是太牛了！我翻了一下源码，作者代码组织得非常清晰，这点对于想二次开发的同学来说简直是福音。

强大功能一览

这个库的功能确实齐全，我随便列几个：

结构多样性支持：

• • 思维导图（经典的那种）
• • 逻辑结构图
• • 组织结构图
• • 目录组织图
• • 时间轴

更让我眼前一亮的是，它还支持鱼骨图和二维表格结构！市面上很多付费软件都没有这么全面。

我特别喜欢它的节点拖拽能力，可以随意调整节点层级和所属关系，用起来超顺手。还有多选、节点自由编辑，甚至支持富文本、图片和图标。

导出功能也相当丰富，不仅支持JSON、Markdown格式，还能导出图片和SVG。做报告时直接截图用，方便极了！

上手超简单

我自己试了下，集成真的很容易。首先安装：

npm install simple-mind-map

然后在代码里引入：

import MindMapfrom'simple-mind-map' // 创建实例 const mindMap = newMindMap({ el: document.getElementById('mindMapContainer'), data: {     "data": {         "text": "根节点"     },     "children": []   } })

这样就完成了！真正的开箱即用。

如果你想添加节点，只需：

mindMap.addNode('新节点')

想要完整的操作界面？项目还提供了一个完整的示例，可以直接拿来用：

git clone https://github.com/wanglin2/mind-map.git cd mind-map npm i npm run serve

是不是超简单？比某些动辄需要注册帐号、购买License的软件简单太多了。

源码干净清晰

我看了一下它的源码结构，设计相当合理：

src ├── core // 核心思维导图画布 ├── layouts // 各种布局结构 ├── themes // 主题系统 └── utils // 工具函数

这种组织方式让二次开发变得异常简单。比如你想扩展一个新布局，只需在layouts目录下添加对应文件即可。

甚至连现有的Rich-Text插件都是通过自定义节点实现的，非常解耦。

我的实测体验

我自己在一个小项目里用了它，实际效果比预期好很多。渲染性能不错，即使节点多了也很流畅。

特别值得一提的是它的主题系统，内置了多种配色，省去了自己调色的麻烦。而且通过简单的JS对象就能自定义新主题：

mindMap.setTheme({   name: '我的主题',   background: '#fff',   lineColor: '#999',   // 更多配置... })

直接干掉了传统思维导图软件的各种局限！

不得不提的是项目文档超全面，API描述清晰，跟着文档基本能实现所有功能。

对了，项目地址：
https://github.com/wanglin2/mind-map