Skip to content
forked from wanglin2/mind-map

一个还算强大的Web思维导图。A relatively powerful web mind map.

License

Notifications You must be signed in to change notification settings

xisncy/mind-map

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple mind map

npm-version npm download GitHub stars GitHub issues GitHub forks license

一个简单&强大的Web思维导图

本项目包含两部分:

1.一个js思维导图库,不依赖任何框架,你可以使用它来快速完成Web思维导图产品的开发。

开发文档:https://wanglin2.github.io/mind-map/#/doc/zh/

2.一个Web思维导图,基于思维导图库、Vue2.x、ElementUI开发,可以操作电脑本地文件,所以你可以直接把它当做一个在线版思维导图应用使用,如果觉得github的响应速度慢,你也可以部署到你的服务器上。

在线地址:https://wanglin2.github.io/mind-map/

另外也提供了客户端可供下载使用,支持WindowsMacLinux,下载地址:

Github:releases

百度云盘:地址

特性

  • 插件化架构,除核心功能外,其他功能作为插件提供,按需使用,减小打包体积
  • 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构
  • 内置多种主题,允许高度自定义样式,支持注册新主题
  • 支持快捷键
  • 节点内容支持图片、图标、超链接、备注、标签、概要
  • 支持前进后退
  • 支持拖动、缩放
  • 支持右键和Ctrl+左键两种多选方式
  • 支持节点自由拖拽、拖拽调整
  • 支持多种节点形状
  • 支持导出为jsonpngsvgpdfmarkdown,支持从jsonxmindmarkdown导入
  • 支持小地图、支持水印
  • 支持关联线

安装

npm i simple-mind-map

使用

提供一个宽高不为0的容器元素:

<div id="mindMapContainer"></div>

另外再设置一下css样式:

#mindMapContainer * {
  margin: 0;
  padding: 0;
}

然后创建一个实例:

import MindMap from "simple-mind-map";

const mindMap = new MindMap({
  el: document.getElementById('mindMapContainer'),
  data: {
    "data": {
        "text": "根节点"
    },
    "children": []
  }
});

即可得到一个思维导图。

想要实现更多功能?可以查看开发文档

License

MIT

微信交流群

如果已过期,可以微信添加wanglinguanfang拉你入群。

请作者喝杯咖啡

开源不易,如果本项目有帮助到你的话,可以考虑请作者喝杯咖啡哟~

厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds

转账请备注【思维导图】。你的头像和名字将会出现在下面和文档页面

Think 志斌 小土渣的宇宙 qp ZXR 花儿朵朵 suka Chris

About

一个还算强大的Web思维导图。A relatively powerful web mind map.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 53.5%
  • JavaScript 45.4%
  • Other 1.1%