Basic Framework

At first, 2 files (jsmind.css and jsmind.js) are required. Here we link to the resources on the CDN. It is recommended to use the latest version.

<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>

CDNs in common use: UNPKG, jsDelivr, and the mirror of jsDelivr in China. the resource urls would look like:

https://unpkg.com/jsmind@0.8.6/es6/jsmind.js

https://cdn.jsdelivr.net/npm/jsmind@0.8.6/es6/jsmind.js

https://jsd.onmicrosoft.cn/npm/jsmind@0.8.6/es6/jsmind.js

The version number appear in the url of CDN. It’s strongly recommended that you also specify the version number in your project to avoid the risks that caused by version upgrades. Access the jsMind on NPM to get the latest version number of jsMind.

Add script jsmind.draggable-node.js for enabling draggable node feature.

<script type="text/javascript" src="https://unpkg.com/jsmind@0.8.6/es6/jsmind.draggable-node.js"></script>

The second, a div element should be in your HTML as container

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

The last, show an empty mindmap:

<script type="text/javascript">
    var options = {                     // for more detail at next chapter
        container:'jsmind_container',   // [required] id of container
        editable:true,                  // [required] whether allow edit or not
        theme:'orange'                  // [required] theme
    };
    var jm = new jsMind(options);
    jm.show();
</script>

Or, show a mindmap with some topics:

<script type="text/javascript">
    var mind = { /* jsMind data, for more detail at next section */ };
    var options = {
        container:'jsmind_container',
        editable:true,
        theme:'orange'
    };
    var jm = new jsMind(options);
    // show it
    jm.show(mind);
</script>

Data Format

3 formats are supported by jsMind: node_tree,node_array and freemind. jsMind can load mind maps in these formats, and can also export data to any of these formats.

These are simple demo for the data format:

A. node_tree format, default format in jsMind

var mind = {
    "meta":{
        "name":"jsMind remote",
        "author":"hizzgdev@163.com",
        "version":"0.2"
    },
    "format":"node_tree",
    "data":{"id":"root","topic":"jsMind","children":[
        {"id":"easy","topic":"Easy","direction":"left","children":[
            {"id":"easy1","topic":"Easy to show"},
            {"id":"easy2","topic":"Easy to edit"},
            {"id":"easy3","topic":"Easy to store"},
            {"id":"easy4","topic":"Easy to embed"}
        ]},
        {"id":"open","topic":"Open Source","direction":"right","children":[
            {"id":"open1","topic":"on GitHub"},
            {"id":"open2","topic":"BSD License"}
        ]},
        {"id":"powerful","topic":"Powerful","direction":"right","children":[
            {"id":"powerful1","topic":"Base on Javascript"},
            {"id":"powerful2","topic":"Base on HTML5"},
            {"id":"powerful3","topic":"Depends on you"}
        ]},
        {"id":"other","topic":"test node","direction":"left","children":[
            {"id":"other1","topic":"I'm from local variable"},
            {"id":"other2","topic":"I can do everything"}
        ]}
    ]}
};

B. node_array format

var mind = {
    "meta":{
        "name":"example",
        "author":"hizzgdev@163.com",
        "version":"0.2"
    },
    "format":"node_array",
    "data":[
        {"id":"root", "isroot":true, "topic":"jsMind"},

        {"id":"easy", "parentid":"root", "topic":"Easy", "direction":"left"},
        {"id":"easy1", "parentid":"easy", "topic":"Easy to show"},
        {"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},
        {"id":"easy3", "parentid":"easy", "topic":"Easy to store"},
        {"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},

        {"id":"open", "parentid":"root", "topic":"Open Source", "direction":"right"},
        {"id":"open1", "parentid":"open", "topic":"on GitHub"},
        {"id":"open2", "parentid":"open", "topic":"BSD License"},

        {"id":"powerful", "parentid":"root", "topic":"Powerful", "direction":"right"},
        {"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},
        {"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},
        {"id":"powerful3", "parentid":"powerful", "topic":"Depends on you"},
    ]
};

C. freemind format

var mind = {
    "meta":{
        "name":"example",
        "author":"hizzgdev@163.com",
        "version":"0.2"
    },
    "format":"freemind",
    "data":"<map version=\"1.0.1\"> <node ID=\"root\" TEXT=\"jsMind\" > <node ID=\"easy\" POSITION=\"left\" TEXT=\"Easy\" > <node ID=\"easy1\" TEXT=\"Easy to show\" /> <node ID=\"easy2\" TEXT=\"Easy to edit\" /> <node ID=\"easy3\" TEXT=\"Easy to store\" /> <node ID=\"easy4\" TEXT=\"Easy to embed\" /> </node> <node ID=\"open\" POSITION=\"right\" TEXT=\"Open Source\" > <node ID=\"open1\" TEXT=\"on GitHub\" /> <node ID=\"open2\" TEXT=\"BSD License\" /> </node> <node ID=\"powerful\" POSITION=\"right\" TEXT=\"Powerful\" > <node ID=\"powerful1\" TEXT=\"Base on Javascript\" /> <node ID=\"powerful2\" TEXT=\"Base on HTML5\" /> <node ID=\"powerful3\" TEXT=\"Depends on you\" /> </node> <node ID=\"other\" POSITION=\"left\" TEXT=\"test node\" > <node ID=\"other1\" TEXT=\"I'm from local variable\" /> <node ID=\"other2\" TEXT=\"I can do everything\" /> </node> </node> </map>"
};

Themes

15 themes were supported in jsmind, you can preview those themes by visiting feature-demo.

primary
warning
danger
success
info
greensea
nephrite
belizehole
wisteria
asphalt
orange
pumpkin
pomegranate
clouds
asbestos

or, you can add your custom theme in jsmind.css.

/* greensea theme */
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{}

Styles

In addition to the Themes, there are some styles can be set at node level:

background-color: the background color of a node, e.g. #1abc9c, blue
foreground-color: the foreground color of a node, e.g. #1abc9c, blue
width: node width (px), e.g. 400
height: node height (px), e.g. 400
font-size: font size of the topic of a node (px), e.g. 32
font-weight: font weight of the topic of a node, e.g. bold
font-style: font style of the topic of a node, e.g.italic
background-image: background image url e.g. http://fakeurl.com/fake-picture.png, or a data url, e.g. data:image/png;base64,...
background-rotation: the rotation of the background image, e.g. 30
leading-line-color: the color of the leading line of a node, e.g. #1abc9c, blue

How to set:

set by api: add the settings to the data parameter of add_node [3.4. Operation - Add Node]

let data = {'width': 400, 'leading-line-color': '#33ff33'}
jm.add_node(....., data)

set on data define (data file): add the settings to node, e.g.

var mind = {
    ...
    format: 'node_tree',
    data: {
        id: 'root',
        topic: 'jsMind',
        children: [
        {
            'id': 'image-node',
            'background-image': 'ant.png',
            'width': '100',
            'height': '100',
        }
    ],
    ...
}

copyright notice

Reproduction and deduction are prohibited.

The jsMind project is still being updated and the corresponding documentation is updated at the same time as the version is updated. In order to avoid confusion to the user, it is forbidden to reprint this document without written permission and to make changes of any kind to this document.