jsMind Documentation

repository·master·Indexed 25 days ago

jsMind is a pure JavaScript library for displaying and editing mind maps, built using HTML5 Canvas and SVG. It supports three data formats (node_tree, node_array, and freemind), includes 15 built-in themes, and provides a comprehensive API for node manipulation, custom rendering, and keyboard shortcut configuration. The current recommended version is the ES6 version (v0.9.1), while a legacy version (v0.5.7) is maintained for backward compatibility.

Tokens: 10.3K
Snippets: 18
Records: 82
Agent score: 86%

What's inside jsMind

Access the legacy version of jsMind
master
The legacy version of jsmind.js and its corresponding plugins are maintained in the /js-legacy directory. Note that the legacy version is frozen at version 0.5.7 and will not receive further updates or bug fixes. It is intended for backward compatibility only and may be removed in the future.
https://github.com/hizzgdev/jsmind/blob/master/js/README.md
Use the ES6 version of jsMind
master
The current recommended version of jsMind is the ES6 version. It contains the latest features and bug fixes. For detailed documentation and usage instructions for the ES6 version, refer to the documentation located in the ../es6/ directory.
https://github.com/hizzgdev/jsmind/blob/master/js/README.md
Initialize jsMind with options
master
To create a new jsMind instance, pass an options object to the jsMind constructor. The container property is the only required field and must be the ID of the HTML element (e.g., a <div>) where the mindmap will be rendered.
```
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);
```
https://github.com/hizzgdev/jsmind/blob/master/docs/en/2.options.md
Prepare the development environment for jsMind
master
To develop for jsMind, ensure you have the following tools installed:
- Node.js: Required for running unit tests, code formatting, packaging, and compression. jsMind's CI environment uses Node.js 18.x.
- Visual Studio Code (Optional): It is recommended to install the esbenp.prettier-vscode plugin to ensure code is automatically formatted according to jsMind's configuration.
To contribute, the standard workflow is:
1. Fork the repository.
2. Develop features or improvements.
3. Test your code.
4. Submit a pull request.
5. Address review feedback.
6. Merge your pull request.
https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md
Build jsMind ES6 locally
master
The /es6 directory in the repository does not contain the distribution files. To generate the js or es6 files locally, run the build command from the project root. For detailed instructions, refer to the development documentation.
```
npm run build
```
https://github.com/hizzgdev/jsmind/blob/master/es6/README-en.md
Run jsMind unit tests
master
Unit tests are located in /tests/unit. When making changes, you should add corresponding unit tests and ensure they pass by executing:
```
npm run test-es6
```
https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md

Setup jsMind via CDN

master

To use jsMind, include the jsmind.css stylesheet and the jsmind.js script. It is recommended to specify a version number to ensure stability. To enable the draggable node feature, you must also include jsmind.draggable-node.js.

<!-- 1. Include CSS and JS -->
<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>

<!-- 2. Optional: Enable draggable nodes -->
<script type="text/javascript" src="https://unpkg.com/jsmind@0.9.1/es6/jsmind.draggable-node.js"></script>

<!-- 3. Add a container div -->
<div id="jsmind_container"></div>

<!-- 4. Initialize jsMind -->
<script type="text/javascript">
    var options = {
        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>

Package jsMind for browser use
master
To package the source code into a single JavaScript file compatible with web browsers, run the build command. The resulting file will be generated in the /es6 directory.
```
npm run build
```
https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md
Format jsMind source code
master
jsMind source code is located in /src and is written in ES6. To ensure code consistency, you must format the code using the following command:
```
npm run format
```
https://github.com/hizzgdev/jsmind/blob/master/docs/en/5.development.md
Migrate to jsMind ES6 via CDN
master
If you are using jsMind via a CDN, you must update the script source URL to point to the es6/ directory instead of the js/ directory to use the ES6 version.
Change the path from js/*.js to es6/*.js.
```

<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>
```
https://github.com/hizzgdev/jsmind/blob/master/es6/README-en.md
Install the Screenshot plugin via npm
master
To use the experimental screenshot feature (exporting mind maps as PNG images) in an npm-based project, you must install both jsmind and dom-to-image as dependencies.
Note: This is an experimental feature. Read the Experimental Features documentation to understand the risks before use.
```
npm install jsmind
npm install dom-to-image
```
https://github.com/hizzgdev/jsmind/blob/master/docs/en/plugin-screenshot.md
Migrate to jsMind ES6 via NPM
master
No manual migration is required when using jsMind via NPM. The package's main entry point has been updated to es6/jsmind.js automatically.
https://github.com/hizzgdev/jsmind/blob/master/es6/README-en.md