simple-mind-map一个简单&强大的 Web 思维导图库

simple-mind-map 是一个简单&强大的 Web 思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。

特性

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

目录介绍

「simple-mind-map」思维导图库，框架无关，Vue、React 等框架或无框架都可以使用。

「web」使用 simple-mind-map 库，基于 vue2.x、ElementUI 搭建的在线思维导图。特性：

工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要
侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板
导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件
右键菜单，支持展开、收起、整理布局等操作
底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图提供文档页面服务。

「dist」打包 web 后的资源文件夹。

基本使用

simple-mind-map 的使用非常简单，提供一个宽高不为 0 的元素，然后创建一个实例即可：

<script setup>
import { ref, onMounted } from 'vue'
import MindMap from "simple-mind-map"

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

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

<style>
  @import "./simpleMindMap.esm.css";

  #mindMapContainer {
    width: 100%;
    height: 400px;
  }

  #mindMapContainer * {
    margin: 0;
    padding: 0;
  }
</style>

显示水印

simple-mind-map 提供了水印的插件，使用非常简单，首先可以在实例化 simple-mind-map 时提供水印的选项配置来直接显示水印：

new MindMap({
    // ...
    watermarkConfig: {
        text: '水印文字',
        lineSpacing: 100,
        textSpacing: 100,
        angle: 30,
        textStyle: {
            color: '#999',
            opacity: 0.5,
            fontSize: 14
        }
    }
})

此外也可以动态更新水印，watermarkConfig 的所有配置都可以修改，如果不想再显示水印将 text 传入空字符串即可。

mindMap.watermark.updateWatermark({
    text: '街角小林',
    lineSpacing: 50,
    textSpacing: 50,
    angle: 45,
    textStyle: {
        color: '#73D8FF',
        opacity: 1,
        fontSize: 12
    }
})

插入和扩展节点图标

「插入图标」simple-mind-map 内置了一些图标：可以通过以下方式获取：

import { nodeIconList } from 'simple-mind-map/src/svg/icons'

如果使用的是 umd 格式的文件，可以通过以下方式获取：

simpleMindMap.iconList

开启节点富文本编辑

默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情看 RichText 插件。

开始使用

安装

npm i simple-mind-map

注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI 创建的项目可以在 vue.config.js 文件中增加以下配置来让 babel-loader 编译本依赖：

module.exports = {
     transpileDependencies: ['simple-mind-map']
}

使用

首先提供一个宽高不为 0 的容器元素：

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

另外再设置一下 css 样式：

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

然后引入 simple-mind-map 库，创建一个实例：

import MindMap from "simple-mind-map";

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