@umbraci/jsmind
v0.10.13
Published
jsMind is a pure javascript library for mindmap, it base on html5 canvas. jsMind was released under BSD license, you can embed it in any project, if only you observe the license.
Downloads
463
Readme
jsMind
jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 canvas 和 svg 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。
jsMind is mind map library built by javascript, it base on html5 canvas and svg. jsMind is released under the BSD license, you can embed it in any project as long as you abide by the license.
✨ New Feature: Enhanced Plugin System
jsMind now supports a new enhanced plugin system with:
- Synchronous Initialization: Plugins initialize before rendering, allowing them to affect the initial render
- Preload Support: Control plugin initialization order (before or after core modules)
- Lifecycle Management: Proper cleanup with
beforePluginRemove()andbeforePluginDestroy()hooks - Dynamic Plugin Management: Add or remove plugins at runtime
- Backward Compatibility: Works alongside the existing plugin system
See Enhanced Plugin System Documentation for more information.
Quick Example
import jsMind from './jsmind.js';
import MultilineTextV2 from './plugins/jsmind.multiline-text-v2.js';
// Register plugin (before creating instance)
jsMind.usePlugin(MultilineTextV2, {
text_width: 250,
min_height: 40,
});
// Create jsMind instance
const jm = new jsMind({
container: 'jsmind_container',
editable: true,
});
// Show mind map with multiline text
jm.show({
meta: { name: 'demo' },
format: 'node_tree',
data: {
id: 'root',
topic: 'Root Node',
children: [{ id: 'node1', topic: 'Line 1\nLine 2\nLine 3' }],
},
});Project Home
Get Started
<html>
<head>
<link
type="text/css"
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/[email protected]/style/jsmind.css"
/>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/[email protected]/es6/jsmind.js"
></script>
</head>
<body>
<div id="jsmind_container"></div>
<script type="text/javascript">
var mind = {
// 3 data formats were supported ...
// see documents for more information
};
var options = {
container: 'jsmind_container',
theme: 'orange',
editable: true,
};
var jm = new jsMind(options);
jm.show(mind);
</script>
</body>
</html>Links
- Resources:
- Apps :
- Demo :