jsMind 是一个用于显示和编辑思维导图的纯 JavaScript 类库。它基于 Canvas 和 SVG 进行设计，能够在现代浏览器中高效地运行。jsMind 以 BSD 协议开源，这意味着可以在遵守该协议的前提下，将其嵌入到任何项目中使用。
基本使用
安装：
npm install jsmind
引入：
import 'jsmind/style/jsmind.css'; import jsMind from 'jsmind';
简单的数据示例：
创建容器：
<html><body><div id="jsmind_container" style="width: 800px; height: 500px;"></div></body> </html>
构建数据：
var mind = {"meta": {"name": "example","author": "hizzgdev","version": "0.2"},"format": "node_tree","data": {"id": "root","topic": "jsMind","children": [{"id": "sub1", "topic": "sub1"},{"id": "sub2", "topic": "sub2"}]}
};
展示：
使用 jsMind 的构造函数初始化思维导图，并调用 show 方法展示思维导图。以下是代码示例：
var options = {container: 'jsmind_container',theme: 'primary',editable: true,
};
var jm = new jsMind(options);
jm.show(mind);
jsMind 对象
jsMind 提供了对思维导图进行操控的一系列 API，这些 API 都是基于 jsMind 对象处理的，一般情况下可以使用下面的代码获取 jsMind 对象：
基本使用：
/* 方法1：创建思维导图时即可获得 jsMind 对象 */ var jm = new jsMind(options); /* 方法2：当前页面已存在一个思维导图时可直接获得此 jsMind 对象当在一个页面里创建了多个 jsMind 时，此方法获得的是最后创建的那个对象 */ var jm = jsMind.current;
options 对象
layout：
-
hspace：节点之间的水平间距
-
vspace：节点之间的垂直间距
-
pspace：节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
-
cousin_space：相邻节点的子节点之间的额外的垂直间距
view：
-
engine：思维导图各节点之间线条的绘制引擎
-
hmargin：思维导图距容器外框的最小水平距离
-
vmargin：思维导图距容器外框的最小垂直距离
-
line_width：思维导图线条的粗细
-
line_color：思维导图线条的颜色
-
custom_line_render：自定义的线条渲染方法
-
draggable：当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
-
hide_scrollbars_when_draggable：当设置 draggable = true 时，是否隐藏滚动条
-
node_overflow：节点文本过长时的样式
-
zoom：配置缩放
-
min：最小的缩放比例
-
max：最大的缩放比例
-
step：缩放比例间隔
-
-
custom_node_render：自定义的节点渲染方法
样式修改
data 数据修改基本样式
可为每一个节点设置单独的样式，目前 jsMind 支持以下自定义样式：
-
background-color: 节点的背景颜色，如
#1abc9c,blue -
foreground-color: 节点的文本颜色，如
#1abc9c,blue -
width: 节点的宽度(px)，如
400 -
height: 节点的高度(px)，如
400 -
font-size: 节点的文本字体大小(px)，如
32 -
font-weight: 节点的文本重量，如
bold -
font-style: 节点的文本样式，如
italic -
background-image: 节点的背景图片，可使用 url，如
http://fakeurl.com/fake-picture.png，或 data url 形式，如data:image/png;base64,... -
background-rotation: 节点的背景图片旋转角度，如
30 -
leading-line-color: 节点的引导线颜色，如
#1abc9c,blue。
let data = {'width': 400, 'leading-line-color': '#33ff33'}
jm.add_node(....., data)
借助 data 数据中的 topic 属性
topic 可使用 字符串模板编写 html
let data = [{id: 'root',isroot: true,'font-size': 14,height: 34,'background-image': iconList.root.bg,topic: `<div style="padding:0 12px 4px;color:${iconList.root.color}"><img src='${iconList.root.icon}' style='width:12px;height:12px'/>平台</div>`}
];
销毁重建
document.getElementById('jsmind_container').innerHTML = '';
this.jm = null; // 释放引用
