jsmind.js插件帮你生成思维脑图

js教程

首页 > HTML教程 > js教程 >

 shitouadmin  2025-06-16 09:12:29 

jsMind主要功能
jsMind 提供了强大的脑图编辑功能，支持节点的添加、删除、移动等操作。它内置了多种主题，用户可以根据需要选择合适的主题，或者自定义主题。此外，通过 CSS 可以自定义节点的样式，包括背景色、字体颜色、鼠标悬停效果等。jsMind 还提供了丰富的 API，方便开发者进行二次开发和功能扩展。

基本使用：

<html>

  <head>

    <link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/npm/jsmind@0.8.5/style/jsmind.css" />

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/jsmind@0.8.5/es6/jsmind.js"></script>

  </head>

  <body>

    <div id="jsmind_container" style="width: 800px; height: 500px;"></div>

  </body>

</html>

JS代码：

<script type="text/javascript">

      var mind = {

        "meta": {

          "name": "example",

          "author": "hizzgdev",

          "version": "0.2"

        },

        "format": "node_tree",

        "data": {

          "id": "root",

          "topic": "jsMind",

          "children": [

            {"id": "sub1", "topic": "sub1"},

            {"id": "sub2", "topic": "sub2"}

          ]

        }

      };

      var options = {

        container: 'jsmind_container',

        theme: 'primary',

        editable: true,

      };

      var jm = new jsMind(options);

      jm.show(mind);

    </script>

参数介绍：

options = {

    container: '', // [必填] 容器的 ID

    editable: false, // 是否启用编辑

    theme: null, // 主题

    mode: 'full', // 布局模式

    support_html: true, // 是否支持节点中的 HTML 元素

    log_level: 'info', // 日志级别

    view: {

        engine: 'canvas', // 节点之间线条的渲染引擎

        hmargin: 100, // 容器的最小水平距离

        vmargin: 50, // 容器的最小垂直距离

        line_width: 2, // 线条宽度

        line_color: '#555', // 线条颜色

        line_style: 'curved', // 线条样式，直线或曲线

        custom_line_render: null, // 自定义线条渲染方法

        draggable: false, // 是否允许拖动画布

        hide_scrollbars_when_draggable: false, // 当 draggable 为 true 时是否隐藏滚动条

        node_overflow: 'hidden', // 节点文本过长时的样式

        enable_device_pixel_ratio: false, // 根据设备像素比渲染高清思维导图

        expander_style: 'char', // 子节点展开器的样式

        zoom: { // 缩放配置

            min: 0.5, // 最小缩放比例

            max: 2.1, // 最大缩放比例

            step: 0.1, // 缩放比例步长

        },

        custom_node_render: null, // 自定义节点渲染方法

    },

    layout: {

        hspace: 30, // 节点之间的水平空间

        vspace: 20, // 节点之间的垂直空间

        pspace: 13, // 节点与连接线之间的水平空间

        cousin_space: 0, // 相邻节点子节点之间的额外垂直空间

    },

    shortcut: {

        enable: true, // 是否启用快捷键

        handles: {}, // 命名的快捷键事件处理程序

        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>

        }

    },

    plugin: {}, // 插件的选项

};