【免费下载】 JsMind 思维导图库使用指南：从基础框架到高级主题

JsMind 思维导图库使用指南：从基础框架到高级主题

一、基础框架搭建

JsMind 是一个基于 JavaScript 和 HTML5 的思维导图库，要使用它首先需要引入两个核心文件：

1. 样式文件：jsmind.css
2. 主脚本文件：jsmind.js

推荐使用最新版本，并通过 CDN 引入：

<!-- 基础样式 -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.8.6/style/jsmind.css" />

<!-- 核心功能 -->
<script type="text/javascript" src="https://unpkg.com/jsmind@0.8.6/es6/jsmind.js"></script>

如果需要节点拖拽功能，还需额外引入：

<!-- 节点拖拽插件 -->
<script type="text/javascript" src="https://unpkg.com/jsmind@0.8.6/es6/jsmind.draggable-node.js"></script>

二、HTML 容器准备

在页面中需要准备一个容器元素用于显示思维导图：

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

三、初始化思维导图

3.1 显示空白导图

var options = {
    container: 'jsmind_container',  // 必填，容器ID
    editable: true,                // 是否可编辑
    theme: 'orange'                // 主题样式
};
var jm = new jsMind(options);
jm.show();

3.2 显示预定义导图

var mind = { /* 导图数据 */ };
var options = {
    container: 'jsmind_container',
    editable: true,
    theme: 'orange'
};
var jm = new jsMind(options);
jm.show(mind);

四、数据格式详解

JsMind 支持三种数据格式，开发者可根据需求选择最适合的格式。

4.1 node_tree 格式（默认）

var mind = {
    "meta":{ /* 元信息 */ },
    "format":"node_tree",
    "data":{
        "id":"root",
        "topic":"中心主题",
        "children":[
            {
                "id":"child1",
                "topic":"子主题1",
                "direction":"left",
                "children":[ /* 更多子节点 */ ]
            }
        ]
    }
};

4.2 node_array 格式

var mind = {
    "meta":{ /* 元信息 */ },
    "format":"node_array",
    "data":[
        {"id":"root", "isroot":true, "topic":"中心主题"},
        {"id":"child1", "parentid":"root", "topic":"子主题1", "direction":"left"}
    ]
};

4.3 freemind 格式

兼容 FreeMind 软件的 XML 格式：

var mind = {
    "meta":{ /* 元信息 */ },
    "format":"freemind",
    "data":"<map version=\"1.0.1\"><node ID=\"root\" TEXT=\"中心主题\">...</node></map>"
};

五、主题系统

JsMind 提供了15种内置主题：

1. 基础主题：primary、warning、danger、success、info
2. 彩色主题：greensea、nephrite、belizehole、wisteria、asphalt
3. 暖色主题：orange、pumpkin、pomegranate
4. 中性主题：clouds、asbestos

自定义主题

开发者可以通过 CSS 扩展自定义主题：

/* 自定义主题示例 */
jmnodes.theme-custom jmnode {
    background-color: #自定义颜色;
    color: #文字颜色;
}
jmnodes.theme-custom jmnode:hover {
    background-color: #悬停颜色;
}

六、节点样式定制

除了主题外，还可以为单个节点设置特定样式：

样式属性	说明	示例值
background-color	背景色	#1abc9c 或 blue
foreground-color	文字颜色	#ffffff 或 red
width	节点宽度(px)	400
height	节点高度(px)	200
font-size	文字大小(px)	32
font-weight	文字粗细	bold
font-style	文字样式	italic
background-image	背景图片	url(...)
background-rotation	背景图旋转角度	30
leading-line-color	连接线颜色	#33ff33

设置方式

1. 通过API设置：

let style = {'width': 400, 'font-size': '20px'};
jm.add_node(parent_id, node_id, topic, style);

2. 在数据中定义：

var mind = {
    // ...
    data: {
        id: 'styled_node',
        topic: '样式节点',
        'background-color': '#ff9900',
        'font-size': '24px'
    }
    // ...
}

七、最佳实践建议

1. 版本控制：始终指定明确的版本号，避免自动升级带来的兼容性问题
2. 性能优化：对于大型思维导图，建议使用 node_array 格式，它比 node_tree 格式更节省内存
3. 响应式设计：通过监听窗口大小变化事件，调用 jm.resize() 方法使导图自适应容器大小
4. 数据安全：定期调用 jm.get_data() 获取当前数据并保存，防止意外丢失

通过本指南，您应该已经掌握了 JsMind 的基本使用方法。如需了解更多高级功能，如插件开发、事件处理等，可以参考项目的其他文档。