JSMind是一个显示/编辑思维导图的纯javascript类库，基于html5的canvas进行设计。jsMind以BSD协议开源。

1.JsMind

1.1 基本框架

在页面上引入jsmind.js和jsmind.css两个文件

<link type="text/css" rel="stylesheet" href="style/jsmind.css"> <script type="text/javascript" src="js/jsmind.js"></script>

如果希望通过鼠标拖拽的方式移动节点，需要额外引用jsmind.draggable.js文件

<script type="text/javascript" src="js/jsmind.draggable.js"></script>

在页面中为jsMind准备一个容器，jsMind将在这个容器里显示思维导图。可自行定义容器id、大小及样式

<div id="jsmind_container"></div>

最后，添加下面一段代码即可显示一个空白的思维导图

<script type="text/javascript"> 
        var options = { // options 将在下一章中详细介绍 
            container:'jsmind_container', // [必选] 容器的ID，或者为容器的对
            editable:true, // [可选] 是否启用编辑 
            theme:'orange' // [可选] 主题 
         }; 
         var jm = new jsMind(options); 
         jm.show(); </script>

1.2 数据格式

jsMind支持三种数据格式

树对象格式：默认格式，节点之间是包含关系，便于程序进行处理，适合与MondoDB及其他文档数据库进行数据交互
表对象格式：节点之间是并列关系，使用 parentid标识上下级关系，适合与关系型数据库进行数据交互
freemind格式：使用freemind的xml格式，适合与freemind进行数据交互

1.3 关于主题

jsMind默认提供了15种主题。可以在jsmind.css中按照以下格式添加自定义样式

    /* greensea theme */ /* greensea 即是主题名 */ 
    jmnodes.theme-greensea jmnode{background-color:#1abc9c;color:#fff;} /* 节点样式 */ 
    jmnodes.theme-greensea jmnode:hover{background-color:#16a085;} /* 鼠标悬停的节点样式 */ 
    jmnodes.theme-greensea jmnode.selected{background-color:#11f;color:#fff;} /* 选中的节点样式 */ 
    jmnodes.theme-greensea jmnode.root{} /* 根节点样式 */ 
    jmnodes.theme-greensea jmexpander{} /* 展开/关闭节点的控制点样式 */ 
    jmnodes.theme-greensea jmexpander:hover{} /* 鼠标悬停展开/关闭节点的控制点样式 */

2. jsMind对象

jsMind提供了对思维导图进行操控的一系列API，这些API都是基于jsMind对象处理的，一般情况下可以使用下面的代码获取jsMind对象

/* 方法1： 
创建思维导图时即可获得 jsMind 对象 
*/ 
var jm = new jsMind(options); 
/* 方法2： 
当前页面已存在一个思维导图时可直接获得此 jsMind 对象 
当在一个页面里创建了多个 jsMind 时，此方法获得的是最后创建的那个对象 
*/ 
var jm = jsMind.current;

2.1 查找节点

获取根节点：使用jm.get_root()即可获取当前思维导图的根节点
根据id查找节点：使用jm.get_node(nodeid)方法即可根据id查找当前思维导图中指定的节点，如果查不到则返回null
获取选中的节点：使用jm.get_selected_node()方法即可获取当前选中的节点，如果没有选中的节点则返回null
查找相邻的节点：使用jm.find_node_before(node|nodeid)和fined_node_after(node|nodeid)即可获取指定的节点的上一个或下一个节点，如果没有上一个或下一个，则返回null
获取父节点：使用node.parent即可获取父节点，根节点的父节点为null
获取子节点集合：使用node.children即可获取子节点的集合

tips

思维导图是由多个节点和节点之间的连线组成的，一个思维导图有一个根节点，根节点外围可以有多个子节点，子节点还可以有多个子节点。每个节点包含以下的多个属性：

node { 
    id, // : string 节点id 
    index, // : integer 节点序号 
    topic, // : string 节点主题 
    isroot, // : boolean 指示该节点是否为根节点 
    parent, // : node 该节点的父节点，根节点的父节目为 null ，但请不要根据此属性判断该节点是否为根节点 
    direction, // : enum(left,center,right) 该节点的分布位置 
    children, // : array of node 该节点的子节点组合 
    expanded, // : boolean 该节点的下级节点是否展开 
    data, // : object{string,object} 该节点的其它附加数据 
    }

2.2 操作节点

选中节点 : 使用 jm.select_node(node) 方法选中指定的节点。
收起子节点 : 使用 jm.collapse_node(node|nodeid) 方法可收起该节点的子节点。
展开子节点 : 使用 jm.expand_node(node|nodeid) 方法可展开该节点的子节点。
收起或展开子节点 : 使用 jm.toggle_node(node|nodeid) 方法可自动展开或收起子节点。
展开全部子节点 : 使用 jm.expand_all() 方法可展开全部子节点。
展开至层级 : 使用 jm.expand_to_depth(depth) 方法可展开到指定层级。
移动节点 : 使用 jm.move_node(node|nodeid,beforeid) 方法可将该节点移动到 beforeid 节点之前，可将 beforeid 设为 _first_或_last可将该节点移动到相邻节点的最前或最后。
启用编辑 : 使用 jm.enable_edit() 方法可启用对当前思维导图的编辑功能。
禁止编辑 : 使用 jm.disable_edit() 方法可禁止对当前思维导图进行编辑。
编辑节点 : 使用 jm.begin_edit(node|nodeid) 方法可以将该节点调整为编辑状态。
停止编辑 : 使用 jm.end_edit() 方法可以将该节点调整为只读状态。

2.3 编辑节点

添加节点 : 使用 jm.add_node(parent_node, nodeid, topic, data) 方法可添加一个节点。
在指定位置前插入节点 : 使用 jm.insert_node_before(node_before, nodeid, topic, data) 方法可在 node_before 节点前插入节点。
在指定位置后插入节点 : 使用 jm.insert_node_after(node_after, nodeid, topic, data) 方法可在 node_after 节点后插入节点。
删除节点 : 使用 jm.remove_node(node|nodeid) 方法可删除指定的节点及其所有的子节点。
更新节点 : 使用 jm.update_node(nodeid, topic) 方法可更新指定节点的 topic，其它属性由于不在界面上显示，可以直接修改对应 node 的属性。

2.4 设置样式

设置主题 : 使用 jm.set_theme(theme) 方法可设置当前思维导图的主题。
设置背景色/前景色 : 使用 jm.set_node_color(nodeid, bgcolor, fgcolor) 方法可设置指定节点的背景色与前景色。
设置字体 : 使用 jm.set_node_font_style(nodeid, size, weight, style) 方法可设置指定节点的字体。
设置背景图片 : 使用 jm.set_node_background_image(nodeid, image, width, height) 方法可设置指定节点的背景图片。

2.5 获取数据

获取元数据 : 使用jm.get_meta()方法可获取当前思维导图的元数据。
获取数据 : 使用jm.get_data(data_format)方法可获取当前思维导图的指定格式的数据文本。

2.6 其他

清除节点的选中 : 使用jm.select_clear()方法可以清除当前的选中状态。
判断节点是否可见 : 使用jm.is_node_visible(node)方法可以判断此节点是否显示。

前端使用JsMind