### Start Local Server

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md

Execute this command to start a simple HTTP server for local running and debugging. The accessible URL, likely http://localhost:8080, will be printed in the console.

```bash
npm run server
```

--------------------------------

### Install Screenshot Plugin Dependencies (npm)

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/plugin-screenshot.md

If you are using npm, install jsmind and dom-to-image packages to use the screenshot feature.

```bash
npm install jsmind
npm install dom-to-image
```

--------------------------------

### Configure Default Shortcut Mappings

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/2.options.md

Map keyboard keys to specific jsMind actions. This example shows default mappings for common operations like adding nodes, editing, and navigation.

```javascript
mapping:{                       // handle mapping.
   addchild   : [45, 4096+13],  // <Insert>, <Ctrl> + <Enter>
   addbrother : 13,             // <Enter>
   editnode   : 113,            // <F2>
   delnode    : 46,             // <Delete>
   toggle     : 32,             // <Space>
   left       : 37,             // <Left>
   up         : 38,             // <Up>
   right      : 39,             // <Right>
   down       : 40,             // <Down>

   // Examples
   dosomething: 112,            // <F1>
}
```

--------------------------------

### Configure Combined Shortcut Keys

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/2.options.md

Map combination keys (e.g., Ctrl + Key) to jsMind actions. This example demonstrates how to combine modifier key codes with regular key codes.

```javascript
mapping:{
   addchild : 4096 + 73,        // <Ctrl> + <I>
   delnode : 4096 + 2048 + 68,  // <Ctrl> + <ALT> + <D>
}
```

--------------------------------

### jsMind Data Format: node_tree

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Example of the default 'node_tree' format for defining a mind map structure. Each node can have child nodes.

```javascript
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"}
        ]}
    ]}
};
```

--------------------------------

### Get Mind Map Data

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Fetches the mind map data in a specified format. Use this to export or serialize the mind map.

```javascript
jm.get_data(data_format)
```

--------------------------------

### Get Mind Map Metadata

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Retrieves the metadata associated with the current mind map.

```javascript
jm.get_meta()
```

--------------------------------

### Get jsMind Object Instance

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Obtain a jsMind object instance. Use the constructor when creating a new mindmap, or access `jsMind.current` if a mindmap already exists on the page.

```javascript
var jm = new jsMind(options);
```

```javascript
var jm = jsMind.current;
```

--------------------------------

### jsMind Data Format: node_array

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Example of the 'node_array' format for defining a mind map. Each node is an object with properties like 'id', 'parentid', and 'topic'.

```javascript
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"}
```

--------------------------------

### Build Project

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md

Run this command to package the ES6 code into a JavaScript file suitable for web browsers. The output is generated in the /es6 directory.

```bash
npm run build
```

--------------------------------

### Initialize jsMind with Options

Source: https://github.com/hizzgdev/jsmind/blob/master/example/demo.html

Initializes a new jsMind instance with specified options and displays a mind map. Ensure the container element exists.

```javascript
var _jm = null;
function load_jsmind() {
  var mind = {
    meta: {
      name: 'demo',
      author: 'hizzgdev@163.com',
      version: '0.2',
    },
    format: 'node_array',
    data: [
      { id: 'root', isroot: true, topic: 'jsMind' },
      { id: 'sub1', parentid: 'root', topic: 'sub1' },
      { id: 'sub11', parentid: 'sub1', topic: 'sub11' },
      { id: 'sub12', parentid: 'sub1', topic: 'sub12' },
      { id: 'sub13', parentid: 'sub1', topic: 'sub13' },
      { id: 'sub2', parentid: 'root', topic: 'sub2' },
      { id: 'sub21', parentid: 'sub2', topic: 'sub21' },
      { id: 'sub22', parentid: 'sub2', topic: 'sub22' },
      { id: 'sub3', parentid: 'root', topic: 'sub3' },
    ],
  };
  var options = {
    container: 'jsmind_container',
    editable: true,
    theme: 'primary',
    log_level: 'debug',
    shortcut: {
      handles: {
        test: function (j, e) {
          console.log(j);
        },
      },
      mapping: {
        test: 89,
      },
    },
    view: {
      expander_style: 'char',
    },
  };
  _jm = new jsMind(options);
  _jm.show(mind);
  // jm.set_readonly(true);
  // var mind_data = jm.get_data();
  // alert(mind_data);
}
load_jsmind();
```

--------------------------------

### Basic jsMind Initialization with Options

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/2.options.md

Initializes jsMind with essential options like container ID, editability, and theme. Ensure the container element exists in the DOM before initialization.

```javascript
var options = {
    container:'jsmind_container', 	// [required] ID of the container
    editable:true, 					// [Optional] Whether to enable editing
    theme:'orange' 					// [optional] theme
};
var jm = new jsMind(options);
```

--------------------------------

### Format Code

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md

Execute this command to format the code according to jsMind's configuration. This is recommended during development.

```bash
npm run format
```

--------------------------------

### Run Unit Tests

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md

Execute this command to run all unit tests. Ensure all tests pass after making code changes.

```bash
npm run test-es6
```

--------------------------------

### Import and Use Screenshot Plugin (npm)

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/plugin-screenshot.md

Import the necessary modules and plugins when using jsMind with npm. The screenshot functionality can then be accessed via jm.shoot().

```javascript
import domtoimage from 'dom-to-image';
import jsMind from 'jsmind'
import 'jsmind/screenshot'
import 'jsmind/style/jsmind.css'

// ...

var jm = new jsMind(options);
jm.show(mind_data);
// export current mindmap to an image
jm.shoot()
```

--------------------------------

### Initialize Empty Mind Map

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Create a new jsMind instance with specified options and display an empty mind map. Ensure the container ID and editable status are correctly set.

```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();
```

--------------------------------

### Initialize and Load jsMind Map

Source: https://github.com/hizzgdev/jsmind/blob/master/example/1_basic_cn.html

Initializes a jsMind instance with specified options and displays a mind map from a given data structure. Use this to set up the mind map container and initial content.

```javascript
function load_jsmind() {
  var mind = {
    meta: {
      name: 'demo',
      author: 'hizzgdev@163.com',
      version: '0.2',
    },
    format: 'node_array',
    data: [
      { id: 'root', isroot: true, topic: 'jsMind' },
      { 'id': 'sub1', 'parentid': 'root', 'topic': 'sub1', 'background-color': '#0000ff' },
      { id: 'sub11', parentid: 'sub1', topic: 'sub11' },
      { id: 'sub12', parentid: 'sub1', topic: 'sub12' },
      { id: 'sub13', parentid: 'sub1', topic: 'sub13' },
      { id: 'sub2', parentid: 'root', topic: 'sub2' },
      { id: 'sub21', parentid: 'sub2', topic: 'sub21' },
      { 'id': 'sub22', 'parentid': 'sub2', 'topic': 'sub22', 'foreground-color': '#33ff33' },
      { id: 'sub3', parentid: 'root', topic: 'sub3' },
    ],
  };
  var options = {
    container: 'jsmind_container',
    editable: true,
    theme: 'primary',
  };
  var jm = new jsMind(options);
  jm.show(mind);
  // jm.set_readonly(true);
  // var mind_data = jm.get_data();
  // alert(mind_data);
  jm.add_node('sub2', 'sub23', 'new node', { 'background-color': 'red' });
  jm.set_node_color('sub21', 'green', '#ccc');
}
load_jsmind();
```

--------------------------------

### Configure and Load jsMind with RequireJS

Source: https://github.com/hizzgdev/jsmind/blob/master/example/3_requirejs.html

Configure RequireJS paths to load jsMind and its draggable node module. Then, use require to load these modules and initialize a jsMind instance with provided data and options.

```javascript
require.config({
  paths: {
    'jsmind': 'https://unpkg.com/jsmind@0.9.1/es6/jsmind',
    'jsmind/draggable-node': 'https://unpkg.com/jsmind@0.9.1/es6/jsmind.draggable-node',
  },
});

require(['jsmind', 'jsmind/draggable-node'], function (jsMind, _) {
  let mind = {
    meta: {
      name: 'jsMind example',
      author: 'hizzgdev@163.com',
      version: '0.9.1',
    },
    format: 'node_tree',
    data: {
      id: 'root',
      topic: 'jsMind',
      children: [],
    },
  };

  let options = {
    container: 'jsmind_container',
    editable: true,
    theme: 'primary',
  };

  let jm = new jsMind(options);
  jm.show(mind);
});
```

--------------------------------

### Begin Node Editing

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Initiates the editing mode for a specific node. The node can be provided as an object or its ID.

```javascript
jm.begin_edit(node|node_id)
```

--------------------------------

### Include jsMind CSS and JS Files

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Link the necessary CSS and JavaScript files for jsMind from a CDN. It is recommended to specify a version number for stability.

```html
<link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.9.1/style/jsmind.css" />

<script type="text/javascript" src="https://unpkg.com/jsmind@0.9.1/es6/jsmind.js"></script>
```

--------------------------------

### Initialize Mind Map with Data

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Initialize jsMind with predefined data. The 'mind' object should contain the structure and content of the mind map.

```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);
```

--------------------------------

### Export Mind Map as Image (CDN)

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/plugin-screenshot.md

After including the necessary scripts, you can export the current mind map as an image using the jm.shoot() method.

```javascript
var jm = new jsMind(options);
jm.show(mind_data);
// export current mindmap to an image
jm.shoot()
```

--------------------------------

### Styling Operations

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Methods for applying themes, colors, and font styles to nodes.

```APIDOC
## Set Theme

### Description
Use the `jm.set_theme(theme)` method to set the theme of the mind map.

### Method
`jm.set_theme`

### Parameters
- **theme**: The name of the theme to apply.
```

```APIDOC
## Set Node Color

### Description
Use the `jm.set_node_color(node_id, bg_color, fg_color)` method to set the background and foreground color of the specified node.

### Method
`jm.set_node_color`

### Parameters
- **node_id**: The ID of the node to style.
- **bg_color**: The background color for the node.
- **fg_color**: The foreground (text) color for the node.
```

```APIDOC
## Set Node Font Style

### Description
Use the `jm.set_node_font_style(node_id, size, weight, style)` method to set the font of the specified node.

### Method
`jm.set_node_font_style`

### Parameters
- **node_id**: The ID of the node to style.
- **size**: The font size.
- **weight**: The font weight (e.g., 'bold').
- **style**: The font style (e.g., 'italic').
```

```APIDOC
## Set Node Background Image

### Description
Use the `jm.set_node_background_image(node_id, image, width, height)` method to set the background image of the specified node.

### Method
`jm.set_node_background_image`

### Parameters
- **node_id**: The ID of the node to style.
- **image**: The URL or data of the background image.
- **width**: The width of the background image.
- **height**: The height of the background image.
```

--------------------------------

### Include Screenshot Plugin Scripts (CDN)

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/plugin-screenshot.md

Include these scripts in your HTML to enable the screenshot functionality when using jsMind via CDN. Ensure dom-to-image is also included as it's a dependency.

```html
<!-- style -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.9.1/style/jsmind.css" />

<!-- jsMind -->
<script type="text/javascript" src="https://unpkg.com/jsmind@0.9.1/es6/jsmind.js"></script>

<!-- dependency of screenshot -->
<script type="text/javascript" src="https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js" ></script>

<!-- screenshot plugin -->
<script type="text/javascript" src="https://unpkg.com/jsmind@0.9.1/es6/jsmind.screenshot.js"></script>
```

--------------------------------

### Displaying a Mindmap

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Use the jm.show(mind) method to display a mindmap. Refer to the Basic framework section for specific usage.

```APIDOC
## Displaying a Mindmap

### Description
Displays a mindmap using the provided mind data.

### Method
```javascript
jsMind.show(mind)
```

### Parameters
#### Request Body
- **mind** (object) - The mindmap data to display.
```

--------------------------------

### Full jsMind Configuration Options

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/2.options.md

Defines the complete set of default options for jsMind, covering container, editing, theme, display mode, HTML support, view settings, layout, and shortcut configurations. These defaults can be overridden during instantiation.

```javascript
options = {
   container : '', 			// [required] ID of the container
   editable : false, 		// Is editing enabled?
   theme : null, 			// theme
   mode :'full', 			// display mode
   support_html : true, 	// Does it support HTML elements in the node?
   view:{
       engine: 'canvas', 	// engine for drawing lines between nodes in the mindmap
       hmargin:100, 		// Minimum horizontal distance of the mindmap from the outer frame of the container
       vmargin:50, 		// Minimum vertical distance of the mindmap from the outer frame of the container
       line_width:2, 		// thickness of the mindmap line
       line_color:'#555', 	// Thought mindmap line color
       line_style:'curved', 	// line style, straight or curved
       custom_line_render: null,  // customized line render function
       draggable: false,    	// Drag the mind map with your mouse, when it's larger that the container
       hide_scrollbars_when_draggable: false, // Hide container scrollbars, when mind map is larger than container and draggable option is true.
       node_overflow: 'hidden' 	// Text overflow style in node
   },
   layout:{
       hspace:30, 			// Horizontal spacing between nodes
       vspace:20, 			// Vertical spacing between nodes
       pspace:13,			// Horizontal spacing between node and connection line (to place node expander)
       cousin_space:0			// Additional vertical spacing between child nodes of neighbor nodes
   },
   shortcut:{
       enable:true, 		// whether to enable shortcut
       handles:{}, 			// Named shortcut key event processor
       mapping:{
           addchild : [45, 4096+13], 	// <Insert>, <Ctrl> + <Enter>
           addbrother : 13, 	// <Enter>
           editnode : 113, 	// <F2>
           delnode : 46, 		// <Delete>
           toggle : 32, 		// <Space>
           left : 37, 		// <Left>
           up : 38, 		// <Up>
           right : 39, 		// <Right>
           down : 40, 		// <Down>
       }
   },
};
```

--------------------------------

### Set Node Styles via API

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Apply node-specific styles like width and color using the add_node API.

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

```

--------------------------------

### Define Custom Shortcut Event Handlers

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/2.options.md

Define custom functions to be executed when specific shortcut keys are pressed. These handlers receive the jsMind instance and the event object.

```javascript
handles : {
    'dosomething' : function(jm,e){
        // do something...
    },
    'dosomeotherthing' : function(jm,e){
        // do some other things
    }
    ...
```

--------------------------------

### Insert Node Before

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Inserts a new node immediately before a specified existing node. Optional data and direction parameters are available.

```javascript
jm.insert_node_before(node_before, node_id, topic, data, direction)
```

--------------------------------

### Replay Mind Map Actions

Source: https://github.com/hizzgdev/jsmind/blob/master/example/demo.html

Executes the replay functionality of the jsMind shell if available. This is useful for replaying recorded actions or animations.

```javascript
function replay() {
  var shell = _jm.shell;
  if (!!shell) {
    shell.replay();
  }
}
```

--------------------------------

### Load Mind Map from File

Source: https://github.com/hizzgdev/jsmind/blob/master/example/demo.html

Reads a file selected by the user and displays it as a mind map. Handles file reading using jsMind's utility function.

```javascript
function load_file(fi) {
  var files = fi.files;
  if (files.length > 0) {
    var file_data = files[0];
    jsMind.util.file.read(file_data, function (freemind_data, jsmind_name) {
      var mind = jsmind_data;
      if (!!mind) {
        _jm.show(mind);
      } else {
        console.error('can not open this file as mindmap');
      }
    });
  }
}
```

--------------------------------

### CDN Script Tag Migration for jsMind

Source: https://github.com/hizzgdev/jsmind/blob/master/es6/README-en.md

Illustrates the change required when updating jsMind from a CDN, switching the script source from the 'js' directory to the 'es6' directory.

```html
<!-- before -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jsmind/js/jsmind.js"></script>

<!-- after -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jsmind/es6/jsmind.js"></script>
```

--------------------------------

### Other Operations

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Miscellaneous utility methods for mind map interaction.

```APIDOC
## Scroll Node to Center

### Description
Use the `jm.scroll_node_to_center(node)` method to scroll a node to the center of the mindmap. (since 0.6.2)

### Method
`jm.scroll_node_to_center`

### Parameters
- **node**: The node object to scroll to the center.
```

```APIDOC
## Clear Selection

### Description
Use the `jm.select_clear()` method to clear the current selected state of nodes.

### Method
`jm.select_clear`
```

```APIDOC
## Is Node Visible

### Description
Use the `jm.is_node_visible(node)` method to determine if this node is visible.

### Method
`jm.is_node_visible`

### Parameters
- **node**: The node object to check for visibility.
```

--------------------------------

### Define Mind Map in JSON Format

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Use this format to define a mind map structure with nodes and their relationships.

```javascript
var mind = {
    "meta":{
        "name":"example",
        "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"
                    }
                ]
            }
        ]
    }
};

```

--------------------------------

### Set Mind Map Theme

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Applies a predefined theme to the entire mind map for consistent styling.

```javascript
jm.set_theme(theme)
```

--------------------------------

### Define Mind Map in Freemind Format

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

This format is compatible with Freemind, allowing for data exchange.

```javascript
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>"
};

```

--------------------------------

### HTML Container for Mind Map

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Define a div element in your HTML with a unique ID to serve as the container for the jsMind visualization.

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

--------------------------------

### Enable Draggable Nodes

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Include the jsmind.draggable-node.js script to enable the functionality for dragging and dropping nodes within the mind map.

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

--------------------------------

### Data Access

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Methods for retrieving metadata and data from the mind map.

```APIDOC
## Get Metadata

### Description
Use the `jm.get_meta()` method to get metadata for the current mindmap.

### Method
`jm.get_meta`
```

```APIDOC
## Get Data

### Description
Use the `jm.get_data(data_format)` method to get the data text in the specified format of the current mindmap.

### Method
`jm.get_data`

### Parameters
- **data_format**: The desired format for the data (e.g., 'json', 'text').
```

--------------------------------

### Save Mind Map as Node Tree

Source: https://github.com/hizzgdev/jsmind/blob/master/example/demo.html

Retrieves the current mind map data in 'node_tree' format and logs it to the console. Ensure a jsMind instance is initialized.

```javascript
function save_nodetree() {
  var mind_data = _jm.get_data('node_tree');
  console.log(mind_data);
}
```

--------------------------------

### Insert Node After

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Inserts a new node immediately after a specified existing node. Optional data and direction parameters can be included.

```javascript
jm.insert_node_after(node_after, node_id, topic, data, direction)
```

--------------------------------

### Enable Editing

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Call this method to allow users to edit the current mind map. Ensure this is called before attempting any edits.

```javascript
jm.enable_edit()
```

--------------------------------

### Set Node Background and Foreground Color

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Customizes the background and text color of a specific node using its ID.

```javascript
jm.set_node_color(node_id, bg_color, fg_color)
```

--------------------------------

### Custom CSS Theme for Greensea

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Define custom styles for the 'greensea' theme to visually customize nodes.

```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{}

```

--------------------------------

### Migrating jsMind CDN Reference

Source: https://github.com/hizzgdev/jsmind/blob/master/es6/README.md

Update the script source URL from the old 'js/*.js' path to the new 'es6/*.js' path when referencing jsMind via CDN.

```html
<!-- 修改前 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jsmind/js/jsmind.js"></script>

<!-- 修改后 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jsmind/es6/jsmind.js"></script>
```

--------------------------------

### Set Node Background Image

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Assigns a background image to a specific node, with options to control its dimensions.

```javascript
jm.set_node_background_image(node_id, image, width, height)
```

--------------------------------

### Finding Nodes

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Methods for retrieving specific nodes or collections of nodes from the mindmap.

```APIDOC
## Finding Nodes

### Description
Provides methods to retrieve the root node, find nodes by ID, get the selected node, and find adjacent or parent nodes.

### Methods

#### Get Root
```javascript
jsMind.get_root()
```
- **Returns**: The root node object.

#### Find Node by ID
```javascript
jsMind.get_node(node_id)
```
- **Parameters**:
  - **node_id** (string) - The ID of the node to find.
- **Returns**: The node object if found, otherwise null.

#### Get Selected Node
```javascript
jsMind.get_selected_node()
```
- **Returns**: The currently selected node object, or null if none is selected.

#### Find Adjacent Nodes
```javascript
jsMind.find_node_before(node|node_id)
jsMind.find_node_after(node|node_id)
```
- **Parameters**:
  - **node** or **node_id** (node object or string) - The node or node ID to find adjacent nodes for.
- **Returns**: The previous or next node object, or null if none exists.

#### Fetch Parent Node
```javascript
node.parent
```
- **Description**: Access the `parent` property of a node object to get its parent.
- **Returns**: The parent node object, or null if the node is the root.

#### Fetch Child Nodes
```javascript
node.children
```
- **Description**: Access the `children` property of a node object to get an array of its child nodes.
```

--------------------------------

### Toggle Node Expansion

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Automatically expand or collapse the child nodes of a specified node. The node can be provided as a node object or its ID.

```javascript
jm.toggle_node(node);
```

--------------------------------

### Select a Node

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Select a specified node in the mindmap. The node can be provided as a node object or its ID.

```javascript
jm.select_node(node);
```

--------------------------------

### Expand All Child Nodes

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Expands all child nodes in the entire mindmap.

```javascript
jm.expand_all();
```

--------------------------------

### Node Manipulation

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Methods for adding, inserting, and deleting nodes within the mind map.

```APIDOC
## Add Node

### Description
Use the `jm.add_node(parent_node, node_id, topic, data, direction)` method to add a sub node to the `parent_node`. `data` and `direction` are optional.

### Method
`jm.add_node`

### Parameters
- **parent_node**: The parent node to which the new node will be added.
- **node_id**: The unique identifier for the new node.
- **topic**: The text content of the new node.
- **data** (Optional): Additional data associated with the node.
- **direction** (Optional): Specifies the direction for moving level-2 nodes.
```

```APIDOC
## Insert Node Before

### Description
Use the `jm.insert_node_before(node_before, node_id, topic, data, direction)` method to insert a node before the `node_before` node. `data` and `direction` are optional.

### Method
`jm.insert_node_before`

### Parameters
- **node_before**: The node before which the new node will be inserted.
- **node_id**: The unique identifier for the new node.
- **topic**: The text content of the new node.
- **data** (Optional): Additional data associated with the node.
- **direction** (Optional): Specifies the direction for moving level-2 nodes.
```

```APIDOC
## Insert Node After

### Description
Use the `jm.insert_node_after(node_after, node_id, topic, data, direction)` method to insert a node after the `node_after` node. `data` and `direction` are optional.

### Method
`jm.insert_node_after`

### Parameters
- **node_after**: The node after which the new node will be inserted.
- **node_id**: The unique identifier for the new node.
- **topic**: The text content of the new node.
- **data** (Optional): Additional data associated with the node.
- **direction** (Optional): Specifies the direction for moving level-2 nodes.
```

```APIDOC
## Delete Node

### Description
Use the `jm.remove_node(node|node_id)` method to delete a specified node and all its children.

### Method
`jm.remove_node`

### Parameters
- **node|node_id**: The node object or its ID to be deleted.
```

```APIDOC
## Update Node

### Description
Use the `jm.update_node(node_id, topic)` method to update the topic of the specified node.

### Method
`jm.update_node`

### Parameters
- **node_id**: The ID of the node to update.
- **topic**: The new text content for the node.
```

--------------------------------

### Set Node Styles in Data Definition

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/1.usage.md

Define node styles directly within the data structure when initializing the mind map.

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

```

--------------------------------

### Editing Controls

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Methods for enabling, disabling, and managing the editing state of the mind map.

```APIDOC
## Enable Editing

### Description
Use the `jm.enable_edit()` method to enable editing of the current mindmap.

### Method
`jm.enable_edit`
```

```APIDOC
## Disable Editing

### Description
Use the `jm.disable_edit()` method to disable editing of the current mindmap.

### Method
`jm.disable_edit`
```

```APIDOC
## Begin Editing Node

### Description
The node can be adjusted to edit using the `jm.begin_edit(node|node_id)` method.

### Method
`jm.begin_edit`

### Parameters
- **node|node_id**: The target node to be edited. The parameter value can be either a `node` object or the id of the `node`.
```

```APIDOC
## Stop Editing

### Description
The node can be adjusted to read-only using the `jm.end_edit()` method.

### Method
`jm.end_edit`
```

--------------------------------

### Expand Child Node

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Expand the child nodes of a specified node. The node can be provided as a node object or its ID.

```javascript
jm.expand_node(node);
```

--------------------------------

### Operation on Nodes

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Methods for manipulating the state and position of nodes within the mindmap.

```APIDOC
## Operation on Nodes

### Description
Provides methods to select, collapse, expand, toggle, and move nodes within the mindmap.

### Methods

#### Select Node
```javascript
jsMind.select_node(node)
```
- **Parameters**:
  - **node** (node object or string) - The node object or node ID to select.

#### Collapse Child Nodes
```javascript
jsMind.collapse_node(node)
```
- **Parameters**:
  - **node** (node object or string) - The node object or node ID whose children should be collapsed.

#### Expand Child Node
```javascript
jsMind.expand_node(node)
```
- **Parameters**:
  - **node** (node object or string) - The node object or node ID whose children should be expanded.

#### Collapse or Expand Child Nodes (Toggle)
```javascript
jsMind.toggle_node(node)
```
- **Parameters**:
  - **node** (node object or string) - The node object or node ID to toggle the expansion state of its children.

#### Expand All Child Nodes
```javascript
jsMind.expand_all()
```
- **Description**: Expands all child nodes at all levels.

#### Expand to Level
```javascript
jsMind.expand_to_depth(depth)
```
- **Parameters**:
  - **depth** (integer) - The specified level to expand to.

#### Move Node
```javascript
jsMind.move_node(node, before_id, parent_id, direction)
```
- **Parameters**:
  - **node** (node object or string) - The node object or node ID to move.
  - **before_id** (string) - The ID of the node to move before. Can be `_first_` or `_last_`.
  - **parent_id** (string, Optional) - The ID of the parent node. If not provided, the parent of the `before` node is used.
  - **direction** (enum(left,center,right), Optional) - The direction for the node placement.
```

--------------------------------

### Expand to Specific Depth

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Expands all nodes up to a specified depth level in the mindmap.

```javascript
jm.expand_to_depth(depth);
```

--------------------------------

### Scroll Node to Center

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Use this method to center a specific node within the mind map view. Requires jsMind version 0.6.2 or later.

```javascript
jm.scroll_node_to_center(node)
```

--------------------------------

### Find Node by ID

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Retrieve a specific node from the mindmap using its unique ID. Returns null if no node with the given ID is found.

```javascript
var node = jm.get_node(node_id);
```

--------------------------------

### Add a Sub-Node

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Appends a new sub-node to a specified parent node. Optional data and direction parameters can be provided.

```javascript
jm.add_node(parent_node, node_id, topic, data, direction)
```

--------------------------------

### Node Object Structure

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Defines the structure of a node object within a jsMind mindmap. Each node has properties like id, topic, parent, children, and more.

```javascript
node {
    id,
    index,
    topic,
    isroot,
    parent,
    direction,
    children,
    expanded,
    data,
}
```

--------------------------------

### Set Node Font Style

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Adjusts the font properties (size, weight, style) for a specific node identified by its ID.

```javascript
jm.set_node_font_style(node_id, size, weight, style)
```

--------------------------------

### Collapse Child Nodes

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Collapse the child nodes of a specified node. The node can be provided as a node object or its ID.

```javascript
jm.collapse_node(node);
```

--------------------------------

### Move Node

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Moves a node to a new position within the mindmap. Specify the target node, its new position relative to another node (or as first/last sibling), and optionally its new parent.

```javascript
jm.move_node(node, before_id, parent_id, direction);
```

--------------------------------

### Determine Node Visibility

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Checks if a given node is currently visible within the mind map view.

```javascript
jm.is_node_visible(node)
```

--------------------------------

### Clear Node Selection

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Resets the selection state for all nodes in the mind map.

```javascript
jm.select_clear()
```

--------------------------------

### Update Node Topic

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Modifies the topic text of an existing node. Requires the node's ID and the new topic content.

```javascript
jm.update_node(node_id, topic)
```

--------------------------------

### End Node Editing

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Stops the editing mode for the current node, making it read-only again.

```javascript
jm.end_edit()
```

--------------------------------

### Disable Editing

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Use this method to prevent any further editing of the mind map, returning it to a read-only state.

```javascript
jm.disable_edit()
```

--------------------------------

### Remove Node

Source: https://github.com/hizzgdev/jsmind/blob/master/docs/en/3.operation.md

Deletes a specified node and all of its child nodes from the mind map. Accepts either a node object or its ID.

```javascript
jm.remove_node(node|node_id)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.