npm install jsMind --s

import "jsmind/style/jsmind.css";
import jsMind from "jsmind/js-legacy/jsmind.js";

export default {
  data() {
    return {
      mind: {
        /* 元數(shù)據(jù)，定義思維導(dǎo)圖的名稱、作者、版本等信息 */
        meta: {
          name: "思維導(dǎo)圖",
          author: "",
          version: "0.2",
        },
        /* 數(shù)據(jù)格式聲明 */
        format: "node_tree",
        /* 數(shù)據(jù)內(nèi)容 */
        data: {
          id: "root",
          topic: "jsMind",
          children: [
            {
              id: "easy", // [必選] ID, 所有節(jié)點(diǎn)的ID不應(yīng)有重復(fù)，否則ID重復(fù)的結(jié)節(jié)將被忽略
              topic: "Easy", // [必選] 節(jié)點(diǎn)上顯示的內(nèi)容
              direction: "right", // [可選] 節(jié)點(diǎn)的方向，此數(shù)據(jù)僅在第一層節(jié)點(diǎn)上有效，目前僅支持 left 和 right 兩種，默認(rèn)為 right
              // expanded: false, // [可選] 該節(jié)點(diǎn)是否是展開狀態(tài)，默認(rèn)為 true
              children: [
                {
                  id: "easy8",
                  topic: "Easy to show",
                  children: [
                    { id: "open7", topic: "on GitHub" },
                    { id: "easy7", topic: "Easy to embed" },
                  ],
                },
                { 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",
              // expanded: false,
              children: [
                { id: "open1", topic: "on GitHub" },
                { id: "open2", topic: "BSD License" },
              ],
            },

            {
              id: "powerful",
              topic: "Powerful",
              direction: "right",
              // expanded: false,

              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: "right",
              // expanded: false,

              children: [
                { id: "other1", topic: "I'm from local variable" },
                { id: "other2", topic: "I can do everything" },
              ],
            },
          ],
        },
      },
      options: {
        container: "jsmind_container", // [必選] 容器的ID
        editable: true, // [可選] 是否啟用編輯
        theme: "primary", // [可選] 主題
        view: {
          engine: "canvas", // 思維導(dǎo)圖各節(jié)點(diǎn)之間線條的繪制引擎
          hmargin: 20, // 思維導(dǎo)圖距容器外框的最小水平距離
          vmargin: 20, // 思維導(dǎo)圖距容器外框的最小垂直距離
          line_width: 2, // 思維導(dǎo)圖線條的粗細(xì)
          line_color: "#ddd", // 思維導(dǎo)圖線條的顏色
          hide_scrollbars_when_draggable: true,
        },
        layout: {
          hspace: 100, // 節(jié)點(diǎn)之間的水平間距
          vspace: 20, // 節(jié)點(diǎn)之間的垂直間距
          pspace: 20, // 節(jié)點(diǎn)與連接線之間的水平間距（用于容納節(jié)點(diǎn)收縮/展開控制器）
        },
        shortcut: {
          enable: false, // 是否啟用快捷鍵 默認(rèn)為true
        },
        // editableDrag:true,
        // get_selected_node:function(val){
        //     this.selectedNode=val
        // }
      },
      jm: "",
      selectedNode: "",
      newNodeId: 1,
    };
  },
  mounted() {
    // 初始化
    this.jm = new jsMind(this.options);
    //渲染canvas
    this.jm.show(this.mind);
  },
};

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