对于思维导图工具,相信大家都不陌生,我也用过很多,最开始从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
})