对于思维导图工具,相信大家都不陌生,我也用过很多,最开始从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
。
目前功能比较简单:
- 支持新建、打开文件进行编辑;
- 支持查看最近编辑文件列表;
- 支持文件的复制、删除、重命名;
可以直接下载客户端使用
二次开发
如果有需要,你也可以进行二次开发。
- 拉取源码
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
总结
至此,这块工具就介绍完了,当然乍一看,密密麻麻这么多介绍,感觉很复杂的样子,其实不然,稍微花一点时间研究下,不难的,我在家里的迷你主机上已经搭上了,可以随意使用,还不错,如果你也感兴趣,可以去试试
暂无评论内容