私有部署的强大思维导图工具：SimpleMindMap，支持多平台使用

2023年8月21日 162

笔记

对于思维导图工具，相信大家都不陌生，我也用过很多，最开始从Visio开始，然后更换为：MindMaster、MindManager，都是非常不错的思维导图工具，也有很丰富的模板使用，当然市面上还有很多很多，当然今天介绍的是一款可私有部署的思维导图工具-SimpleMindMap

简介

simple-mind-map是一个简单&强大的Web思维导图库，不依赖任何特定框架。

同时也提供丰富的客户端下载使用：支持Windows、Mac及Linux

特性

插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构
内置多种主题，允许高度自定义样式，支持注册新主题
节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要
节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容
支持画布拖动、缩放
支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式
支持导出为json、png、svg、pdf、markdown、xmind，支持从json、xmind、markdown导入
支持快捷键、前进后退、关联线、搜索替换、小地图、水印
提供丰富的配置，满足各种场景各种使用习惯

仓库目录

simple-mind-map
思维导图库，框架无关，Vue、React等框架或无框架都可以使用。
web
使用simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。
特性：
工具栏：支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要
侧边栏：基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板
导入导出功能：数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件
右键菜单：支持展开、收起、整理布局等操作
底部栏：支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图

浏览器兼容性

推荐使用最新版chrome浏览器。

有限测试情况：

正常运行：360极速浏览器（v13.5.2036.0）、opera浏览器（v71.0.3770.284）、Firefox（v98.0.2）

不支持：IE浏览器。

在线体验
 官网
 使用文档

私有部署

本项目的web目录下提供了一个基于simple-mind-map库、Vue2.x、ElementUI开发的完整项目，数据默认存储在电脑本地，此外可以操作电脑本地文件，原意是作为一个线上demo，但是也完全可以直接把它当做一个在线版思维导图应用使用，在线地址

如果你的网络环境访问GitHub服务很慢，你也可以部署到你的服务器上。

静态部署

项目本身不依赖后端，所以完全可以部署到一个静态文件服务器上，可以依次执行如下命令：

git clone https://github.com/wanglin2/mind-map.git
cd mind-map
cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map

然后你可以选择启动本地服务:

npm run serve

也可以直接打包生成构建产物：

npm run build

打包完后的入口页面index.html可以在项目根目录找到，对应的静态资源在根目录下的dist目录，html文件中会通过相对路径访问dist目录的资源，比如dist/xxx。你可以直接把这两个文件或目录上传到你的静态文件服务器，事实上，本项目就是这样部署到GitHub Pages上的。

如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。

如果你想把index.html也打包进dist目录，可以修改web/package.json文件的scripts.build命令，把vue-cli-service build && node ../copy.js中的 && node ../copy.js删除即可。

如果你想修改打包输出的目录，可以修改web/vue.config.js文件的outputDir配置，改成你想要输出的路径即可。

如果你想修改index.html文件引用静态资源的路径的话可以修改web/vue.config.js文件的publicPath配置。以及web/public/index.html文件的window.externalPublicPath配置。

另外默认使用的是hash路由，也就是路径中会在#，如果你想使用history路由，可以修改web/src/router.js文件，将：

const router = new VueRouter({
  routes
})

改成：

const router = new VueRouter({
  mode: 'history',
  routes
})

不过这需要后台支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问子路由时会返回404，所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面。

Docker

拉取镜像

docker run -d -p 8081:8080 shuiche/mind-map:latest

mind-map在容器中启动了8080端口作为web服务入口，通过docker运行容器时，需要指定本地映射端口，上面案例中，我们通过本地的8081端口映射到容器端口8080。

安装完成后，通过 docker ps 查看容器运行状态。

浏览器打开 127.0.0.1:8081 即可使用Web 思维导图功能。

对接自己的存储服务

应用数据默认存储在浏览器本地，浏览器本地存储容量是比较小的，所以当在思维导图中插入更多图片后很容易触发限制，所以更好的选择是对接你自己的存储服务，这通常有两种方式：

第一种

直接clone本仓库代码，然后修改web/src/api/index.js内的相关方法即可实现从你的数据库里获取数据，以及存储到你的数据中。

第二种

很多时候，你可能想始终使用本仓库的最新代码，那么第一种方式就不太方便，因为你要手动去合并代码，所以提供了第二种方式。

操作步骤如下：

复制web应用打包后的资源，包括：dist目录和index.html文件

修改复制后的index.html文件，首先在head标签里插入如下代码

<script>
window.takeOverApp = true
</script>

这行代码会提示应用不要初始化应用即：new Vue()，而是把控制权交给你，接下来再在body的最后插入你自己的js代码，内联或则外链都可以，内联示例如下：

<script>
// 你自己的请求数据的方法
const getDataFromBackend = () => {
return new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({
      // 思维导图数据
      mindMapData: {
        root: {
          "data": {
              "text": "根节点"
          },
          "children": []
        },
        theme: { "template":"avocado","config":{} },
        layout: "logicalStructure",
        config: {},
        view: {}
      },
      // 页面语言，支持中文（zh）、英文（en）
      lang: 'zh',
      // 页面部分配置
      localConfig: null
    })
  }, 200)
})
}
// 注册全局方法
const setTakeOverAppMethods = (data) => {
window.takeOverAppMethods = {}
// 获取思维导图数据的函数
window.takeOverAppMethods.getMindMapData = () => {
  return data.mindMapData
} 
// 保存思维导图数据的函数
window.takeOverAppMethods.saveMindMapData = (data) => {
  console.log(data)
  // 该函数触发频率可能会很高，所以你应该做一下节流或防抖
}
// 获取语言的函数
window.takeOverAppMethods.getLanguage = () => {
  return data.lang
}
// 保存语言的函数
window.takeOverAppMethods.saveLanguage = (lang) => {
  console.log(lang)
}
// 获取本地配置的函数
window.takeOverAppMethods.getLocalConfig = () => {
  return data.localConfig
}
// 保存本地配置的函数
window.takeOverAppMethods.saveLocalConfig = (config) => {
  console.log(config)
}
}
window.onload = async () => {
if (!window.takeOverApp) return
// 请求数据
const data = await getDataFromBackend()
// 设置全局的方法
setTakeOverAppMethods(data)
// 思维导图实例创建完成事件
window.$bus.$on('app_inited', (mindMap) => {
  console.log(mindMap)
})
// 可以通过window.$bus.$on()来监听应用的一些事件
// 实例化页面
window.initApp()
}
</script>

如上所示，当你设置了window.takeOverApp = true标志，应用不再主动进行实例化，而是会将实例化的方法暴露出来由你调用，那么你可以先从后端请求思维导图的数据，然后再注册相关的方法，应用内部会在合适的时机进行调用，从而达到回显和保存的目的。

这样做的好处是，每当本仓库代码更新了，你可以简单的复制打包后的文件到你自己的服务器，只要稍微修改一下index.html页面即可达到同步更新且使用自己的存储服务的目的。

修改静态资源路径

如果你想和上面一样保持和本仓库代码的同步更新，但是又想修改静态资源的存放位置，比如默认的层级关系为：

-dist
--css
--fonts
--img
--js
-logo.ico

-index.html

而你想调整成这样：

-assets
--dist
---css
---fonts
---img
---js
-logo.ico

-index.html

那么你可以将index.html中的window.externalPublicPath配置由默认的./dist/修改为：

window.externalPublicPath = './assets/dist/'

同时index.html中内联的.ico、.js、.css资源的路径需要你手动修改。

需要注意的是，dist目录内的目录层级关系最好不要调整，否则可能会出现异常。

如果你想替换其中的一些静态资源，比如你想将主题图片和结构的图片替换成你自己设计的图片，那么可以直接同名覆盖。

客户端

本项目也提供了客户端版本，使用Electron开发。支持Windows、Mac及Linux。

目前功能比较简单：

支持新建、打开文件进行编辑；
支持查看最近编辑文件列表；
支持文件的复制、删除、重命名；

可以直接下载客户端使用

github
百度网盘

二次开发

如果有需要，你也可以进行二次开发。

拉取源码

git clone https://github.com/wanglin2/mind-map.git
cd mind-map
git checkout electron

启动服务
在根目录下运行如下命令：

cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map
npm run electron:serve

打包客户端
你至少需要两台电脑，一台Windows和一台Mac。

# 打包Windows应用
npm run electron:build-win
# 打包Mac应用
npm run electron:build-mac
# 打包Linux应用
npm run electron:build-linux
# 打包全部应用
npm run electron:build-all
# 根据系统自动打包
npm run electron:build

总结

至此，这块工具就介绍完了，当然乍一看，密密麻麻这么多介绍，感觉很复杂的样子，其实不然，稍微花一点时间研究下，不难的，我在家里的迷你主机上已经搭上了，可以随意使用，还不错，如果你也感兴趣，可以去试试

Comments | NOTHING

空空如也！

技术

晒物

生活

笔记

美食