更新群二维码

Merge branch 'feature' into main
更新文档
2026-02-19 23:08:32 +08:00 · 2023-04-14 10:29:49 +08:00 · 2023-04-10 22:11:00 +08:00 · 2023-04-10 22:08:26 +08:00 · 2023-04-10 10:27:15 +08:00 · 2023-04-10 10:26:49 +08:00
95 changed files with 4325 additions and 644 deletions
--- a/README.md
+++ b/README.md
@@ -7,15 +7,21 @@
 [![GitHub forks](https://img.shields.io/github/forks/wanglin2/mind-map)](https://github.com/wanglin2/mind-map/network/members)
 ![license](https://img.shields.io/npm/l/express.svg)

-> 一个简单&强大的Web思维导图库
+> 一个简单&强大的Web思维导图

-Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
+本项目包含两部分：

-文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
+1.一个js思维导图库，不依赖任何框架，你可以使用它来快速完成Web思维导图产品的开发。
+
+开发文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
+
+2.一个Web思维导图，基于思维导图库、Vue2.x、ElementUI开发，可以操作电脑本地文件，所以你可以直接把它当做一个在线版思维导图应用使用，如果觉得github的响应速度慢，你也可以部署到你的服务器上。
+
+在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)

 # 特性

- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
+- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
 - [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
 - [x] 内置多种主题，允许高度自定义样式，支持注册新主题
 - [x] 支持快捷键
@@ -37,10 +43,23 @@ npm i simple-mind-map

 # 使用

+提供一个宽高不为0的容器元素：
+
 ```html
 <div id="mindMapContainer"></div>
 ```

+另外再设置一下`css`样式：
+
+```css
+#mindMapContainer * {
+  margin: 0;
+  padding: 0;
+}
+```
+
+然后创建一个实例：
+
 ```js
 import MindMap from "simple-mind-map";

@@ -55,6 +74,10 @@ const mindMap = new MindMap({
 });
 ```

+即可得到一个思维导图。
+
+想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map/#/doc/zh/)。
+
 # License

 MIT
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.3b27bed0.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.64cc7822.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.61afd8c1.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.84fc06da.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.4d405645.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a9abff6a.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.b8417307.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.d657e190.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.433fdc5c.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.9d7f8382.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.a3915823.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.906e86ec.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.0cf53d60.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.1d1fb5b5.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.7163274e.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.108e4f7d.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.cd5e6df3.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.2e73bf0a.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.dab092ff.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.2e73ab77.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.2d79582e.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.80759043.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.5fb896ad.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.b5ce4946.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.c4647d07.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.3eea98de.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.d960b122.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.a2a047cf.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.f519efd9.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.7bac07f7.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.10135360.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.9abceada.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.d3d121fa.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.f52387a2.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.a944214a.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.e7133ec1.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.6a4911c4.js" rel="prefetch"><link href="dist/js/chunk-2d216004.75465efa.js" rel="prefetch"><link href="dist/js/chunk-2d217907.32a00939.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.6b1238d2.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.8f3151dd.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.9f7bbd4c.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.2797f6b4.js" rel="prefetch"><link href="dist/js/chunk-2d238428.7c9ae7c7.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.b091d972.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.88eeb1b9.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.b091d972.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.88eeb1b9.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.2313b4b8.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.ecdc0449.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.6d16a18f.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.fcf43a73.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.4e43a508.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.2151bd9a.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a1773017.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.378335bb.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.106affda.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.40c3a4c6.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.bd367278.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.1d4a5492.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.1ed97f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.e3dec256.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.03e02abe.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.cad55829.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.bc2402de.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.8e142e17.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.46dff9b5.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.5e69748f.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.2b0a3aa0.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.41f869ae.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.d27d7537.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.a826dbb3.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.d6ccf037.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.480c6adf.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.53817128.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.810b3b6b.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.cfa871f6.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.0f476897.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.10ad3333.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.a4748b26.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.d8e94894.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.2bb0ee69.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.f8eea9ae.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.5f8f761a.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.53e37fe0.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.25303766.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.588baf8d.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.428d2cf2.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.6c3450dd.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.113b1ad7.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.390e6ae8.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.577d738a.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.76d5e91c.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.c0447317.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.999247ea.js" rel="prefetch"><link href="dist/js/chunk-2d216004.6bc315a8.js" rel="prefetch"><link href="dist/js/chunk-2d216037.735c6ef2.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.667b0cef.js" rel="prefetch"><link href="dist/js/chunk-2d216642.43efb068.js" rel="prefetch"><link href="dist/js/chunk-2d217907.fcb88ac3.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.0f835399.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.aba788ef.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.4ed5fff9.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.6c80e04d.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.20c08643.js" rel="prefetch"><link href="dist/js/chunk-2d230098.2901ec53.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.c6cec8ad.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.4e68cb6b.js" rel="prefetch"><link href="dist/js/chunk-2d238428.816b9c47.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.057b1a50.js" rel="prefetch"><link href="dist/css/app.f08aba10.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.2cd4db22.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.f08aba10.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.2cd4db22.js"></script></body></html>
--- a/qrcode.jpg
+++ b/qrcode.jpg
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -82,7 +82,15 @@ const defaultOpt = {
  expandBtnIcon: {
    open: '',// svg字符串
    close: ''
-  }
+  },
+  // 是否只有当鼠标在画布内才响应快捷键事件
+  enableShortcutOnlyWhenMouseInSvg: true,
+  // 是否开启节点动画过渡
+  enableNodeTransitionMove: true,
+  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
+  nodeTransitionMoveDuration: 300,
+  // 初始根节点的位置
+  initRootNodePosition: null
 }

 //  思维导图
@@ -303,7 +311,7 @@ class MindMap {

  //  获取思维导图数据，节点树、主题、布局等
  getData(withConfig) {
-    let nodeData = this.command.getCopyData()
+    let nodeData = this.command.removeDataUid(this.command.getCopyData())
    let data = {}
    if (withConfig) {
      data = {
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.5.0",
+  "version": "0.5.4",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -35,6 +35,8 @@ class Event extends EventEmitter {
    this.onContextmenu = this.onContextmenu.bind(this)
    this.onSvgMousedown = this.onSvgMousedown.bind(this)
    this.onKeyup = this.onKeyup.bind(this)
+    this.onMouseenter = this.onMouseenter.bind(this)
+    this.onMouseleave = this.onMouseleave.bind(this)
  }

  //  绑定事件
@@ -46,6 +48,8 @@ class Event extends EventEmitter {
    window.addEventListener('mouseup', this.onMouseup)
    this.mindMap.el.addEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.on('contextmenu', this.onContextmenu)
+    this.mindMap.svg.on('mouseenter', this.onMouseenter)
+    this.mindMap.svg.on('mouseleave', this.onMouseleave)
    window.addEventListener('keyup', this.onKeyup)
  }

@@ -57,6 +61,8 @@ class Event extends EventEmitter {
    window.removeEventListener('mouseup', this.onMouseup)
    this.mindMap.el.removeEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.off('contextmenu', this.onContextmenu)
+    this.mindMap.svg.off('mouseenter', this.onMouseenter)
+    this.mindMap.svg.off('mouseleave', this.onMouseleave)
    window.removeEventListener('keyup', this.onKeyup)
  }

@@ -130,6 +136,16 @@ class Event extends EventEmitter {
  onKeyup(e) {
    this.emit('keyup', e)
  }
+
+  // 进入
+  onMouseenter(e) {
+    this.emit('svg_mouseenter', e)
+  }
+
+  // 离开
+  onMouseleave(e) {
+    this.emit('svg_mouseleave', e)
+  }
 }

 export default Event
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -37,6 +37,9 @@ class Export {
      item.attr('href', imgData)
    })
    await Promise.all(task)
+    if (imageList.length > 0) {
+      svgHTML = svg.svg()
+    }
    // 如果开启了富文本编辑，需要把svg中的dom元素转换成图片
    let nodeWithDomToImg = null
    if (domToImage && this.mindMap.richText) {
--- a/simple-mind-map/src/KeyCommand.js
+++ b/simple-mind-map/src/KeyCommand.js
@@ -10,6 +10,7 @@ export default class KeyCommand {
    }
    this.shortcutMapCache = {}
    this.isPause = false
+    this.isInSvg = false
    this.bindEvent()
  }

@@ -37,8 +38,21 @@ export default class KeyCommand {

  //  绑定事件
  bindEvent() {
+    // 只有当鼠标在画布内才响应快捷键
+    this.mindMap.on('svg_mouseenter', () => {
+      this.isInSvg = true
+    })
+    this.mindMap.on('svg_mouseleave', () => {
+      if (this.mindMap.richText && this.mindMap.richText.showTextEdit) {
+        return
+      }
+      if (this.mindMap.renderer.textEdit.showTextEdit) {
+        return
+      }
+      this.isInSvg = false
+    })
    window.addEventListener('keydown', e => {
-      if (this.isPause) {
+      if (this.isPause || (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)) {
        return
      }
      Object.keys(this.shortcutMap).forEach(key => {
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -414,6 +414,7 @@ class Node {
    if (!this.group) {
      return
    }
+    let { enableNodeTransitionMove, nodeTransitionMoveDuration } = this.mindMap.opt
    // 需要移除展开收缩按钮
    if (this._expandBtn && this.nodeData.children.length <= 0) {
      this.removeExpandBtn()
@@ -425,9 +426,9 @@ class Node {
    this.renderGeneralization()
    // 更新节点位置
    let t = this.group.transform()
-    if (!isLayout) {
+    if (!isLayout && enableNodeTransitionMove) {
      this.group
-        .animate(300)
+        .animate(nodeTransitionMoveDuration)
        .translate(
          this.left - t.translateX,
          this.top - t.translateY
@@ -457,10 +458,13 @@ class Node {

  //  递归渲染
  render(callback = () => {}) {
+    let { enableNodeTransitionMove, nodeTransitionMoveDuration } = this.mindMap.opt
    // 节点
    // 重新渲染连线
    this.renderLine()
+    let isLayout = false
    if (!this.group) {
+      isLayout = true
      // 创建组
      this.group = new G()
      this.group.css({
@@ -469,7 +473,7 @@ class Node {
      this.bindGroupEvent()
      this.draw.add(this.group)
      this.layout()
-      this.update(true)
+      this.update(isLayout)
    } else {
      this.draw.add(this.group)
      if (this.needLayout) {
@@ -498,7 +502,13 @@ class Node {
        })
      )
    } else {
-      callback()
+      if (enableNodeTransitionMove && !isLayout) {
+        setTimeout(() => {
+          callback()
+        }, nodeTransitionMoveDuration)
+      } else {
+        callback()
+      }
    }
    // 手动插入的节点立即获得焦点并且开启编辑模式
    if (this.nodeData.inserting) {
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -257,6 +257,7 @@ class Render {
    // 重新渲染需要清除激活状态
    if (this.reRender) {
      this.clearActive()
+      this.layout.clearNodePool()
    }
    // 计算布局
    this.layout.doLayout(root => {
@@ -698,7 +699,7 @@ class Render {
      if (Object.keys(config).length > 0) {
        this.mindMap.richText.showEditText(node)
        this.mindMap.richText.formatAllText(config)
-        this.mindMap.richText.hideEditText()
+        this.mindMap.richText.hideEditText([node])
      }
    }
    this.setNodeDataRender(node, data)
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -152,14 +152,15 @@ class RichText {
  }

  // 隐藏文本编辑控件，即完成编辑
-  hideEditText() {
+  hideEditText(nodes) {
    if (!this.showTextEdit) {
      return
    }
    let html = this.quill.container.firstChild.innerHTML
    // 去除最后的空行
    html = html.replace(/<p><br><\/p>$/, '')
-    this.mindMap.renderer.activeNodeList.forEach(node => {
+    let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
+    list.forEach(node => {
      this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
      if (node.isGeneralization) {
        // 概要节点
@@ -170,7 +171,7 @@ class RichText {
    this.mindMap.emit(
      'hide_text_edit',
      this.textEditNode,
-      this.mindMap.renderer.activeNodeList
+      list
    )
    this.textEditNode.style.display = 'none'
    this.showTextEdit = false
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -1,5 +1,5 @@
 import Node from '../Node'
-import { CONSTANTS } from '../utils/constant'
+import { CONSTANTS, initRootNodePositionMap } from '../utils/constant'

 //  布局基类
 class Base {
@@ -43,10 +43,15 @@ class Base {
    this.nodePool[uid] = node
    // 如果总缓存数量达到1000，直接清空
    if (Object.keys(this.nodePool).length > 1000) {
-      this.nodePool = {}
+      this.clearNodePool()
    }
  }

+  // 清空节点存储池
+  clearNodePool() {
+    this.nodePool = {}
+  }
+
  // 检查当前来源是否需要重新计算节点大小
  checkIsNeedResizeSources() {
    return [CONSTANTS.CHANGE_THEME, CONSTANTS.TRANSFORM_TO_NORMAL_NODE].includes(this.renderer.renderSource)
@@ -67,7 +72,7 @@ class Base {
        newNode.getSize()
        newNode.needLayout = true
      }
-    } else if (this.nodePool[data.data.uid]) {
+    } else if (this.nodePool[data.data.uid] && !this.renderer.reRender) {
      // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用
      newNode = this.nodePool[data.data.uid]
      // 保存该节点上一次的数据
@@ -117,10 +122,28 @@ class Base {
    return newNode
  }

+  // 格式化节点位置
+  formatPosition(value, size, nodeSize) {
+    if (typeof value === 'number') {
+      return value
+    } else if (initRootNodePositionMap[value] !== undefined) {
+      return size * initRootNodePositionMap[value]
+    } else if (/^\d\d*%$/.test(value)) {
+      return Number.parseFloat(value) / 100 * size
+    } else {
+      return (size - nodeSize) / 2
+    }
+  }
+
  //  定位节点到画布中间
  setNodeCenter(node) {
-    node.left = (this.mindMap.width - node.width) / 2
-    node.top = (this.mindMap.height - node.height) / 2
+    let { initRootNodePosition } = this.mindMap.opt
+    let { CENTER }= CONSTANTS.INIT_ROOT_NODE_POSITION
+    if (!initRootNodePosition || !Array.isArray(initRootNodePosition) || initRootNodePosition.length < 2) {
+      initRootNodePosition = [CENTER, CENTER]
+    }
+    node.left = this.formatPosition(initRootNodePosition[0], this.mindMap.width, node.width)
+    node.top = this.formatPosition(initRootNodePosition[1], this.mindMap.height, node.height)
  }

  //  更新子节点属性
--- a/simple-mind-map/src/themes/blackGold.js
+++ b/simple-mind-map/src/themes/blackGold.js
@@ -0,0 +1,57 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 黑金
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: 'rgb(18, 20, 20)',
+  // 连线的颜色
+  lineColor: 'rgb(205, 186, 156)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(245, 224, 191)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(255, 208, 124)',
+    color: 'rgb(111, 61, 6)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: '#fff',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(66, 57, 46)',
+    color: 'rgb(225, 201, 158)',
+    borderColor: 'rgb(245, 224, 191)',
+    borderWidth: 2,
+    fontSize: 18,
+    active: {
+      borderColor: 'rgb(255, 208, 124)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(231, 203, 155)',
+    active: {
+      borderColor: 'rgb(255, 208, 124)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(56, 45, 34)',
+    borderColor: 'rgb(104, 84, 61)',
+    borderWidth: 2,
+    color: 'rgb(242, 216, 176)',
+    active: {
+      borderColor: 'rgb(255, 208, 124)'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/blackHumour.js
+++ b/simple-mind-map/src/themes/blackHumour.js
@@ -0,0 +1,58 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 黑色幽默
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: 'rgb(27, 31, 34)',
+  // 连线的颜色
+  lineColor: 'rgb(75, 81, 78)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(255, 119, 34)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(36, 179, 96)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: 'rgb(254, 199, 13)',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(254, 199, 13)',
+    color: 'rgb(0, 0, 0)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 18,
+    active: {
+      borderColor: 'rgb(36, 179, 96)',
+      borderWidth: 3
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(204, 204, 204)',
+    active: {
+      borderColor: 'rgb(254, 199, 13)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(27, 31, 34)',
+    borderColor: 'rgb(255, 119, 34)',
+    borderWidth: 2,
+    color: 'rgb(204, 204, 204)',
+    active: {
+      borderColor: 'rgb(36, 179, 96)'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/coffee.js
+++ b/simple-mind-map/src/themes/coffee.js
@@ -0,0 +1,55 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 咖啡
+export default merge(defaultTheme, {
+  // 连线的颜色
+  lineColor: 'rgb(173, 123, 91)',
+  lineWidth: 4,
+  // 概要连线的粗细
+  generalizationLineWidth: 4,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(173, 123, 91)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(202, 117, 79)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: 'rgb(173, 123, 91)',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(245, 231, 216)',
+    color: 'rgb(125, 86, 42)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 18,
+    active: {
+      borderColor: 'rgb(173, 123, 91)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(96, 71, 47)',
+    active: {
+      borderColor: 'rgb(173, 123, 91)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(255, 249, 239)',
+    borderColor: 'rgb(173, 123, 91)',
+    borderWidth: 2,
+    color: 'rgb(122, 83, 44)',
+    active: {
+      borderColor: 'rgb(202, 117, 79)'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/courseGreen.js
+++ b/simple-mind-map/src/themes/courseGreen.js
@@ -0,0 +1,55 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 课程绿
+export default merge(defaultTheme, {
+  // 连线的颜色
+  lineColor: 'rgb(113, 195, 169)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(113, 195, 169)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(16, 160, 121)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: 'rgb(173, 91, 12)',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(240, 252, 249)',
+    color: 'rgb(50, 113, 96)',
+    borderColor: 'rgb(113, 195, 169)',
+    borderWidth: 2,
+    fontSize: 18,
+    active: {
+      borderColor: 'rgb(173, 91, 12)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(10, 59, 43)',
+    active: {
+      borderColor: 'rgb(173, 91, 12)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(246, 238, 211)',
+    borderColor: '',
+    borderWidth: 0,
+    color: 'rgb(173, 91, 12)',
+    active: {
+      borderColor: 'rgb(113, 195, 169)'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/index.js
+++ b/simple-mind-map/src/themes/index.js
@@ -20,6 +20,13 @@ import vitalityOrange from './vitalityOrange'
 import greenLeaf from './greenLeaf'
 import dark2 from './dark2'
 import skyGreen from './skyGreen'
+import simpleBlack from './simpleBlack'
+import courseGreen from './courseGreen'
+import coffee from './coffee'
+import redSpirit from './redSpirit'
+import blackHumour from './blackHumour'
+import lateNightOffice from './lateNightOffice'
+import blackGold from './blackGold'

 export default {
  default: defaultTheme,
@@ -43,5 +50,12 @@ export default {
  vitalityOrange,
  greenLeaf,
  dark2,
-  skyGreen
+  skyGreen,
+  simpleBlack,
+  courseGreen,
+  coffee,
+  redSpirit,
+  blackHumour,
+  lateNightOffice,
+  blackGold
 }
--- a/simple-mind-map/src/themes/lateNightOffice.js
+++ b/simple-mind-map/src/themes/lateNightOffice.js
@@ -0,0 +1,58 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 深夜办公室
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: 'rgb(32, 37, 49)',
+  // 连线的颜色
+  lineColor: 'rgb(137, 167, 196)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(255, 119, 34)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(23, 153, 243)',
+    color: 'rgb(255, 255, 255)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: 'rgb(255, 119, 34)',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(70, 78, 94)',
+    color: 'rgb(209, 210, 210)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 18,
+    active: {
+      borderColor: 'rgb(255, 119, 34)',
+      borderWidth: 3
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(204, 204, 204)',
+    active: {
+      borderColor: 'rgb(255, 119, 34)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(255, 119, 34)',
+    borderColor: '',
+    borderWidth: 2,
+    color: '#fff',
+    active: {
+      borderColor: 'rgb(23, 153, 243)'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/redSpirit.js
+++ b/simple-mind-map/src/themes/redSpirit.js
@@ -0,0 +1,57 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 红色精神
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: 'rgb(255, 238, 228)',
+  // 连线的颜色
+  lineColor: 'rgb(230, 138, 131)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(222, 101, 85)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(207, 44, 44)',
+    color: 'rgb(255, 233, 157)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: 'rgb(255, 233, 157)',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(255, 255, 255)',
+    color: 'rgb(211, 58, 21)',
+    borderColor: 'rgb(222, 101, 85)',
+    borderWidth: 2,
+    fontSize: 18,
+    active: {
+      borderColor: 'rgb(255, 233, 157)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(144, 71, 43)',
+    active: {
+      borderColor: 'rgb(255, 233, 157)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(255, 247, 211)',
+    borderColor: 'rgb(255, 202, 162)',
+    borderWidth: 2,
+    color: 'rgb(187, 101, 69)',
+    active: {
+      borderColor: 'rgb(222, 101, 85)'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/simpleBlack.js
+++ b/simple-mind-map/src/themes/simpleBlack.js
@@ -0,0 +1,54 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 简约黑
+export default merge(defaultTheme, {
+  // 连线的颜色
+  lineColor: 'rgb(34, 34, 34)',
+  lineWidth: 4,
+  // 概要连线的粗细
+  generalizationLineWidth: 4,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(34, 34, 34)',
+  // 根节点样式
+  root: {
+    fillColor: '#fff',
+    color: 'rgb(34, 34, 34)',
+    borderColor: 'rgb(34, 34, 34)',
+    borderWidth: 3,
+    fontSize: 24,
+    active: {
+      borderColor: '#a13600'
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(241, 246, 248)',
+    color: 'rgb(34, 34, 34)',
+    borderColor: 'rgb(34, 34, 34)',
+    borderWidth: 3,
+    fontSize: 18,
+    active: {
+      borderColor: '#a13600'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(34, 34, 34)',
+    active: {
+      borderColor: '#a13600'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'transparent',
+    borderColor: 'rgb(34, 34, 34)',
+    borderWidth: 2,
+    color: 'rgb(34, 34, 34)',
+    active: {
+      borderColor: '#a13600'
+    }
+  }
+})
--- a/simple-mind-map/src/utils/constant.js
+++ b/simple-mind-map/src/utils/constant.js
@@ -111,6 +111,34 @@ export const themeList = [
  {
    name: '浪漫紫',
    value: 'romanticPurple',
+  },
+  {
+    name: '简约黑',
+    value: 'simpleBlack',
+  },
+  {
+    name: '课程绿',
+    value: 'courseGreen',
+  },
+  {
+    name: '咖啡',
+    value: 'coffee',
+  },
+  {
+    name: '红色精神',
+    value: 'redSpirit',
+  },
+  {
+    name: '黑色幽默',
+    value: 'blackHumour',
+  },
+  {
+    name: '深夜办公室',
+    value: 'lateNightOffice',
+  },
+  {
+    name: '黑金',
+    value: 'blackGold',
  }
 ]

@@ -154,9 +182,24 @@ export const CONSTANTS = {
  MOUSE_WHEEL_ACTION: {
    ZOOM: 'zoom',
    MOVE: 'move'
+  },
+  INIT_ROOT_NODE_POSITION: {
+    LEFT: 'left',
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom',
+    CENTER: 'center'
  }
 }

+export const initRootNodePositionMap = {
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.LEFT]: 0,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.TOP]: 0,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.RIGHT]: 1,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.BOTTOM]: 1,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]: 0.5,
+}
+
 //  布局结构列表
 export const layoutList = [
  {
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -25,6 +25,7 @@
        "@vue/cli-service": "^4.5.0",
        "babel-eslint": "^10.1.0",
        "chokidar": "^3.5.3",
+        "esbuild": "^0.17.15",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "less": "^3.12.2",
@@ -1717,6 +1718,358 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.15.tgz",
+      "integrity": "sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz",
+      "integrity": "sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.15.tgz",
+      "integrity": "sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz",
+      "integrity": "sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz",
+      "integrity": "sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz",
+      "integrity": "sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz",
+      "integrity": "sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz",
+      "integrity": "sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz",
+      "integrity": "sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz",
+      "integrity": "sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz",
+      "integrity": "sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz",
+      "integrity": "sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz",
+      "integrity": "sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz",
+      "integrity": "sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz",
+      "integrity": "sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz",
+      "integrity": "sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz",
+      "integrity": "sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz",
+      "integrity": "sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz",
+      "integrity": "sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz",
+      "integrity": "sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz",
+      "integrity": "sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz",
+      "integrity": "sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/@hapi/address": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -6230,6 +6583,43 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/esbuild": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz",
+      "integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.17.15",
+        "@esbuild/android-arm64": "0.17.15",
+        "@esbuild/android-x64": "0.17.15",
+        "@esbuild/darwin-arm64": "0.17.15",
+        "@esbuild/darwin-x64": "0.17.15",
+        "@esbuild/freebsd-arm64": "0.17.15",
+        "@esbuild/freebsd-x64": "0.17.15",
+        "@esbuild/linux-arm": "0.17.15",
+        "@esbuild/linux-arm64": "0.17.15",
+        "@esbuild/linux-ia32": "0.17.15",
+        "@esbuild/linux-loong64": "0.17.15",
+        "@esbuild/linux-mips64el": "0.17.15",
+        "@esbuild/linux-ppc64": "0.17.15",
+        "@esbuild/linux-riscv64": "0.17.15",
+        "@esbuild/linux-s390x": "0.17.15",
+        "@esbuild/linux-x64": "0.17.15",
+        "@esbuild/netbsd-x64": "0.17.15",
+        "@esbuild/openbsd-x64": "0.17.15",
+        "@esbuild/sunos-x64": "0.17.15",
+        "@esbuild/win32-arm64": "0.17.15",
+        "@esbuild/win32-ia32": "0.17.15",
+        "@esbuild/win32-x64": "0.17.15"
+      }
+    },
    "node_modules/escalade": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -17450,6 +17840,160 @@
        "to-fast-properties": "^2.0.0"
      }
    },
+    "@esbuild/android-arm": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.15.tgz",
+      "integrity": "sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz",
+      "integrity": "sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.15.tgz",
+      "integrity": "sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz",
+      "integrity": "sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz",
+      "integrity": "sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz",
+      "integrity": "sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz",
+      "integrity": "sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz",
+      "integrity": "sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz",
+      "integrity": "sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ia32": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz",
+      "integrity": "sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz",
+      "integrity": "sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-mips64el": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz",
+      "integrity": "sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ppc64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz",
+      "integrity": "sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-riscv64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz",
+      "integrity": "sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-s390x": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz",
+      "integrity": "sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz",
+      "integrity": "sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/netbsd-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz",
+      "integrity": "sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openbsd-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz",
+      "integrity": "sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/sunos-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz",
+      "integrity": "sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-arm64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz",
+      "integrity": "sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-ia32": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz",
+      "integrity": "sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-x64": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz",
+      "integrity": "sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==",
+      "dev": true,
+      "optional": true
+    },
    "@hapi/address": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -21106,6 +21650,36 @@
        "is-symbol": "^1.0.2"
      }
    },
+    "esbuild": {
+      "version": "0.17.15",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz",
+      "integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==",
+      "dev": true,
+      "requires": {
+        "@esbuild/android-arm": "0.17.15",
+        "@esbuild/android-arm64": "0.17.15",
+        "@esbuild/android-x64": "0.17.15",
+        "@esbuild/darwin-arm64": "0.17.15",
+        "@esbuild/darwin-x64": "0.17.15",
+        "@esbuild/freebsd-arm64": "0.17.15",
+        "@esbuild/freebsd-x64": "0.17.15",
+        "@esbuild/linux-arm": "0.17.15",
+        "@esbuild/linux-arm64": "0.17.15",
+        "@esbuild/linux-ia32": "0.17.15",
+        "@esbuild/linux-loong64": "0.17.15",
+        "@esbuild/linux-mips64el": "0.17.15",
+        "@esbuild/linux-ppc64": "0.17.15",
+        "@esbuild/linux-riscv64": "0.17.15",
+        "@esbuild/linux-s390x": "0.17.15",
+        "@esbuild/linux-x64": "0.17.15",
+        "@esbuild/netbsd-x64": "0.17.15",
+        "@esbuild/openbsd-x64": "0.17.15",
+        "@esbuild/sunos-x64": "0.17.15",
+        "@esbuild/win32-arm64": "0.17.15",
+        "@esbuild/win32-ia32": "0.17.15",
+        "@esbuild/win32-x64": "0.17.15"
+      }
+    },
    "escalade": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -6,7 +6,7 @@
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && node ../copy.js",
    "lint": "vue-cli-service lint",
-    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist",
+    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist && esbuild ../simple-mind-map/full.js --bundle --external:buffer --format=esm --outfile=../simple-mind-map/dist/simpleMindMap.esm.js",
    "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
    "buildDoc": "node ./scripts/buildDoc.js",
    "autoBuildDoc": "node ./scripts/autoBuildDoc.js"
@@ -29,6 +29,7 @@
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "chokidar": "^3.5.3",
+    "esbuild": "^0.17.15",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.12.2",
--- a/web/scripts/transformMdToVue.js
+++ b/web/scripts/transformMdToVue.js
@@ -2,6 +2,8 @@ const path = require('path')
 const fs = require('fs')
 const hljs = require('highlight.js')
 const md = require('markdown-it')({
+  html: true,
+  xhtmlOut: true,
  highlight: function(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
--- a/web/src/assets/img/alipay.jpg
+++ b/web/src/assets/img/alipay.jpg
--- a/web/src/assets/img/wechat.jpg
+++ b/web/src/assets/img/wechat.jpg
--- a/web/src/customThemes/blackGold.js
+++ b/web/src/customThemes/blackGold.js
@@ -1,55 +0,0 @@
-// 黑金
-export default {
-    // 背景颜色
-    backgroundColor: 'rgb(18, 20, 20)',
-    // 连线的颜色
-    lineColor: 'rgb(205, 186, 156)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(245, 224, 191)',
-    // 根节点样式
-    root: {
-      fillColor: 'rgb(255, 208, 124)',
-      color: 'rgb(111, 61, 6)',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 24,
-      active: {
-        borderColor: '#fff',
-        borderWidth: 3,
-      }
-    },
-    // 二级节点样式
-    second: {
-      fillColor: 'rgb(66, 57, 46)',
-      color: 'rgb(225, 201, 158)',
-      borderColor: 'rgb(245, 224, 191)',
-      borderWidth: 2,
-      fontSize: 18,
-      active: {
-        borderColor: 'rgb(255, 208, 124)',
-      }
-    },
-    // 三级及以下节点样式
-    node: {
-      fontSize: 14,
-      color: 'rgb(231, 203, 155)',
-      active: {
-        borderColor: 'rgb(255, 208, 124)'
-      }
-    },
-    // 概要节点样式
-    generalization: {
-      fontSize: 14,
-      fillColor: 'rgb(56, 45, 34)',
-      borderColor: 'rgb(104, 84, 61)',
-      borderWidth: 2,
-      color: 'rgb(242, 216, 176)',
-      active: {
-        borderColor: 'rgb(255, 208, 124)'
-      }
-    }
-  }
-  
--- a/web/src/customThemes/blackHumour.js
+++ b/web/src/customThemes/blackHumour.js
@@ -1,56 +0,0 @@
-// 黑色幽默
-export default {
-    // 背景颜色
-    backgroundColor: 'rgb(27, 31, 34)',
-    // 连线的颜色
-    lineColor: 'rgb(75, 81, 78)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(255, 119, 34)',
-    // 根节点样式
-    root: {
-      fillColor: 'rgb(36, 179, 96)',
-      color: '#fff',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 24,
-      active: {
-        borderColor: 'rgb(254, 199, 13)',
-        borderWidth: 3,
-      }
-    },
-    // 二级节点样式
-    second: {
-      fillColor: 'rgb(254, 199, 13)',
-      color: 'rgb(0, 0, 0)',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 18,
-      active: {
-        borderColor: 'rgb(36, 179, 96)',
-        borderWidth: 3,
-      }
-    },
-    // 三级及以下节点样式
-    node: {
-      fontSize: 14,
-      color: 'rgb(204, 204, 204)',
-      active: {
-        borderColor: 'rgb(254, 199, 13)'
-      }
-    },
-    // 概要节点样式
-    generalization: {
-      fontSize: 14,
-      fillColor: 'rgb(27, 31, 34)',
-      borderColor: 'rgb(255, 119, 34)',
-      borderWidth: 2,
-      color: 'rgb(204, 204, 204)',
-      active: {
-        borderColor: 'rgb(36, 179, 96)'
-      }
-    }
-  }
-  
--- a/web/src/customThemes/coffee.js
+++ b/web/src/customThemes/coffee.js
@@ -1,53 +0,0 @@
-// 咖啡
-export default {
-    // 连线的颜色
-    lineColor: 'rgb(173, 123, 91)',
-    lineWidth: 4,
-    // 概要连线的粗细
-    generalizationLineWidth: 4,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(173, 123, 91)',
-    // 根节点样式
-    root: {
-      fillColor: 'rgb(202, 117, 79)',
-      color: '#fff',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 24,
-      active: {
-        borderColor: 'rgb(173, 123, 91)',
-        borderWidth: 3,
-      }
-    },
-    // 二级节点样式
-    second: {
-      fillColor: 'rgb(245, 231, 216)',
-      color: 'rgb(125, 86, 42)',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 18,
-      active: {
-        borderColor: 'rgb(173, 123, 91)',
-      }
-    },
-    // 三级及以下节点样式
-    node: {
-      fontSize: 14,
-      color: 'rgb(96, 71, 47)',
-      active: {
-        borderColor: 'rgb(173, 123, 91)'
-      }
-    },
-    // 概要节点样式
-    generalization: {
-      fontSize: 14,
-      fillColor: 'rgb(255, 249, 239)',
-      borderColor: 'rgb(173, 123, 91)',
-      borderWidth: 2,
-      color: 'rgb(122, 83, 44)',
-      active: {
-        borderColor: 'rgb(202, 117, 79)'
-      }
-    }
-  }
-  
--- a/web/src/customThemes/courseGreen.js
+++ b/web/src/customThemes/courseGreen.js
@@ -1,53 +0,0 @@
-// 课程绿
-export default {
-    // 连线的颜色
-    lineColor: 'rgb(113, 195, 169)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(113, 195, 169)',
-    // 根节点样式
-    root: {
-      fillColor: 'rgb(16, 160, 121)',
-      color: '#fff',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 24,
-      active: {
-        borderColor: 'rgb(173, 91, 12)',
-        borderWidth: 3,
-      }
-    },
-    // 二级节点样式
-    second: {
-      fillColor: 'rgb(240, 252, 249)',
-      color: 'rgb(50, 113, 96)',
-      borderColor: 'rgb(113, 195, 169)',
-      borderWidth: 2,
-      fontSize: 18,
-      active: {
-        borderColor: 'rgb(173, 91, 12)',
-      }
-    },
-    // 三级及以下节点样式
-    node: {
-      fontSize: 14,
-      color: 'rgb(10, 59, 43)',
-      active: {
-        borderColor: 'rgb(173, 91, 12)'
-      }
-    },
-    // 概要节点样式
-    generalization: {
-      fontSize: 14,
-      fillColor: 'rgb(246, 238, 211)',
-      borderColor: '',
-      borderWidth: 0,
-      color: 'rgb(173, 91, 12)',
-      active: {
-        borderColor: 'rgb(113, 195, 169)'
-      }
-    }
-  }
-  
--- a/web/src/customThemes/index.js
+++ b/web/src/customThemes/index.js
@@ -1,45 +1,9 @@
 import simpleBlack from './simpleBlack'
-import courseGreen from './courseGreen'
-import coffee from './coffee'
-import redSpirit from './redSpirit'
-import blackHumour from './blackHumour'
-import lateNightOffice from './lateNightOffice'
-import blackGold from './blackGold'

 export default [
    {
        name: '简约黑',
        value: 'simpleBlack',
        theme: simpleBlack
-    },
-    {
-        name: '课程绿',
-        value: 'courseGreen',
-        theme: courseGreen
-    },
-    {
-        name: '咖啡',
-        value: 'coffee',
-        theme: coffee
-    },
-    {
-        name: '红色精神',
-        value: 'redSpirit',
-        theme: redSpirit
-    },
-    {
-        name: '黑色幽默',
-        value: 'blackHumour',
-        theme: blackHumour
-    },
-    {
-        name: '深夜办公室',
-        value: 'lateNightOffice',
-        theme: lateNightOffice
-    },
-    {
-        name: '黑金',
-        value: 'blackGold',
-        theme: blackGold
    }
 ]
--- a/web/src/customThemes/lateNightOffice.js
+++ b/web/src/customThemes/lateNightOffice.js
@@ -1,56 +0,0 @@
-// 深夜办公室
-export default {
-    // 背景颜色
-    backgroundColor: 'rgb(32, 37, 49)',
-    // 连线的颜色
-    lineColor: 'rgb(137, 167, 196)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(255, 119, 34)',
-    // 根节点样式
-    root: {
-      fillColor: 'rgb(23, 153, 243)',
-      color: 'rgb(255, 255, 255)',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 24,
-      active: {
-        borderColor: 'rgb(255, 119, 34)',
-        borderWidth: 3,
-      }
-    },
-    // 二级节点样式
-    second: {
-      fillColor: 'rgb(70, 78, 94)',
-      color: 'rgb(209, 210, 210)',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 18,
-      active: {
-        borderColor: 'rgb(255, 119, 34)',
-        borderWidth: 3,
-      }
-    },
-    // 三级及以下节点样式
-    node: {
-      fontSize: 14,
-      color: 'rgb(204, 204, 204)',
-      active: {
-        borderColor: 'rgb(255, 119, 34)'
-      }
-    },
-    // 概要节点样式
-    generalization: {
-      fontSize: 14,
-      fillColor: 'rgb(255, 119, 34)',
-      borderColor: '',
-      borderWidth: 2,
-      color: '#fff',
-      active: {
-        borderColor: 'rgb(23, 153, 243)'
-      }
-    }
-  }
-  
--- a/web/src/customThemes/redSpirit.js
+++ b/web/src/customThemes/redSpirit.js
@@ -1,55 +0,0 @@
-// 红色精神
-export default {
-    // 背景颜色
-    backgroundColor: 'rgb(255, 238, 228)',
-    // 连线的颜色
-    lineColor: 'rgb(230, 138, 131)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(222, 101, 85)',
-    // 根节点样式
-    root: {
-      fillColor: 'rgb(207, 44, 44)',
-      color: 'rgb(255, 233, 157)',
-      borderColor: '',
-      borderWidth: 0,
-      fontSize: 24,
-      active: {
-        borderColor: 'rgb(255, 233, 157)',
-        borderWidth: 3,
-      }
-    },
-    // 二级节点样式
-    second: {
-      fillColor: 'rgb(255, 255, 255)',
-      color: 'rgb(211, 58, 21)',
-      borderColor: 'rgb(222, 101, 85)',
-      borderWidth: 2,
-      fontSize: 18,
-      active: {
-        borderColor: 'rgb(255, 233, 157)',
-      }
-    },
-    // 三级及以下节点样式
-    node: {
-      fontSize: 14,
-      color: 'rgb(144, 71, 43)',
-      active: {
-        borderColor: 'rgb(255, 233, 157)'
-      }
-    },
-    // 概要节点样式
-    generalization: {
-      fontSize: 14,
-      fillColor: 'rgb(255, 247, 211)',
-      borderColor: 'rgb(255, 202, 162)',
-      borderWidth: 2,
-      color: 'rgb(187, 101, 69)',
-      active: {
-        borderColor: 'rgb(222, 101, 85)'
-      }
-    }
-  }
-  
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -11,6 +11,9 @@ let langList = [
  }
 ]
 let StartList = ['introduction', 'start', 'translate', 'changelog']
+let CourseList = new Array(18).fill(0).map((_, index) => {
+  return 'course' + (index + 1)
+})
 let APIList = [
  'constructor',
  'node',
@@ -59,6 +62,10 @@ export default {
      groupName: '开始',
      list: createList('zh', StartList)
    },
+    {
+      groupName: '教程',
+      list: createList('zh', CourseList)
+    },
    {
      groupName: 'API',
      list: createList('zh', APIList)
@@ -69,6 +76,10 @@ export default {
      groupName: 'Start',
      list: createList('en', StartList)
    },
+    {
+      groupName: 'Course',
+      list: createList('zh', CourseList)
+    },
    {
      groupName: 'API',
      list: createList('en', APIList)
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,33 @@
 # Changelog

+## 0.5.4
+
+New: 1.Add new themes.
+
+## 0.5.3
+
+Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.
+
+New: 1.Support setting the position of the initial central node.
+
+### 0.5.3-fix.1
+
+Fix: 1.Fix the issue where setting the position of the initial central node does not take effect.
+
+### 0.5.3-fix.2
+
+Fix: 1.Fix the issue of not displaying images in nodes when exporting as images.
+
+## 0.5.2
+
+Fix: 1.Remove `uid` from exported `JSON` data; 2.Clear the node cache pool when re rendering.
+
+## 0.5.1
+
+optimization: 1.Only respond to shortcut key events when the mouse is inside the canvas
+
+Fix: 1.Fix the issue of incorrect node position during fast operation
+
 ## 0.5.0

 This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,20 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.5.4</h2>
+<p>New: 1.Add new themes.</p>
+<h2>0.5.3</h2>
+<p>Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.</p>
+<p>New: 1.Support setting the position of the initial central node.</p>
+<h3>0.5.3-fix.1</h3>
+<p>Fix: 1.Fix the issue where setting the position of the initial central node does not take effect.</p>
+<h3>0.5.3-fix.2</h3>
+<p>Fix: 1.Fix the issue of not displaying images in nodes when exporting as images.</p>
+<h2>0.5.2</h2>
+<p>Fix: 1.Remove <code>uid</code> from exported <code>JSON</code> data; 2.Clear the node cache pool when re rendering.</p>
+<h2>0.5.1</h2>
+<p>optimization: 1.Only respond to shortcut key events when the mouse is inside the canvas</p>
+<p>Fix: 1.Fix the issue of incorrect node position during fast operation</p>
 <h2>0.5.0</h2>
 <p>This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.</p>
 <p>New: 1.Support custom expansion and collapse node icons and colors;</p>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -27,7 +27,7 @@ const mindMap = new MindMap({
 | el                               | Element |                  | Container element, must be a DOM element                     | Yes      |
 | data                             | Object  | {}               | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js |          |
 | layout                           | String  | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) |          |
-| theme                            | String  | default          | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple |          |
+| theme                            | String  | default          | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+) |          |
 | themeConfig                      | Object  | {}               | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js |          |
 | scaleRatio                       | Number  | 0.1              | The incremental scaling ratio                                |          |
 | maxTag                           | Number  | 5                | The maximum number of tags displayed in the node, any additional tags will be discarded |          |
@@ -48,6 +48,10 @@ const mindMap = new MindMap({
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | Text for nodes below the second level inserted by default               |          |
 | expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | Expand the color of the stow button  |          |
 | expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon  |          |
+| enableShortcutOnlyWhenMouseInSvg（v0.5.1+）     | Boolean  | true | Only respond to shortcut key events when the mouse is inside the canvas  |          |
+| enableNodeTransitionMove（v0.5.1+）     | Boolean  | true | Whether to enable node animation transition  |          |
+| nodeTransitionMoveDuration（v0.5.1+）     | Number  | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds  |          |
+| initRootNodePosition（v0.5.3+）     | Array  | null | The position of the initial root node can be passed as an array, default is `['center', 'center']`, Represents the root node at the center of the canvas, In addition to `center`, keywords can also be set to `left`, `top`, `right`, and `bottom`, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as `['40%', '60%']`, Represents a horizontal position at `40%` of the canvas width, and a vertical position at `60%` of the canvas height   |          |

 ### Watermark config

@@ -200,6 +204,8 @@ Listen to an event. Event list:
 | node_dragging（v0.4.5+）    | Triggered when a node is dragged   |  node(The currently dragged node)           |
 | node_dragend（v0.4.5+）    | Triggered when the node is dragged and ends   |             |
 | associative_line_click（v0.4.5+）    |  Triggered when an associated line is clicked  |  path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node)          |
+| svg_mouseenter（v0.5.1+）    | Triggered when the mouse moves into the SVG canvas   | e（event object）  |
+| svg_mouseleave（v0.5.1+）    | Triggered when the mouse moves out of the SVG canvas   | e（event object）  |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -53,7 +53,7 @@
 <td>theme</td>
 <td>String</td>
 <td>default</td>
-<td>Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple</td>
+<td>Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)</td>
 <td></td>
 </tr>
 <tr>
@@ -196,6 +196,34 @@
 <td>Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon</td>
 <td></td>
 </tr>
+<tr>
+<td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Only respond to shortcut key events when the mouse is inside the canvas</td>
+<td></td>
+</tr>
+<tr>
+<td>enableNodeTransitionMove（v0.5.1+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Whether to enable node animation transition</td>
+<td></td>
+</tr>
+<tr>
+<td>nodeTransitionMoveDuration（v0.5.1+）</td>
+<td>Number</td>
+<td>300</td>
+<td>If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds</td>
+<td></td>
+</tr>
+<tr>
+<td>initRootNodePosition（v0.5.3+）</td>
+<td>Array</td>
+<td>null</td>
+<td>The position of the initial root node can be passed as an array, default is <code>['center', 'center']</code>, Represents the root node at the center of the canvas, In addition to <code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as <code>['40%', '60%']</code>, Represents a horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of the canvas height</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>
@@ -490,6 +518,16 @@ poor performance and should be used sparingly.</p>
 <td>Triggered when an associated line is clicked</td>
 <td>path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node)</td>
 </tr>
+<tr>
+<td>svg_mouseenter（v0.5.1+）</td>
+<td>Triggered when the mouse moves into the SVG canvas</td>
+<td>e（event object）</td>
+</tr>
+<tr>
+<td>svg_mouseleave（v0.5.1+）</td>
+<td>Triggered when the mouse moves out of the SVG canvas</td>
+<td>e（event object）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -2,6 +2,8 @@

 `simple-mind-map` is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.

+> If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.
+
 ## Features

 - [x] Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume
@@ -77,6 +79,34 @@ The built-in themes and icons in the project come from:

 Respect the copyright, and do not use the theme and icons directly for commercial projects.

+## Why not？
+
+1.[Zhixi](https://www.zhixi.com/)
+
+Zhixi is a free mind mapping product that supports multi end synchronization. The UI design is beautiful and the features are complete, but it is not open source, so it can only be used as a user and cannot be used in your project.
+
+There are many other online mind mapping products similar to Zhixi, such as [GitMind](https://gitmind.cn/)、[MindLine](http://www.mindline.cn/)、[MinMeister](https://www.mindmeister.com/zh)、[Mubu](https://mubu.com/) and so on, There are many searches on search engines, but these products either require fees or are developed by small companies, and their stability and sustainability cannot be guaranteed. Of course, the most crucial thing is that they are not open-source.
+
+2.[kityminder-core](https://github.com/fex-team/kityminder-core)
+
+`kityminder-core` is an open source brain mapping tool developed by Baidu. It has powerful functions and good performance, but it is no longer maintained. Therefore, the code is relatively old, and the interface beauty is relatively ordinary. In addition, bugs can only be fixed by yourself, and the functions can only be developed by yourself. It has high requirements for front-end development capabilities.
+
+3.[jsmind](https://github.com/hizzgdev/jsmind)、[Mind-elixir](https://github.com/ssshooter/mind-elixir-core)、[my-mind](https://github.com/ondras/my-mind)、[blink-mind](https://github.com/awehook/blink-mind)、[remind](https://github.com/luvsic3/remind)、[vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)、[ZMindMap](https://github.com/zyascend/ZMindMap)...
+
+These open-source mind maps are also good, each with its own characteristics, but they also have certain drawbacks, such as stopping updates, average interface aesthetics, less functionality, relying on a certain framework, and so on.
+
+In summary, in open-source mind maps, it is difficult to find a better choice than `simple-mind-map`. Of course, `simple-mind-map` is far from being the best, and it also has many shortcomings, as you saw in the previous [special note]. However, `simple-mind-map` has always been in a fast iteration process, and we welcome you to join and improve it together.
+
 ## License

-[MIT](https://opensource.org/licenses/MIT)
+[MIT](https://opensource.org/licenses/MIT)
+
+## Invite the author to a cup of coffee
+
+Open source is not easy. If this project is helpful to you, you can invite the author to have a cup of coffee~
+
+> Please note the 【mind map】 for transfer. Your avatar and name will appear below.
+
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -2,23 +2,26 @@
  <div>
    <h1>Introduction</h1>
 <p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.</p>
+<blockquote>
+<p>If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.</p>
+</blockquote>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox216" checked="true"><label for="checkbox216">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
-<li><input type="checkbox" id="checkbox217" checked="true"><label for="checkbox217">Supports four types of structures: logical structure diagrams, mind maps,</label>
+<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
+<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Supports four types of structures: logical structure diagrams, mind maps,</label>
 organizational structure diagrams, and directory organization diagrams</li>
-<li><input type="checkbox" id="checkbox218" checked="true"><label for="checkbox218">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
-<li><input type="checkbox" id="checkbox219" checked="true"><label for="checkbox219">Supports shortcuts</label></li>
-<li><input type="checkbox" id="checkbox220" checked="true"><label for="checkbox220">Node content supports images, icons, hyperlinks, notes, tags, and</label>
+<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
+<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Supports shortcuts</label></li>
+<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Node content supports images, icons, hyperlinks, notes, tags, and</label>
 summaries</li>
-<li><input type="checkbox" id="checkbox221" checked="true"><label for="checkbox221">Supports forward and backward navigation</label></li>
-<li><input type="checkbox" id="checkbox222" checked="true"><label for="checkbox222">Supports dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox223" checked="true"><label for="checkbox223">Supports right-click and Ctrl + left-click to select multiple items</label></li>
-<li><input type="checkbox" id="checkbox224" checked="true"><label for="checkbox224">Supports free dragging and dragging to adjust nodes</label></li>
-<li><input type="checkbox" id="checkbox225" checked="true"><label for="checkbox225">Supports various node shapes</label></li>
-<li><input type="checkbox" id="checkbox226" checked="true"><label for="checkbox226">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
-<li><input type="checkbox" id="checkbox227" checked="true"><label for="checkbox227">Supports mini map、support watermark</label></li>
-<li><input type="checkbox" id="checkbox228" checked="true"><label for="checkbox228">Supports associative lines</label></li>
+<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supports forward and backward navigation</label></li>
+<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Supports dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Supports right-click and Ctrl + left-click to select multiple items</label></li>
+<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Supports free dragging and dragging to adjust nodes</label></li>
+<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Supports various node shapes</label></li>
+<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
+<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Supports mini map、support watermark</label></li>
+<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Supports associative lines</label></li>
 </ul>
 <h2>Repository Catalog Introduction</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -28,16 +31,16 @@ frameworks such as Vue and React, or without a framework.</p>
 <p>This is an online mind map built using the <code>simple-mind-map</code> library and based
 on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
 <ul>
-<li><input type="checkbox" id="checkbox229" checked="true"><label for="checkbox229">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Toolbar, which supports inserting and deleting nodes, and editing node</label>
 images, icons, hyperlinks, notes, tags, and summaries</li>
-<li><input type="checkbox" id="checkbox230" checked="true"><label for="checkbox230">Sidebar, with panels for basic style settings, node style settings,</label>
+<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Sidebar, with panels for basic style settings, node style settings,</label>
 outline, theme selection, and structure selection</li>
-<li><input type="checkbox" id="checkbox231" checked="true"><label for="checkbox231">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Import and export functionality; data is saved in the browser's local</label>
 storage by default, but it also supports creating, opening, and editing
 local files on the computer directly</li>
-<li><input type="checkbox" id="checkbox232" checked="true"><label for="checkbox232">Right-click menu, which supports operations such as expanding, collapsing,</label>
+<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Right-click menu, which supports operations such as expanding, collapsing,</label>
 and organizing layout</li>
-<li><input type="checkbox" id="checkbox233" checked="true"><label for="checkbox233">Bottom bar, which supports node and word count statistics, switching</label>
+<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Bottom bar, which supports node and word count statistics, switching</label>
 between edit and read-only modes, zooming in and out, and switching to
 full screen, support mini map</li>
 </ul>
@@ -57,9 +60,24 @@ full screen, support mini map</li>
 <p><a href="https://naotu.baidu.com/">Baidu Mind Map</a></p>
 <p><a href="https://www.zhixi.com/">Zhixi Mind Map</a></p>
 <p>Respect the copyright, and do not use the theme and icons directly for commercial projects.</p>
+<h2>Why not？</h2>
+<p>1.<a href="https://www.zhixi.com/">Zhixi</a></p>
+<p>Zhixi is a free mind mapping product that supports multi end synchronization. The UI design is beautiful and the features are complete, but it is not open source, so it can only be used as a user and cannot be used in your project.</p>
+<p>There are many other online mind mapping products similar to Zhixi, such as <a href="https://gitmind.cn/">GitMind</a>、<a href="http://www.mindline.cn/">MindLine</a>、<a href="https://www.mindmeister.com/zh">MinMeister</a>、<a href="https://mubu.com/">Mubu</a> and so on, There are many searches on search engines, but these products either require fees or are developed by small companies, and their stability and sustainability cannot be guaranteed. Of course, the most crucial thing is that they are not open-source.</p>
+<p>2.<a href="https://github.com/fex-team/kityminder-core">kityminder-core</a></p>
+<p><code>kityminder-core</code> is an open source brain mapping tool developed by Baidu. It has powerful functions and good performance, but it is no longer maintained. Therefore, the code is relatively old, and the interface beauty is relatively ordinary. In addition, bugs can only be fixed by yourself, and the functions can only be developed by yourself. It has high requirements for front-end development capabilities.</p>
+<p>3.<a href="https://github.com/hizzgdev/jsmind">jsmind</a>、<a href="https://github.com/ssshooter/mind-elixir-core">Mind-elixir</a>、<a href="https://github.com/ondras/my-mind">my-mind</a>、<a href="https://github.com/awehook/blink-mind">blink-mind</a>、<a href="https://github.com/luvsic3/remind">remind</a>、<a href="https://github.com/hellowuxin/vue3-mindmap">vue3-mindmap</a>、<a href="https://github.com/zyascend/ZMindMap">ZMindMap</a>...</p>
+<p>These open-source mind maps are also good, each with its own characteristics, but they also have certain drawbacks, such as stopping updates, average interface aesthetics, less functionality, relying on a certain framework, and so on.</p>
+<p>In summary, in open-source mind maps, it is difficult to find a better choice than <code>simple-mind-map</code>. Of course, <code>simple-mind-map</code> is far from being the best, and it also has many shortcomings, as you saw in the previous [special note]. However, <code>simple-mind-map</code> has always been in a fast iteration process, and we welcome you to join and improve it together.</p>
 <h2>License</h2>
 <p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
-
+<h2>Invite the author to a cup of coffee</h2>
+<p>Open source is not easy. If this project is helpful to you, you can invite the author to have a cup of coffee~</p>
+<blockquote>
+<p>Please note the 【mind map】 for transfer. Your avatar and name will appear below.</p>
+</blockquote>
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
  </div>
 </template>

--- a/web/src/pages/Doc/en/miniMap/index.md
+++ b/web/src/pages/Doc/en/miniMap/index.md
@@ -54,13 +54,13 @@ positioning, set border style, transition property (optional)

 4.Listen for `data_change` and `view_data_change` events, and in this event call
 the `calculationMiniMap` method to get calculation data, then render `svgHTML`
-to the `miniMapContainer` element and set its style:
+to the `miniMapContainer` element and set `miniMapContainer` element style:

 ```js
 :style="{
-    transform: `scale(${svgBoxScale})`,
-    left: svgBoxLeft + 'px',
-    top: svgBoxTop + 'px',
+    transform: `scale(${miniMapBoxScale})`,
+    left: miniMapBoxLeft + 'px',
+    top: miniMapBoxTop + 'px',
 }"
 ```

--- a/web/src/pages/Doc/en/miniMap/index.vue
+++ b/web/src/pages/Doc/en/miniMap/index.vue
@@ -39,11 +39,11 @@ absolute positioning</p>
 positioning, set border style, transition property (optional)</p>
 <p>4.Listen for <code>data_change</code> and <code>view_data_change</code> events, and in this event call
 the <code>calculationMiniMap</code> method to get calculation data, then render <code>svgHTML</code>
-to the <code>miniMapContainer</code> element and set its style:</p>
+to the <code>miniMapContainer</code> element and set <code>miniMapContainer</code> element style:</p>
 <pre class="hljs"><code>:style=<span class="hljs-string">&quot;{
-    transform: `scale(${svgBoxScale})`,
-    left: svgBoxLeft + &#x27;px&#x27;,
-    top: svgBoxTop + &#x27;px&#x27;,
+    transform: `scale(${miniMapBoxScale})`,
+    left: miniMapBoxLeft + &#x27;px&#x27;,
+    top: miniMapBoxTop + &#x27;px&#x27;,
 }&quot;</span>
 </code></pre>
 <p>5.Set the <code>viewBoxStyle</code> object as the style of the <code>viewBoxContainer</code> element</p>
--- a/web/src/pages/Doc/en/start/index.md
+++ b/web/src/pages/Doc/en/start/index.md
@@ -1,7 +1,92 @@
 # Start

+## Installation
+
+> Things to note before version 0.2.0:
+
+```bash
+npm i simple-mind-map
+```
+
+`0.2.0` Notes for previous versions:
+
+> Note: This project is directly published in source code form and has not been
+> packaged. If compilation fails, a Vue CLI-created project can add the
+> following configuration to the vue.config.js file to allow babel-loader to
+> compile this dependency:
+>
+> ```js
+> module.exports = {
+>   transpileDependencies: ["simple-mind-map"],
+> };
+> ```
+>
+> Other projects should modify the packaging configuration as needed.
+
+## Usage
+
+> The `web` directory of this repository provides a complete project based on `Vue2`. If you encounter any doubts about using it, you can refer to the implementation of this project.
+
+> To learn about its use in other frameworks, you can refer to the following unofficial implementations:
+>
+> 1.[https://github.com/huangyuanyin/hyy-vue3-mindMap](https://github.com/huangyuanyin/hyy-vue3-mindMap): A mind map based on Vue3.2+ElementPlus.
+
+Firstly, provide a container element with a width and height not equal to 0:
+
+```html
+<div id="mindMapContainer"></div>
+```
+
+Also, set the `CSS` style again:
+
+```css
+#mindMapContainer * {
+  margin: 0;
+  padding: 0;
+}
+```
+
+Then introduce the `simple-mind-map` library and create an instance:
+
+```js
+import MindMap from "simple-mind-map";
+
+const mindMap = new MindMap({
+  el: document.getElementById('mindMapContainer'),
+  data: {
+    "data": {
+        "text": "Root Node"
+    },
+    "children": []
+  }
+});
+```
+
+This will result in a mind map.
+
+If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the `simple-mind-map` library.
+
+`simple-mind-map` supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.
+
+The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
+
+If you need a file in the format of `umd` module, such as `CDN` in the browser, Then you can find the `simpleMindMap.umd.min.js` file and `simpleMindMap.css` file in the `/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page:
+
+```html
+<link rel="stylesheet" href="simpleMindMap.css">
+<script scr="simpleMindMap.umd.min.js"></script>
+```
+
+A global variable `window.simpleMindMap` will be created.
+
+The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
+
+（v0.5.4+）If you want to use the `ES` module directly on the browser side, you can find the `simpleMindMap.esm.js` and `simpleMindMap.esm.css` files in the `/simple-mind-map/dist/` directory.
+
 ## Development

+If you only use library, you don't need to read this section.
+
 ### Local Development

 ```bash
@@ -56,63 +141,6 @@ npm run build

 The `index.html` file will be automatically moved to the root directory.

-## Installation
-
-> Things to note before version 0.2.0:
-
-```bash
-npm i simple-mind-map
-```
-
-`0.2.0` Notes for previous versions:
-
-> Note: This project is directly published in source code form and has not been
-> packaged. If compilation fails, a Vue CLI-created project can add the
-> following configuration to the vue.config.js file to allow babel-loader to
-> compile this dependency:
->
-> ```js
-> module.exports = {
->   transpileDependencies: ["simple-mind-map"],
-> };
-> ```
->
-> Other projects should modify the packaging configuration as needed.
-
-## Usage
-
-> The `web` directory of this repository provides a complete project based on `Vue2`. If you encounter any doubts about using it, you can refer to the implementation of this project.
-
-```html
-<div id="mindMapContainer"></div>
-```
-
-```js
-import MindMap from "simple-mind-map";
-
-const mindMap = new MindMap({
-  el: document.getElementById('mindMapContainer'),
-  data: {
-    "data": {
-        "text": "Root Node"
-    },
-    "children": []
-  }
-});
-```
-
-The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
-
-If you need a file in the format of `umd` module, such as `CDN` in the browser, Then you can find the `simpleMindMap.umd.min.js` file in the `/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page:
-
-```html
-<script scr="simpleMindMap.umd.min.js"></script>
-```
-
-A global variable `window.simpleMindMap` will be created.
-
-The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
-
 ## Problems

 ### Error when using in Vite, indicating xml-js dependency error
--- a/web/src/pages/Doc/en/start/index.vue
+++ b/web/src/pages/Doc/en/start/index.vue
@@ -1,7 +1,67 @@
 <template>
  <div>
    <h1>Start</h1>
+<h2>Installation</h2>
+<blockquote>
+<p>Things to note before version 0.2.0:</p>
+</blockquote>
+<pre class="hljs"><code>npm i simple-mind-map
+</code></pre>
+<p><code>0.2.0</code> Notes for previous versions:</p>
+<blockquote>
+<p>Note: This project is directly published in source code form and has not been
+packaged. If compilation fails, a Vue CLI-created project can add the
+following configuration to the vue.config.js file to allow babel-loader to
+compile this dependency:</p>
+<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
+  <span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">&quot;simple-mind-map&quot;</span>],
+};
+</code></pre>
+<p>Other projects should modify the packaging configuration as needed.</p>
+</blockquote>
+<h2>Usage</h2>
+<blockquote>
+<p>The <code>web</code> directory of this repository provides a complete project based on <code>Vue2</code>. If you encounter any doubts about using it, you can refer to the implementation of this project.</p>
+</blockquote>
+<blockquote>
+<p>To learn about its use in other frameworks, you can refer to the following unofficial implementations:</p>
+<p>1.<a href="https://github.com/huangyuanyin/hyy-vue3-mindMap">https://github.com/huangyuanyin/hyy-vue3-mindMap</a>: A mind map based on Vue3.2+ElementPlus.</p>
+</blockquote>
+<p>Firstly, provide a container element with a width and height not equal to 0:</p>
+<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+<p>Also, set the <code>CSS</code> style again:</p>
+<pre class="hljs"><code><span class="hljs-selector-id">#mindMapContainer</span> * {
+  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
+  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
+}
+</code></pre>
+<p>Then introduce the <code>simple-mind-map</code> library and create an instance:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</span>;
+
+<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
+  <span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;mindMapContainer&#x27;</span>),
+  <span class="hljs-attr">data</span>: {
+    <span class="hljs-string">&quot;data&quot;</span>: {
+        <span class="hljs-string">&quot;text&quot;</span>: <span class="hljs-string">&quot;Root Node&quot;</span>
+    },
+    <span class="hljs-string">&quot;children&quot;</span>: []
+  }
+});
+</code></pre>
+<p>This will result in a mind map.</p>
+<p>If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the <code>simple-mind-map</code> library.</p>
+<p><code>simple-mind-map</code> supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.</p>
+<p>The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the <code>babel</code> compilation <code>simple mind-map</code> in your project to prevent some newer <code>js</code> syntax some browsers not supporting it.</p>
+<p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, Then you can find the <code>simpleMindMap.umd.min.js</code> file and <code>simpleMindMap.css</code> file in the <code>/simple-mind-map/dist/</code> directory, copy it to your project, and then import it into the page:</p>
+<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+</code></pre>
+<p>A global variable <code>window.simpleMindMap</code> will be created.</p>
+<p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
+<p>（v0.5.4+）If you want to use the <code>ES</code> module directly on the browser side, you can find the <code>simpleMindMap.esm.js</code> and <code>simpleMindMap.esm.css</code> files in the <code>/simple-mind-map/dist/</code> directory.</p>
 <h2>Development</h2>
+<p>If you only use library, you don't need to read this section.</p>
 <h3>Local Development</h3>
 <pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
 <span class="hljs-built_in">cd</span> simple-mind-map
@@ -38,48 +98,6 @@ npm run buildDoc
 npm run build
 </code></pre>
 <p>The <code>index.html</code> file will be automatically moved to the root directory.</p>
-<h2>Installation</h2>
-<blockquote>
-<p>Things to note before version 0.2.0:</p>
-</blockquote>
-<pre class="hljs"><code>npm i simple-mind-map
-</code></pre>
-<p><code>0.2.0</code> Notes for previous versions:</p>
-<blockquote>
-<p>Note: This project is directly published in source code form and has not been
-packaged. If compilation fails, a Vue CLI-created project can add the
-following configuration to the vue.config.js file to allow babel-loader to
-compile this dependency:</p>
-<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
-  <span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">&quot;simple-mind-map&quot;</span>],
-};
-</code></pre>
-<p>Other projects should modify the packaging configuration as needed.</p>
-</blockquote>
-<h2>Usage</h2>
-<blockquote>
-<p>The <code>web</code> directory of this repository provides a complete project based on <code>Vue2</code>. If you encounter any doubts about using it, you can refer to the implementation of this project.</p>
-</blockquote>
-<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
-<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</span>;
-
-<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
-  <span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;mindMapContainer&#x27;</span>),
-  <span class="hljs-attr">data</span>: {
-    <span class="hljs-string">&quot;data&quot;</span>: {
-        <span class="hljs-string">&quot;text&quot;</span>: <span class="hljs-string">&quot;Root Node&quot;</span>
-    },
-    <span class="hljs-string">&quot;children&quot;</span>: []
-  }
-});
-</code></pre>
-<p>The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the <code>babel</code> compilation <code>simple mind-map</code> in your project to prevent some newer <code>js</code> syntax some browsers not supporting it.</p>
-<p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, Then you can find the <code>simpleMindMap.umd.min.js</code> file in the <code>/simple-mind-map/dist/</code> directory, copy it to your project, and then import it into the page:</p>
-<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-</code></pre>
-<p>A global variable <code>window.simpleMindMap</code> will be created.</p>
-<p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
 <h2>Problems</h2>
 <h3>Error when using in Vite, indicating xml-js dependency error</h3>
 <p>Solution: use the following import method:</p>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -1,3 +1,74 @@
-
-        export default [{"lang":"zh","children":[{"path":"associativeLine","title":"AssociativeLine 插件"},{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"},{"path":"markdown","title":"Markdown解析"}]},{"lang":"en","children":[{"path":"associativeLine","title":"AssociativeLine plugin"},{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"},{"path":"markdown","title":"Markdown parse"}]}]
-    
+export default [
+  {
+    lang: 'zh',
+    children: [
+      { path: 'associativeLine', title: 'AssociativeLine 插件' },
+      { path: 'batchExecution', title: 'BatchExecution实例' },
+      { path: 'changelog', title: 'Changelog' },
+      { path: 'command', title: 'Command实例' },
+      { path: 'constructor', title: '构造函数' },
+      { path: 'course1', title: '基本使用' },
+      { path: 'course2', title: '操作节点内容' },
+      { path: 'course3', title: '插入/删除节点、前进回退' },
+      { path: 'course4', title: '设置节点样式' },
+      { path: 'course5', title: '设置基础样式' },
+      { path: 'course6', title: '显示水印' },
+      { path: 'course7', title: '开启节点自由拖拽' },
+      { path: 'course8', title: '开启节点富文本编辑' },
+      { path: 'course9', title: '修改鼠标滚轮的行为' },
+      { path: 'course10', title: '主题' },
+      { path: 'course11', title: '结构' },
+      { path: 'course12', title: '如何渲染一个大纲' },
+      { path: 'course13', title: '快捷键' },
+      { path: 'course14', title: '如何渲染一个小地图' },
+      { path: 'course15', title: '如何渲染一个右键菜单' },
+      { path: 'course16', title: '如何渲染富文本的悬浮工具栏' },
+      { path: 'course17', title: '导入和导出' },
+      { path: 'course18', title: '如何持久化数据' },
+      { path: 'doExport', title: 'Export 插件' },
+      { path: 'drag', title: 'Drag插件' },
+      { path: 'introduction', title: '简介' },
+      { path: 'keyCommand', title: 'KeyCommand实例' },
+      { path: 'keyboardNavigation', title: 'KeyboardNavigation插件' },
+      { path: 'markdown', title: 'Markdown解析' },
+      { path: 'miniMap', title: 'MiniMap插件' },
+      { path: 'node', title: 'Node实例' },
+      { path: 'render', title: 'Render实例' },
+      { path: 'richText', title: 'RichText插件' },
+      { path: 'select', title: 'Select 插件 ' },
+      { path: 'start', title: '开始' },
+      { path: 'translate', title: '参与翻译' },
+      { path: 'utils', title: '内置工具方法' },
+      { path: 'view', title: 'View实例' },
+      { path: 'watermark', title: 'Watermark插件' },
+      { path: 'xmind', title: 'XMind解析' }
+    ]
+  },
+  {
+    lang: 'en',
+    children: [
+      { path: 'associativeLine', title: 'AssociativeLine plugin' },
+      { path: 'batchExecution', title: 'batchExecution instance' },
+      { path: 'changelog', title: 'Changelog' },
+      { path: 'command', title: 'command instance' },
+      { path: 'constructor', title: 'Constructor' },
+      { path: 'doExport', title: 'Export plugin' },
+      { path: 'drag', title: 'Drag plugin' },
+      { path: 'introduction', title: 'Introduction' },
+      { path: 'keyCommand', title: 'KeyCommand instance' },
+      { path: 'keyboardNavigation', title: 'KeyboardNavigation plugin' },
+      { path: 'markdown', title: 'Markdown parse' },
+      { path: 'miniMap', title: 'MiniMap plugin' },
+      { path: 'node', title: 'Node instance' },
+      { path: 'render', title: 'Render instance' },
+      { path: 'richText', title: 'RichText plugin' },
+      { path: 'select', title: 'Select plugin' },
+      { path: 'start', title: 'Start' },
+      { path: 'translate', title: 'Participate in translation' },
+      { path: 'utils', title: 'Utility Methods' },
+      { path: 'view', title: 'View instance' },
+      { path: 'watermark', title: 'Watermark plugin' },
+      { path: 'xmind', title: 'XMind parse' }
+    ]
+  }
+]
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,33 @@
 # Changelog

+## 0.5.4
+
+新增：1.添加新主题。
+
+## 0.5.3
+
+修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。
+
+新增：1.支持设置初始中心节点的位置。
+
+### 0.5.3-fix.1
+
+修复：1.修复设置初始中心节点的位置不生效的问题。
+
+### 0.5.3-fix.2
+
+修复：1.修复导出为图片时，节点中的图片显示不出来的问题。
+
+## 0.5.2
+
+修复：1.导出的`json`数据中去除`uid`；2.重新渲染时清空节点缓存池。
+
+## 0.5.1
+
+优化：1.只有当鼠标在画布内才响应快捷键事件。
+
+修复：1.修复快速操作时节点位置不正确的问题。
+
 ## 0.5.0

 这个版本主要是代码层面的改动和优化，核心是为了提升渲染性能，减少卡顿问题。
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,20 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.5.4</h2>
+<p>新增：1.添加新主题。</p>
+<h2>0.5.3</h2>
+<p>修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。</p>
+<p>新增：1.支持设置初始中心节点的位置。</p>
+<h3>0.5.3-fix.1</h3>
+<p>修复：1.修复设置初始中心节点的位置不生效的问题。</p>
+<h3>0.5.3-fix.2</h3>
+<p>修复：1.修复导出为图片时，节点中的图片显示不出来的问题。</p>
+<h2>0.5.2</h2>
+<p>修复：1.导出的<code>json</code>数据中去除<code>uid</code>；2.重新渲染时清空节点缓存池。</p>
+<h2>0.5.1</h2>
+<p>优化：1.只有当鼠标在画布内才响应快捷键事件。</p>
+<p>修复：1.修复快速操作时节点位置不正确的问题。</p>
 <h2>0.5.0</h2>
 <p>这个版本主要是代码层面的改动和优化，核心是为了提升渲染性能，减少卡顿问题。</p>
 <p>新增：1.支持自定义展开收起节点图标和颜色；</p>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -27,7 +27,7 @@ const mindMap = new MindMap({
 | el                               | Element |                  | 容器元素，必须为DOM元素                                      | 是       |
 | data                             | Object  | {}               | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) |          |
 | layout                           | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） |          |
-| theme                            | String  | default          | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） |          |
+| theme                            | String  | default          | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金） |          |
 | themeConfig                      | Object  | {}               | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) |          |
 | scaleRatio                       | Number  | 0.1              | 放大缩小的增量比例                                           |          |
 | maxTag                           | Number  | 5                | 节点里最多显示的标签数量，多余的会被丢弃                     |          |
@@ -48,6 +48,10 @@ const mindMap = new MindMap({
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | 默认插入的二级以下节点的文字               |          |
 | expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | 展开收起按钮的颜色  |          |
 | expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | 自定义展开收起按钮的图标，可以传图标的svg字符串  |          |
+| enableShortcutOnlyWhenMouseInSvg（v0.5.1+）     | Boolean  | true | 是否只有当鼠标在画布内才响应快捷键事件  |          |
+| enableNodeTransitionMove（v0.5.1+）     | Boolean  | true | 是否开启节点动画过渡  |          |
+| nodeTransitionMoveDuration（v0.5.1+）     | Number  | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms  |          |
+| initRootNodePosition（v0.5.3+）     | Array  | null | 初始根节点的位置，可传一个数组，默认为`['center', 'center']`，代表根节点处于画布中心位置，除了`center`，关键词还可以设置`left`、`top`、`right`、`bottom`，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如`['40%', '60%']`，代表水平位置在画布宽度的`40%`的位置，垂直位置在画布高度的`60%`的位置  |          |

 ### 水印配置

@@ -197,6 +201,8 @@ mindMap.setTheme('主题名称')
 | node_dragging（v0.4.5+）    | 当某个节点被拖拽时触发   |  node（当前被拖拽的节点）           |
 | node_dragend（v0.4.5+）    | 节点被拖拽结束时触发   |             |
 | associative_line_click（v0.4.5+）    |  点击某条关联线时触发  |  path（连接线节点）、clickPath（不可见的点击线节点）、node（起始节点）、toNode（目标节点）           |
+| svg_mouseenter（v0.5.1+）    | 鼠标移入svg画布时触发   | e（事件对象）  |
+| svg_mouseleave（v0.5.1+）    | 鼠标移出svg画布时触发   | e（事件对象）  |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -53,7 +53,7 @@
 <td>theme</td>
 <td>String</td>
 <td>default</td>
-<td>主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）</td>
+<td>主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金）</td>
 <td></td>
 </tr>
 <tr>
@@ -196,6 +196,34 @@
 <td>自定义展开收起按钮的图标，可以传图标的svg字符串</td>
 <td></td>
 </tr>
+<tr>
+<td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否只有当鼠标在画布内才响应快捷键事件</td>
+<td></td>
+</tr>
+<tr>
+<td>enableNodeTransitionMove（v0.5.1+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否开启节点动画过渡</td>
+<td></td>
+</tr>
+<tr>
+<td>nodeTransitionMoveDuration（v0.5.1+）</td>
+<td>Number</td>
+<td>300</td>
+<td>如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms</td>
+<td></td>
+</tr>
+<tr>
+<td>initRootNodePosition（v0.5.3+）</td>
+<td>Array</td>
+<td>null</td>
+<td>初始根节点的位置，可传一个数组，默认为<code>['center', 'center']</code>，代表根节点处于画布中心位置，除了<code>center</code>，关键词还可以设置<code>left</code>、<code>top</code>、<code>right</code>、<code>bottom</code>，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如<code>['40%', '60%']</code>，代表水平位置在画布宽度的<code>40%</code>的位置，垂直位置在画布高度的<code>60%</code>的位置</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
@@ -483,6 +511,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>点击某条关联线时触发</td>
 <td>path（连接线节点）、clickPath（不可见的点击线节点）、node（起始节点）、toNode（目标节点）</td>
 </tr>
+<tr>
+<td>svg_mouseenter（v0.5.1+）</td>
+<td>鼠标移入svg画布时触发</td>
+<td>e（事件对象）</td>
+</tr>
+<tr>
+<td>svg_mouseleave（v0.5.1+）</td>
+<td>鼠标移出svg画布时触发</td>
+<td>e（事件对象）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/zh/course1/index.md
+++ b/web/src/pages/Doc/zh/course1/index.md
@@ -0,0 +1,64 @@
+# 基本使用
+
+> 重要说明：
+>
+> 1.本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过`npm`方式使用的话，需要自己手动注册相关插件。
+>
+> 2.本教程的代码示例基于Vue3.x，但是您不必担心，因为simple-mind-map本身是框架无关的，所以即使某些Vue3的语法您看不懂也不会影响对于逻辑的理解。
+
+`simple-mind-map`的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNptUktu2zAQvcqARWG7sCUV6EqVjX7QRRc+QacLVZzYLKQRQdJxAkObLHuKXiMXanOMDEXZCJIIECS+mff4+Dgn9dna7PpAqlSVb5yxATyFg90gm872LsAJHF0toedtf+BAGga4cn0HM2HNLl1bw3pb21RC5QVuadUJuupqiwoZ+SIxny9gvYETMkDTsw8QGyN9DUzHs9h8bACgtgTdN4eOOGQ7Ct9air9fbr/r+Wxifu051IbJzRbLxNJ1qMu0R3xQRQDVEyjBgW5ChFH9+3v/8Ofu/919tJvKwyQWG5u9abUjjs0/fiZ8iJ9h8RF5WCBXeYpQwpNFIMmgDiQrgEqbazB6jeq5YVSbKpeqtFX5E44sfbhtE/3TFDOqLE/ZThll5Lus8R6VeBCX8r55vsP5xEejw76E90XxdmwG2JPZ7UMJH4rC3oyYHOh1jXdnla52O8MlFJOGrbU2vDsDIiAxjMbVUiXbcQSy375nmbJRBaeC2L7cByoZqHQRWS6/mZNZMR3FE65+uf7oyYkIqulKXhmyxH2ZT2RN3gY1PAJQKfo9" />
+
+注意，我们还给容器元素设置了样式：
+
+```css
+#mindMapContainer * {
+    margin: 0;
+    padding: 0;
+}
+```
+
+这是为了避免节点内的文字因为默认样式而出现偏移。
+
+一个节点的基本数据结构如下所示：
+
+```js
+{
+    data: {
+        // 节点文本
+        text: '根节点',
+        // 图片
+        image: 'xxx.jpg',
+        imageTitle: '图片名称',
+        imageSize: {
+            width: 1152,
+            height: 1152
+        },
+        // 图标
+        icon: ['priority_1'],
+        // 标签
+        tag: ['标签1', '标签2'],
+        // 链接
+        hyperlink: 'http://lxqnsys.com/',
+        hyperlinkTitle: '理想青年实验室',
+        // 备注内容
+        note: '理想青年实验室\n一个有意思的角落',
+        // 概要
+        generalization: {
+            text: '概要的内容'
+        },
+        // 节点是否展开
+        expand: true,
+    },
+    children: []// 子节点
+}
+```
+
+`icon`目前只能使用内置的图标，完整图标可以在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件中查看。
+
+创建实例时还支持传递其他很多选项参数，完整选项列表可以在[实例化选项](https://wanglin2.github.io/mind-map/#/doc/zh/constructor/%E5%AE%9E%E4%BE%8B%E5%8C%96%E9%80%89%E9%A1%B9)查看。
+
+这样得到的思维导图可以通过鼠标和快捷键进行操作，比如单击某个节点可以激活它，双击某个节点可以编辑节点文本，按下`Tab`键会给当前激活的节点添加一个子节点，按下`Enter`键会给当前激活的节点添加一个兄弟节点等等，完整的快捷键列表可以参考[快捷键列表](https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js#L246)。
+
+当然有些功能还是需要UI界面的，比如图标列表、编辑超链接等等，需要注意的是`simple-mind-map`库并不包含UI界面，所以需要你自己开发，然后通过`simple-mind-map`提供的相关API来操作，本教程的其他章节会向你介绍如何使用。
--- a/web/src/pages/Doc/zh/course1/index.vue
+++ b/web/src/pages/Doc/zh/course1/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <h1>基本使用</h1>
+<blockquote>
+<p>重要说明：</p>
+<p>1.本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过<code>npm</code>方式使用的话，需要自己手动注册相关插件。</p>
+<p>2.本教程的代码示例基于Vue3.x，但是您不必担心，因为simple-mind-map本身是框架无关的，所以即使某些Vue3的语法您看不懂也不会影响对于逻辑的理解。</p>
+</blockquote>
+<p><code>simple-mind-map</code>的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：</p>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNptUktu2zAQvcqARWG7sCUV6EqVjX7QRRc+QacLVZzYLKQRQdJxAkObLHuKXiMXanOMDEXZCJIIECS+mff4+Dgn9dna7PpAqlSVb5yxATyFg90gm872LsAJHF0toedtf+BAGga4cn0HM2HNLl1bw3pb21RC5QVuadUJuupqiwoZ+SIxny9gvYETMkDTsw8QGyN9DUzHs9h8bACgtgTdN4eOOGQ7Ct9air9fbr/r+Wxifu051IbJzRbLxNJ1qMu0R3xQRQDVEyjBgW5ChFH9+3v/8Ofu/919tJvKwyQWG5u9abUjjs0/fiZ8iJ9h8RF5WCBXeYpQwpNFIMmgDiQrgEqbazB6jeq5YVSbKpeqtFX5E44sfbhtE/3TFDOqLE/ZThll5Lus8R6VeBCX8r55vsP5xEejw76E90XxdmwG2JPZ7UMJH4rC3oyYHOh1jXdnla52O8MlFJOGrbU2vDsDIiAxjMbVUiXbcQSy375nmbJRBaeC2L7cByoZqHQRWS6/mZNZMR3FE65+uf7oyYkIqulKXhmyxH2ZT2RN3gY1PAJQKfo9" />
+<p>注意，我们还给容器元素设置了样式：</p>
+<pre class="hljs"><code><span class="hljs-selector-id">#mindMapContainer</span> * {
+    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
+    <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
+}
+</code></pre>
+<p>这是为了避免节点内的文字因为默认样式而出现偏移。</p>
+<p>一个节点的基本数据结构如下所示：</p>
+<pre class="hljs"><code>{
+    <span class="hljs-attr">data</span>: {
+        <span class="hljs-comment">// 节点文本</span>
+        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;根节点&#x27;</span>,
+        <span class="hljs-comment">// 图片</span>
+        <span class="hljs-attr">image</span>: <span class="hljs-string">&#x27;xxx.jpg&#x27;</span>,
+        <span class="hljs-attr">imageTitle</span>: <span class="hljs-string">&#x27;图片名称&#x27;</span>,
+        <span class="hljs-attr">imageSize</span>: {
+            <span class="hljs-attr">width</span>: <span class="hljs-number">1152</span>,
+            <span class="hljs-attr">height</span>: <span class="hljs-number">1152</span>
+        },
+        <span class="hljs-comment">// 图标</span>
+        <span class="hljs-attr">icon</span>: [<span class="hljs-string">&#x27;priority_1&#x27;</span>],
+        <span class="hljs-comment">// 标签</span>
+        <span class="hljs-attr">tag</span>: [<span class="hljs-string">&#x27;标签1&#x27;</span>, <span class="hljs-string">&#x27;标签2&#x27;</span>],
+        <span class="hljs-comment">// 链接</span>
+        <span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;http://lxqnsys.com/&#x27;</span>,
+        <span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;理想青年实验室&#x27;</span>,
+        <span class="hljs-comment">// 备注内容</span>
+        <span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;理想青年实验室\n一个有意思的角落&#x27;</span>,
+        <span class="hljs-comment">// 概要</span>
+        <span class="hljs-attr">generalization</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;概要的内容&#x27;</span>
+        },
+        <span class="hljs-comment">// 节点是否展开</span>
+        <span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>,
+    },
+    <span class="hljs-attr">children</span>: []<span class="hljs-comment">// 子节点</span>
+}
+</code></pre>
+<p><code>icon</code>目前只能使用内置的图标，完整图标可以在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件中查看。</p>
+<p>创建实例时还支持传递其他很多选项参数，完整选项列表可以在<a href="https://wanglin2.github.io/mind-map/#/doc/zh/constructor/%E5%AE%9E%E4%BE%8B%E5%8C%96%E9%80%89%E9%A1%B9">实例化选项</a>查看。</p>
+<p>这样得到的思维导图可以通过鼠标和快捷键进行操作，比如单击某个节点可以激活它，双击某个节点可以编辑节点文本，按下<code>Tab</code>键会给当前激活的节点添加一个子节点，按下<code>Enter</code>键会给当前激活的节点添加一个兄弟节点等等，完整的快捷键列表可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js#L246">快捷键列表</a>。</p>
+<p>当然有些功能还是需要UI界面的，比如图标列表、编辑超链接等等，需要注意的是<code>simple-mind-map</code>库并不包含UI界面，所以需要你自己开发，然后通过<code>simple-mind-map</code>提供的相关API来操作，本教程的其他章节会向你介绍如何使用。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course10/index.md
+++ b/web/src/pages/Doc/zh/course10/index.md
@@ -0,0 +1,114 @@
+# 主题
+
+## 使用和切换主题
+
+`simple-mind-map`内置了很多主题，可以通过如下方式获取到所有的内置主题列表：
+
+```js
+import { themeList } from 'simple-mind-map/src/utils/constant'
+```
+
+可以在实例化`simple-mind-map`时指定使用的主题：
+
+```js
+new MindMap({
+    theme: 'minions'
+})
+```
+
+如果想动态切换主题也很简单：
+
+```js
+mindMap.setTheme('classic')
+```
+
+如果要获取当前使用的主题名称可以使用：
+
+```js
+const theme = mindMap.getTheme()
+```
+
+## 定义新主题
+
+除了可以使用内置的主题外，你也可以自定义新主题：
+
+```js
+import MindMap from 'simple-mind-map'
+
+// 注册新主题
+MindMap.defineTheme('主题名称', {
+    // 主题配置
+})
+
+// 1.实例化时使用新注册的主题
+const mindMap = new MindMap({
+    theme: '主题名称'
+})
+
+// 2.动态切换新主题
+mindMap.setTheme('主题名称')
+```
+
+最好在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题。
+
+一个主题其实就是一个普通的对象，完整配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)，`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。
+
+```js
+MindMap.defineTheme('redSpirit', {
+    // 背景颜色
+    backgroundColor: 'rgb(255, 238, 228)',
+    // 连线的颜色
+    lineColor: 'rgb(230, 138, 131)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(222, 101, 85)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(207, 44, 44)',
+      color: 'rgb(255, 233, 157)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      active: {
+        borderColor: 'rgb(255, 233, 157)',
+        borderWidth: 3,
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(255, 255, 255)',
+      color: 'rgb(211, 58, 21)',
+      borderColor: 'rgb(222, 101, 85)',
+      borderWidth: 2,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(255, 233, 157)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(144, 71, 43)',
+      active: {
+        borderColor: 'rgb(255, 233, 157)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(255, 247, 211)',
+      borderColor: 'rgb(255, 202, 162)',
+      borderWidth: 2,
+      color: 'rgb(187, 101, 69)',
+      active: {
+        borderColor: 'rgb(222, 101, 85)'
+      }
+    }
+})
+```
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV+tvG0UQ/1dWh9A5yDk/0wTjVIXCB6QGoRaJD7kIne/W9rbn3eN2nUcjSxBQadpUBYEoL6ESiZIPSKCCSh5U+Wf8SP8LZm/vZfuSlqpSP/ixszO/mf3N7Nzcpvam5xmrXazVtDq3feIJxLHoeudNSjoe8wXaRD5u5hGjS6xLBXbyiLct12Vrl3ET9VDTZx2kA4IeWywR6ixZntoyNQ5iF892QDrbsTxTMylCJnWxQFImNRcR7bqukhcKaPD468H2neHxJ8O/j0Y/fH5ya2u0dTC4ee/klz2T2oxygSxbkFX8HnMwB+skotzyyoxJFcrNL4Z3dvv7R092v4vM7LZFW/iDNu5gMMvNoMXzaFP6DSMx4PDBbk63XYtzYusA1wsRh3/tDW7sDA4e9R8fj77ZG3775zi6g5uEZqGHjBgphZzuY+eKR3wi9LzSQgh8nHy2M/z+jye7P51sP1TChmVfa/lAvnORucyvId1vNXLlubk8KlcW4Ku8MKPnE4Djn0eHx0BbGsMFt2PWlWIelaR1qVKKraXWh8QR7RqqJIDDB1snDz6NYUcP742ObqjdFqbYt1xy3RKE0UvPYp6Oatp8LMZyGcIrlvJoYS59wOH9A1URw/v/DP69q+Q+Y6IW0YhQk7juGFZxPo+qVfmJoRCyp/msgMu5+ZROg/kO9iOsSXl43GIsbjIqrpDruIbK1VioijUV3iTsWQFMuIqYRQiqMvhJmOkf7owOf5smh2OoT+csegLf4ddpBJUgE3Oy3pKCyTxHVtomDlHO4Ku08GL4yqBlfxtoGdy91T/6tb9/e5ofCm0kzU4SU5LDNBUlWUnzcMJqJeX4eaI+Pejw2kzFOn5nnhZ1dqKrcBkgnWenMdAsylyeKz89j2P0LAB+UAHnXv/f/IxVzyQ90IdFDxpyVr9O2mnUseNHVm660ctHDl6LGnMujAm7NeQwu9vBVBgtLN5xAZqKtzbedXJ6aHkReLagVfn6THg0xxJW6limJgWmNnZSKRZ4XUixqcUtTD0M06mXinabuI6PqVReTjAm4DK9THpKt4TE2bjDDKcryV5a7yVFEP0NZZEdoURchr4vp4D3GSfqQizrLm7KZ6puQ+ogTSuhupB1AmUGeQRFHhRXb+YNNXUEd27041eDL38P71wwffQPb/ePHqULjtGcLvvFR6qcwU9OLvNBE7lEuEhKLSr5YEoxVi23K8eCSE+5h1KFT72gZi+YumAhMAxMlsCwQqjukFUUzCKLphYG8TbuMFMLtkMF4iS7cYGCSr0Au2nFCEkw5jYsqaI2TVFvdIVgFF2wXWJfA5XUrARq6WmqXlC6oS1AT9qmBh2wPW1umsBJgo3+1QspLmDJxYaraLkQzpqmZhTUgBnNWJh3DJtzU4sza6RoizKzphpYqVh8NdBDyIsryMfgEfIWbATFJz+vTNIbQSWGVoMztyuUIYxTUIcwG4QrwbxkMe2+jUmrDerVYtFbjzxn+30t8tyx/BYBvxGqZzkOoa1IEIduhNl+xohLUQRh0PEaAKFSgxxoeU1lQI70xlXOKLxBBPBmuAEZiDuDqcELgmoHRgH+Gj70ZdLBMlmzDZ+tcewDiKmFVzXjpUHatoXweK1QcNc/pnyDG4zzWZvONjC5Csc24Km40aU2N2zWKUCZY8EzakO6CQ/T03r/AbfdVt0=" />
--- a/web/src/pages/Doc/zh/course10/index.vue
+++ b/web/src/pages/Doc/zh/course10/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <h1>主题</h1>
+<h2>使用和切换主题</h2>
+<p><code>simple-mind-map</code>内置了很多主题，可以通过如下方式获取到所有的内置主题列表：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { themeList } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/constant&#x27;</span>
+</code></pre>
+<p>可以在实例化<code>simple-mind-map</code>时指定使用的主题：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-attr">theme</span>: <span class="hljs-string">&#x27;minions&#x27;</span>
+})
+</code></pre>
+<p>如果想动态切换主题也很简单：</p>
+<pre class="hljs"><code>mindMap.setTheme(<span class="hljs-string">&#x27;classic&#x27;</span>)
+</code></pre>
+<p>如果要获取当前使用的主题名称可以使用：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> theme = mindMap.getTheme()
+</code></pre>
+<h2>定义新主题</h2>
+<p>除了可以使用内置的主题外，你也可以自定义新主题：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+
+<span class="hljs-comment">// 注册新主题</span>
+MindMap.defineTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>, {
+    <span class="hljs-comment">// 主题配置</span>
+})
+
+<span class="hljs-comment">// 1.实例化时使用新注册的主题</span>
+<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-attr">theme</span>: <span class="hljs-string">&#x27;主题名称&#x27;</span>
+})
+
+<span class="hljs-comment">// 2.动态切换新主题</span>
+mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
+</code></pre>
+<p>最好在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题。</p>
+<p>一个主题其实就是一个普通的对象，完整配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">默认主题</a>，<code>defineTheme</code>方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>。</p>
+<pre class="hljs"><code>MindMap.defineTheme(<span class="hljs-string">&#x27;redSpirit&#x27;</span>, {
+    <span class="hljs-comment">// 背景颜色</span>
+    <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">&#x27;rgb(255, 238, 228)&#x27;</span>,
+    <span class="hljs-comment">// 连线的颜色</span>
+    <span class="hljs-attr">lineColor</span>: <span class="hljs-string">&#x27;rgb(230, 138, 131)&#x27;</span>,
+    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">3</span>,
+    <span class="hljs-comment">// 概要连线的粗细</span>
+    <span class="hljs-attr">generalizationLineWidth</span>: <span class="hljs-number">3</span>,
+    <span class="hljs-comment">// 概要连线的颜色</span>
+    <span class="hljs-attr">generalizationLineColor</span>: <span class="hljs-string">&#x27;rgb(222, 101, 85)&#x27;</span>,
+    <span class="hljs-comment">// 根节点样式</span>
+    <span class="hljs-attr">root</span>: {
+      <span class="hljs-attr">fillColor</span>: <span class="hljs-string">&#x27;rgb(207, 44, 44)&#x27;</span>,
+      <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;rgb(255, 233, 157)&#x27;</span>,
+      <span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;&#x27;</span>,
+      <span class="hljs-attr">borderWidth</span>: <span class="hljs-number">0</span>,
+      <span class="hljs-attr">fontSize</span>: <span class="hljs-number">24</span>,
+      <span class="hljs-attr">active</span>: {
+        <span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;rgb(255, 233, 157)&#x27;</span>,
+        <span class="hljs-attr">borderWidth</span>: <span class="hljs-number">3</span>,
+      }
+    },
+    <span class="hljs-comment">// 二级节点样式</span>
+    <span class="hljs-attr">second</span>: {
+      <span class="hljs-attr">fillColor</span>: <span class="hljs-string">&#x27;rgb(255, 255, 255)&#x27;</span>,
+      <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;rgb(211, 58, 21)&#x27;</span>,
+      <span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;rgb(222, 101, 85)&#x27;</span>,
+      <span class="hljs-attr">borderWidth</span>: <span class="hljs-number">2</span>,
+      <span class="hljs-attr">fontSize</span>: <span class="hljs-number">18</span>,
+      <span class="hljs-attr">active</span>: {
+        <span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;rgb(255, 233, 157)&#x27;</span>,
+      }
+    },
+    <span class="hljs-comment">// 三级及以下节点样式</span>
+    <span class="hljs-attr">node</span>: {
+      <span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
+      <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;rgb(144, 71, 43)&#x27;</span>,
+      <span class="hljs-attr">active</span>: {
+        <span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;rgb(255, 233, 157)&#x27;</span>
+      }
+    },
+    <span class="hljs-comment">// 概要节点样式</span>
+    <span class="hljs-attr">generalization</span>: {
+      <span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
+      <span class="hljs-attr">fillColor</span>: <span class="hljs-string">&#x27;rgb(255, 247, 211)&#x27;</span>,
+      <span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;rgb(255, 202, 162)&#x27;</span>,
+      <span class="hljs-attr">borderWidth</span>: <span class="hljs-number">2</span>,
+      <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;rgb(187, 101, 69)&#x27;</span>,
+      <span class="hljs-attr">active</span>: {
+        <span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;rgb(222, 101, 85)&#x27;</span>
+      }
+    }
+})
+</code></pre>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV+tvG0UQ/1dWh9A5yDk/0wTjVIXCB6QGoRaJD7kIne/W9rbn3eN2nUcjSxBQadpUBYEoL6ESiZIPSKCCSh5U+Wf8SP8LZm/vZfuSlqpSP/ixszO/mf3N7Nzcpvam5xmrXazVtDq3feIJxLHoeudNSjoe8wXaRD5u5hGjS6xLBXbyiLct12Vrl3ET9VDTZx2kA4IeWywR6ixZntoyNQ5iF892QDrbsTxTMylCJnWxQFImNRcR7bqukhcKaPD468H2neHxJ8O/j0Y/fH5ya2u0dTC4ee/klz2T2oxygSxbkFX8HnMwB+skotzyyoxJFcrNL4Z3dvv7R092v4vM7LZFW/iDNu5gMMvNoMXzaFP6DSMx4PDBbk63XYtzYusA1wsRh3/tDW7sDA4e9R8fj77ZG3775zi6g5uEZqGHjBgphZzuY+eKR3wi9LzSQgh8nHy2M/z+jye7P51sP1TChmVfa/lAvnORucyvId1vNXLlubk8KlcW4Ku8MKPnE4Djn0eHx0BbGsMFt2PWlWIelaR1qVKKraXWh8QR7RqqJIDDB1snDz6NYUcP742ObqjdFqbYt1xy3RKE0UvPYp6Oatp8LMZyGcIrlvJoYS59wOH9A1URw/v/DP69q+Q+Y6IW0YhQk7juGFZxPo+qVfmJoRCyp/msgMu5+ZROg/kO9iOsSXl43GIsbjIqrpDruIbK1VioijUV3iTsWQFMuIqYRQiqMvhJmOkf7owOf5smh2OoT+csegLf4ddpBJUgE3Oy3pKCyTxHVtomDlHO4Ku08GL4yqBlfxtoGdy91T/6tb9/e5ofCm0kzU4SU5LDNBUlWUnzcMJqJeX4eaI+Pejw2kzFOn5nnhZ1dqKrcBkgnWenMdAsylyeKz89j2P0LAB+UAHnXv/f/IxVzyQ90IdFDxpyVr9O2mnUseNHVm660ctHDl6LGnMujAm7NeQwu9vBVBgtLN5xAZqKtzbedXJ6aHkReLagVfn6THg0xxJW6limJgWmNnZSKRZ4XUixqcUtTD0M06mXinabuI6PqVReTjAm4DK9THpKt4TE2bjDDKcryV5a7yVFEP0NZZEdoURchr4vp4D3GSfqQizrLm7KZ6puQ+ogTSuhupB1AmUGeQRFHhRXb+YNNXUEd27041eDL38P71wwffQPb/ePHqULjtGcLvvFR6qcwU9OLvNBE7lEuEhKLSr5YEoxVi23K8eCSE+5h1KFT72gZi+YumAhMAxMlsCwQqjukFUUzCKLphYG8TbuMFMLtkMF4iS7cYGCSr0Au2nFCEkw5jYsqaI2TVFvdIVgFF2wXWJfA5XUrARq6WmqXlC6oS1AT9qmBh2wPW1umsBJgo3+1QspLmDJxYaraLkQzpqmZhTUgBnNWJh3DJtzU4sza6RoizKzphpYqVh8NdBDyIsryMfgEfIWbATFJz+vTNIbQSWGVoMztyuUIYxTUIcwG4QrwbxkMe2+jUmrDerVYtFbjzxn+30t8tyx/BYBvxGqZzkOoa1IEIduhNl+xohLUQRh0PEaAKFSgxxoeU1lQI70xlXOKLxBBPBmuAEZiDuDqcELgmoHRgH+Gj70ZdLBMlmzDZ+tcewDiKmFVzXjpUHatoXweK1QcNc/pnyDG4zzWZvONjC5Csc24Km40aU2N2zWKUCZY8EzakO6CQ/T03r/AbfdVt0=" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course11/index.md
+++ b/web/src/pages/Doc/zh/course11/index.md
@@ -0,0 +1,28 @@
+# 结构
+
+`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）。
+
+可以在实例化`simple-mind-map`时通过选项指定使用的结构：
+
+```js
+new MindMap({
+    // ...
+    layout: 'logicalStructure'
+})
+```
+
+也可以动态切换结构：
+
+```js
+mindMap.setLayout('organizationStructure')
+```
+
+获取当前使用的结构可以使用`getLayout`方法：
+
+```js
+const layout = mindMap.getLayout()
+```
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVVtrFDEU/iuHiMxWtrNb8Gndlnp7EFqR+tgUSWfS3WgmGSaZXiwLUgrWS0Hpg6Ag6os++ChCW8Q/0+72Z3iymZkd2z745sIsk3P5vpOc72S2yc00DddzTjqka6JMpBYMt3k6R5VIUp1Z2IaMrzVBq0WdK8vjJpg+k1JvLPE1GMBaphMIECGoMhaFihdZ6l2UGDRLPp2gdTphKSVUAVAluQVnc5GzoHIpvb3VgtNfB6cv9oe/nw1/HI/e75693BntHJ7uvTv7/I2qSCtjgUVWrPP7OuYGsycVNZZXpqjyKHvPh/tfRscHw4+7ZVrUZ6rHF7aYzi3mNaZgdg62HXFRSoi7X2Bb6G4EOusxJZ4yK7R6aLM8snnGA4QfOIbqQBoXUdyG+EZ5EI2xC4DLDsQ6yhOubNjj9q7k7vXW1r24ERSZt7WyTCieBVNNnxUzyzoe3f0ocQZKaiZvtnzTOjMlw0+H/sj8UbvfoABzgVFfyDjjygUvTzDOwV3Kcp7p5Oj16OjrebK/CS8hXZn46nH/qYLytbCVeUIJu6S1dRp7oI1wKsDMQPI1GzQhiLB12KaVIlyORdOBQOqeiJicCMb5B1M3vLoBUJmjD29P33z3RXuVnxy9Ojn+WdehVo1AIfUjr3RkbLhlE9z/gjB2IjqoT0O4zmTOnQCLOE+PosWn2/IzjtONC8txMJnluALoxmIdIsmMmaWkKOIOTzQlY3cRIOKJt5IqhnRb6K0HlkhWa7nKXIh3Uttdza3VCuYjKaInGFKfSYyrj2235YNL5IqlfOu2apvApbFb0u9nvriMKAlb/gYqpjHkJgkjYyipWhLW9lse6YaIbb8DM+321XEcQFqJIOPIiAc+doz1454r58+lhJokslWjZW59ImoGpdSBdrGyOp0sLtL3uej1Mfx6u51ulsyX814rmROW9QTylqgpi2OheqWhKj0s2vSPFc+UFRRFV2sERImNe0CaxHfA3fnhY6MVfmLG8LRwYAeq4aYEvyB+osMWvoYZXq0i4a5Z06uZ3jA8QxBKimm75Kvicy+22mUVtQ3I4A+xm1Zg" />
--- a/web/src/pages/Doc/zh/course11/index.vue
+++ b/web/src/pages/Doc/zh/course11/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>结构</h1>
+<p><code>simple-mind-map</code>目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）。</p>
+<p>可以在实例化<code>simple-mind-map</code>时通过选项指定使用的结构：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-attr">layout</span>: <span class="hljs-string">&#x27;logicalStructure&#x27;</span>
+})
+</code></pre>
+<p>也可以动态切换结构：</p>
+<pre class="hljs"><code>mindMap.setLayout(<span class="hljs-string">&#x27;organizationStructure&#x27;</span>)
+</code></pre>
+<p>获取当前使用的结构可以使用<code>getLayout</code>方法：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> layout = mindMap.getLayout()
+</code></pre>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVVtrFDEU/iuHiMxWtrNb8Gndlnp7EFqR+tgUSWfS3WgmGSaZXiwLUgrWS0Hpg6Ag6os++ChCW8Q/0+72Z3iymZkd2z745sIsk3P5vpOc72S2yc00DddzTjqka6JMpBYMt3k6R5VIUp1Z2IaMrzVBq0WdK8vjJpg+k1JvLPE1GMBaphMIECGoMhaFihdZ6l2UGDRLPp2gdTphKSVUAVAluQVnc5GzoHIpvb3VgtNfB6cv9oe/nw1/HI/e75693BntHJ7uvTv7/I2qSCtjgUVWrPP7OuYGsycVNZZXpqjyKHvPh/tfRscHw4+7ZVrUZ6rHF7aYzi3mNaZgdg62HXFRSoi7X2Bb6G4EOusxJZ4yK7R6aLM8snnGA4QfOIbqQBoXUdyG+EZ5EI2xC4DLDsQ6yhOubNjj9q7k7vXW1r24ERSZt7WyTCieBVNNnxUzyzoe3f0ocQZKaiZvtnzTOjMlw0+H/sj8UbvfoABzgVFfyDjjygUvTzDOwV3Kcp7p5Oj16OjrebK/CS8hXZn46nH/qYLytbCVeUIJu6S1dRp7oI1wKsDMQPI1GzQhiLB12KaVIlyORdOBQOqeiJicCMb5B1M3vLoBUJmjD29P33z3RXuVnxy9Ojn+WdehVo1AIfUjr3RkbLhlE9z/gjB2IjqoT0O4zmTOnQCLOE+PosWn2/IzjtONC8txMJnluALoxmIdIsmMmaWkKOIOTzQlY3cRIOKJt5IqhnRb6K0HlkhWa7nKXIh3Uttdza3VCuYjKaInGFKfSYyrj2235YNL5IqlfOu2apvApbFb0u9nvriMKAlb/gYqpjHkJgkjYyipWhLW9lse6YaIbb8DM+321XEcQFqJIOPIiAc+doz1454r58+lhJokslWjZW59ImoGpdSBdrGyOp0sLtL3uej1Mfx6u51ulsyX814rmROW9QTylqgpi2OheqWhKj0s2vSPFc+UFRRFV2sERImNe0CaxHfA3fnhY6MVfmLG8LRwYAeq4aYEvyB+osMWvoYZXq0i4a5Z06uZ3jA8QxBKimm75Kvicy+22mUVtQ3I4A+xm1Zg" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course12/index.md
+++ b/web/src/pages/Doc/zh/course12/index.md
@@ -0,0 +1,34 @@
+# 如何渲染一个大纲
+
+思维导图本质就是一颗树，所以你可以使用树组件来完成大纲的显示。
+
+可以监听`data_change`事件来获取当前最新的思维导图数据：
+
+```js
+mindMap.on('data_change', (data) => {
+    // data数据是不带节点对象的纯数据
+    // 如果你需要操作节点对象，可以使用mindMap.renderer.renderTree
+    console.log(data, mindMap.renderer.renderTree)
+})
+```
+
+通常点击了大纲的某个节点，会将画布定位到该节点并激活该节点，这可以这么做：
+
+```js
+const node = data._node
+mindMap.renderer.moveNodeToCenter(node)
+node.active()
+```
+
+当在大纲树上编辑了某个节点的内容，需要同步到思维导图树上：
+
+```js
+data._node.setText('xxx')
+```
+
+要插入兄弟节点或子节点可以这么操作：
+
+```js
+mindMap.execCommand('INSERT_NODE', false)
+mindMap.execCommand('INSERT_CHILD_NODE', false)
+```
--- a/web/src/pages/Doc/zh/course12/index.vue
+++ b/web/src/pages/Doc/zh/course12/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>如何渲染一个大纲</h1>
+<p>思维导图本质就是一颗树，所以你可以使用树组件来完成大纲的显示。</p>
+<p>可以监听<code>data_change</code>事件来获取当前最新的思维导图数据：</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;data_change&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> {
+    <span class="hljs-comment">// data数据是不带节点对象的纯数据</span>
+    <span class="hljs-comment">// 如果你需要操作节点对象，可以使用mindMap.renderer.renderTree</span>
+    <span class="hljs-built_in">console</span>.log(data, mindMap.renderer.renderTree)
+})
+</code></pre>
+<p>通常点击了大纲的某个节点，会将画布定位到该节点并激活该节点，这可以这么做：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> node = data._node
+mindMap.renderer.moveNodeToCenter(node)
+node.active()
+</code></pre>
+<p>当在大纲树上编辑了某个节点的内容，需要同步到思维导图树上：</p>
+<pre class="hljs"><code>data._node.setText(<span class="hljs-string">&#x27;xxx&#x27;</span>)
+</code></pre>
+<p>要插入兄弟节点或子节点可以这么操作：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>, <span class="hljs-literal">false</span>)
+mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>)
+</code></pre>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course13/index.md
+++ b/web/src/pages/Doc/zh/course13/index.md
@@ -0,0 +1,131 @@
+# 快捷键
+
+`simple-mind-map`常用操作都支持快捷键方式使用，目前所有的快捷键列表如下：
+
+```js
+[
+  {
+    type: '节点操作',
+    list: [
+      {
+        name: '插入下级节点',
+        value: 'Tab'
+      },
+      {
+        name: '插入同级节点',
+        value: 'Enter'
+      },
+      {
+        name: '上移节点',
+        value: 'Ctrl + ↑'
+      },
+      {
+        name: '下移节点',
+        value: 'Ctrl + ↓'
+      },
+      {
+        name: '插入概要',
+        value: 'Ctrl + S'
+      },
+      {
+        name: '展开/收起节点',
+        value: '/'
+      },
+      {
+        name: '删除节点',
+        value: 'Delete | Backspace'
+      },
+      {
+        name: '复制节点',
+        value: 'Ctrl + C'
+      },
+      {
+        name: '剪切节点',
+        value: 'Ctrl + X'
+      },
+      {
+        name: '粘贴节点',
+        value: 'Ctrl + V'
+      },
+      {
+        name: '编辑节点',
+        value: 'F2'
+      },
+      {
+        name: '文本换行',
+        value: 'Shift + Enter'
+      },
+      {
+        name: '回退',
+        value: 'Ctrl + Z'
+      },
+      {
+        name: '前进',
+        value: 'Ctrl + Y'
+      },
+      {
+        name: '全选',
+        value: 'Ctrl + A'
+      },
+      {
+        name: '多选',
+        value: '右键 / Ctrl + 左键'
+      },
+      {
+        name: '一键整理布局',
+        value: 'Ctrl + L'
+      }
+    ]
+  },
+  {
+    type: '画布操作',
+    list: [
+      {
+        name: '放大',
+        value: 'Ctrl + +'
+      },
+      {
+        name: '缩小',
+        value: 'Ctrl + -'
+      },
+      {
+        name: '恢复默认',
+        value: 'Ctrl + Enter'
+      }
+    ]
+  }
+]
+```
+
+默认当鼠标滑入画布范围内才会响应快捷键操作，如果你想去掉这个限制可以在实例化`simple-mind-map`时通过选项指定：
+
+```js
+new MindMap({
+    // ...
+    enableShortcutOnlyWhenMouseInSvg: false
+})
+```
+
+你也可以添加新的快捷键：
+
+```js
+mindMap.keyCommand.addShortcut('key', () => {
+    // 执行一些操作
+})
+```
+
+`key`支持三种方式：
+
+```
+Enter           // 单个按键
+Tab | Insert    // 或
+Shift + a       // 与
+```
+
+要获取所有的按键值对应的名称，可以：
+
+```js
+import { keyMap } from 'simple-mind-map/src/utils/keyMap'
+```
+
+可以添加当然也可以移除，详细文档可以参考[keyCommand](https://wanglin2.github.io/mind-map/#/doc/zh/keyCommand)。
--- a/web/src/pages/Doc/zh/course13/index.vue
+++ b/web/src/pages/Doc/zh/course13/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <h1>快捷键</h1>
+<p><code>simple-mind-map</code>常用操作都支持快捷键方式使用，目前所有的快捷键列表如下：</p>
+<pre class="hljs"><code>[
+  {
+    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;节点操作&#x27;</span>,
+    <span class="hljs-attr">list</span>: [
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;插入下级节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Tab&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;插入同级节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Enter&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;上移节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + ↑&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;下移节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + ↓&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;插入概要&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + S&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;展开/收起节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;/&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;删除节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Delete | Backspace&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;复制节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + C&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;剪切节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + X&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;粘贴节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + V&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;编辑节点&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;F2&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;文本换行&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Shift + Enter&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;回退&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + Z&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;前进&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + Y&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;全选&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + A&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;多选&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;右键 / Ctrl + 左键&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;一键整理布局&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + L&#x27;</span>
+      }
+    ]
+  },
+  {
+    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;画布操作&#x27;</span>,
+    <span class="hljs-attr">list</span>: [
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;放大&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + +&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;缩小&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + -&#x27;</span>
+      },
+      {
+        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;恢复默认&#x27;</span>,
+        <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + Enter&#x27;</span>
+      }
+    ]
+  }
+]
+</code></pre>
+<p>默认当鼠标滑入画布范围内才会响应快捷键操作，如果你想去掉这个限制可以在实例化<code>simple-mind-map</code>时通过选项指定：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-attr">enableShortcutOnlyWhenMouseInSvg</span>: <span class="hljs-literal">false</span>
+})
+</code></pre>
+<p>你也可以添加新的快捷键：</p>
+<pre class="hljs"><code>mindMap.keyCommand.addShortcut(<span class="hljs-string">&#x27;key&#x27;</span>, <span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-comment">// 执行一些操作</span>
+})
+</code></pre>
+<p><code>key</code>支持三种方式：</p>
+<pre class="hljs"><code>Enter           // 单个按键
+Tab | Insert    // 或
+Shift + a       // 与
+</code></pre>
+<p>要获取所有的按键值对应的名称，可以：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { keyMap } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/keyMap&#x27;</span>
+</code></pre>
+<p>可以添加当然也可以移除，详细文档可以参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/keyCommand">keyCommand</a>。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course14/index.md
+++ b/web/src/pages/Doc/zh/course14/index.md
@@ -0,0 +1,54 @@
+# 如何渲染一个小地图
+
+> 要使用小地图需要注册小地图插件
+
+小地图可以方便看到当前画布可视区域在思维导图树的哪个部分。
+
+虽然小地图需要你自行开发，不过`simple-mind-map`提供了一些方法来帮你快速的完成这一工作。
+
+小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。
+
+当注册了小地图插件后可以通过`mindMap.miniMap`获取到插件实例，然后通过`mindMap.miniMap.calculationMiniMap`方法即可获取小地图渲染需要的数据，返回的数据结构如下：
+
+```js
+{
+      svgHTML, // 小地图html
+      viewBoxStyle, // 视图框的位置信息
+      miniMapBoxScale, // 视图框的缩放值
+      miniMapBoxLeft, // 视图框的left值
+      miniMapBoxTop, // 视图框的top值
+}
+```
+
+完整实现思路如下：
+
+1.准备一个宽高不为0的容器元素container，定位不为static
+
+2.在container内创建一个小地图容器元素miniMapContainer，绝对定位，设置变换中心点为`left top`：
+
+```css
+transform-origin: left top;
+```
+
+3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）
+
+4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内，并且给miniMapContainer元素设置或更新如下样式：
+
+```js
+{
+    transform: `scale(${miniMapBoxScale})`,
+    left: miniMapBoxLeft + 'px',
+    top: miniMapBoxTop + 'px',
+}
+```
+5.将viewBoxStyle对象设置为viewBoxContainer元素的样式
+
+到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置
+
+6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果
+
+插件的完整信息可以参考[miniMap](https://wanglin2.github.io/mind-map/#/doc/zh/miniMap)。
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt2O20QUfpWRASULWSfbUgQhW5UCEkgNQqUSF0yVeu1J4sqesTzjJFWUm4oLhEBcIH6LBFyBhBStEBdsJXgaki1vwTn2jD12stpy1ZU28sz3nZ85c35m6byRJO4sY07fGUg/DRNFJFNZcp3yME5EqsiSpGzcIYIPRcYVCzpETr0oEvPbbExWZJyKmLRAQ6uUGIY8GHpJAVFHwnbEDmPYPYy9hDqUE0J5xBTBPWQeE55FEeWUd7tkc/rF5ofTzaO/N+uzzXe/nn//8Wb917+/fUu5L7hUBH6VF3KWfhgGagqyR73eDvYOCydTBeA1wHK120d/bL8+LZUbCXAhBBfeNIIgAudtoz8HhjML2fymWHygHkRM48tViWoNSPC9knC0B7/FxugSwr098B2BkaijWRJ4ikFEwyGC7QNyfJ0sMYJwpCfrn8/X35RH2n51uv18jRjGFuQ8kNAhdrUZF1z0s8hTIVxosdWuB7TTDCL4klvb/vn79scvN5/YMSQ78XNnXpQxN+Qof2d4C1xAT1w5m+ASRexwFnRDshFLuQltndwA63wM9UV0xOpsiPxFZIAoX2EOFReS14FkgZhzvA9WXUgz0hYTaPuUxGKGFp9CCTIvUJLleXG5iiypFJTF3LYSyipGNjdF3M4hQljUJ4Hws5hx5U6Yejti+HnzwbtBu6UlyxxoHXQKKYxlv9COf9TBDepYW8W2YguF29TZ/nT25NOH5w/PijaBfyutDIn+NIyClHEkf1TpaKjba6Vp6Z/Hn50//qVprG5wj9G7FWbznpEH5lPvGTm4eXVbCPWeCNj7QoZY7SDZiiDzWx3S8uHq4Jru5vTVwetFR65SR/B2C48w8qcenzAQsftQ3hBsKpbt6H/wObg1UiljIzhTwNIR/O7KYIcddIuhBOMIForBJAEKrAgZBOGM+JEn5TF1tPa3oFCok8OaEAYVWuYnUAZdQG2iiaTRWDbB6mZuxKaeAbeq2zCoKhhYrBUDV01GllR4piciIdodqmoOWT41ey11bBYMjr0ci9KX2FmB1chLlXpcjkUa98k9ic20/fyy0V5XB/dqSYlDZqz6zen2Emkli1aDqURiE3HOFbyysBVVq8pTHYgc0V/2fTXuXg8NOyrlOWsDpXHr5bf5GnStBINlriRn3NAvG+q43eI5o9ujy2Ts+lJSp6wh7LsmF039z3Gw9vGh8kLOIyQpqzJlOI1nLAfygsb/55o5a1RVgt6JFFGmCkFzHT29ykNuFrvmp/lk75OXe71kYSzvt/uisRx76SQEu0Zr4gVByCdmo3TdLUvnKX0+Mj5ot6115Xm5ZVy/ZnleRb7+lrvMfpn3hyIN88OhR+hFQ3Mzxy7VfCJSaGx9ciVZEADCgKSTk/aVq692yCuv4X/RdLULRkcUkZ57VRrj0P3yFHQ6TpGA+H5270vB4bmee0A1AAlYDhvI+gySHSeM24VPN4VRH8YMc/XwJBVzCa+0+yChq3TPC72Q3c10lNK+rZzVf9RSHZw=" />
--- a/web/src/pages/Doc/zh/course14/index.vue
+++ b/web/src/pages/Doc/zh/course14/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>如何渲染一个小地图</h1>
+<blockquote>
+<p>要使用小地图需要注册小地图插件</p>
+</blockquote>
+<p>小地图可以方便看到当前画布可视区域在思维导图树的哪个部分。</p>
+<p>虽然小地图需要你自行开发，不过<code>simple-mind-map</code>提供了一些方法来帮你快速的完成这一工作。</p>
+<p>小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。</p>
+<p>当注册了小地图插件后可以通过<code>mindMap.miniMap</code>获取到插件实例，然后通过<code>mindMap.miniMap.calculationMiniMap</code>方法即可获取小地图渲染需要的数据，返回的数据结构如下：</p>
+<pre class="hljs"><code>{
+      svgHTML, <span class="hljs-comment">// 小地图html</span>
+      viewBoxStyle, <span class="hljs-comment">// 视图框的位置信息</span>
+      miniMapBoxScale, <span class="hljs-comment">// 视图框的缩放值</span>
+      miniMapBoxLeft, <span class="hljs-comment">// 视图框的left值</span>
+      miniMapBoxTop, <span class="hljs-comment">// 视图框的top值</span>
+}
+</code></pre>
+<p>完整实现思路如下：</p>
+<p>1.准备一个宽高不为0的容器元素container，定位不为static</p>
+<p>2.在container内创建一个小地图容器元素miniMapContainer，绝对定位，设置变换中心点为<code>left top</code>：</p>
+<pre class="hljs"><code><span class="hljs-attribute">transform-origin</span>: left top;
+</code></pre>
+<p>3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）</p>
+<p>4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内，并且给miniMapContainer元素设置或更新如下样式：</p>
+<pre class="hljs"><code>{
+    <span class="hljs-attr">transform</span>: <span class="hljs-string">`scale(<span class="hljs-subst">${miniMapBoxScale}</span>)`</span>,
+    <span class="hljs-attr">left</span>: miniMapBoxLeft + <span class="hljs-string">&#x27;px&#x27;</span>,
+    <span class="hljs-attr">top</span>: miniMapBoxTop + <span class="hljs-string">&#x27;px&#x27;</span>,
+}
+</code></pre>
+<p>5.将viewBoxStyle对象设置为viewBoxContainer元素的样式</p>
+<p>到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置</p>
+<p>6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
+<p>插件的完整信息可以参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/miniMap">miniMap</a>。</p>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt2O20QUfpWRASULWSfbUgQhW5UCEkgNQqUSF0yVeu1J4sqesTzjJFWUm4oLhEBcIH6LBFyBhBStEBdsJXgaki1vwTn2jD12stpy1ZU28sz3nZ85c35m6byRJO4sY07fGUg/DRNFJFNZcp3yME5EqsiSpGzcIYIPRcYVCzpETr0oEvPbbExWZJyKmLRAQ6uUGIY8GHpJAVFHwnbEDmPYPYy9hDqUE0J5xBTBPWQeE55FEeWUd7tkc/rF5ofTzaO/N+uzzXe/nn//8Wb917+/fUu5L7hUBH6VF3KWfhgGagqyR73eDvYOCydTBeA1wHK120d/bL8+LZUbCXAhBBfeNIIgAudtoz8HhjML2fymWHygHkRM48tViWoNSPC9knC0B7/FxugSwr098B2BkaijWRJ4ikFEwyGC7QNyfJ0sMYJwpCfrn8/X35RH2n51uv18jRjGFuQ8kNAhdrUZF1z0s8hTIVxosdWuB7TTDCL4klvb/vn79scvN5/YMSQ78XNnXpQxN+Qof2d4C1xAT1w5m+ASRexwFnRDshFLuQltndwA63wM9UV0xOpsiPxFZIAoX2EOFReS14FkgZhzvA9WXUgz0hYTaPuUxGKGFp9CCTIvUJLleXG5iiypFJTF3LYSyipGNjdF3M4hQljUJ4Hws5hx5U6Yejti+HnzwbtBu6UlyxxoHXQKKYxlv9COf9TBDepYW8W2YguF29TZ/nT25NOH5w/PijaBfyutDIn+NIyClHEkf1TpaKjba6Vp6Z/Hn50//qVprG5wj9G7FWbznpEH5lPvGTm4eXVbCPWeCNj7QoZY7SDZiiDzWx3S8uHq4Jru5vTVwetFR65SR/B2C48w8qcenzAQsftQ3hBsKpbt6H/wObg1UiljIzhTwNIR/O7KYIcddIuhBOMIForBJAEKrAgZBOGM+JEn5TF1tPa3oFCok8OaEAYVWuYnUAZdQG2iiaTRWDbB6mZuxKaeAbeq2zCoKhhYrBUDV01GllR4piciIdodqmoOWT41ey11bBYMjr0ci9KX2FmB1chLlXpcjkUa98k9ic20/fyy0V5XB/dqSYlDZqz6zen2Emkli1aDqURiE3HOFbyysBVVq8pTHYgc0V/2fTXuXg8NOyrlOWsDpXHr5bf5GnStBINlriRn3NAvG+q43eI5o9ujy2Ts+lJSp6wh7LsmF039z3Gw9vGh8kLOIyQpqzJlOI1nLAfygsb/55o5a1RVgt6JFFGmCkFzHT29ykNuFrvmp/lk75OXe71kYSzvt/uisRx76SQEu0Zr4gVByCdmo3TdLUvnKX0+Mj5ot6115Xm5ZVy/ZnleRb7+lrvMfpn3hyIN88OhR+hFQ3Mzxy7VfCJSaGx9ciVZEADCgKSTk/aVq692yCuv4X/RdLULRkcUkZ57VRrj0P3yFHQ6TpGA+H5270vB4bmee0A1AAlYDhvI+gySHSeM24VPN4VRH8YMc/XwJBVzCa+0+yChq3TPC72Q3c10lNK+rZzVf9RSHZw=" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course15/index.md
+++ b/web/src/pages/Doc/zh/course15/index.md
@@ -0,0 +1,3 @@
+# 如何渲染一个右键菜单
+
+编写中。。。
--- a/web/src/pages/Doc/zh/course15/index.vue
+++ b/web/src/pages/Doc/zh/course15/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>如何渲染一个右键菜单</h1>
+<p>编写中。。。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course16/index.md
+++ b/web/src/pages/Doc/zh/course16/index.md
@@ -0,0 +1,3 @@
+# 如何渲染富文本的悬浮工具栏
+
+编写中。。。
--- a/web/src/pages/Doc/zh/course16/index.vue
+++ b/web/src/pages/Doc/zh/course16/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>如何渲染富文本的悬浮工具栏</h1>
+<p>编写中。。。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course17/index.md
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -0,0 +1,3 @@
+# 导入和导出
+
+编写中。。。
--- a/web/src/pages/Doc/zh/course17/index.vue
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>导入和导出</h1>
+<p>编写中。。。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course18/index.md
+++ b/web/src/pages/Doc/zh/course18/index.md
@@ -0,0 +1,3 @@
+# 如何持久化数据
+
+编写中。。。
--- a/web/src/pages/Doc/zh/course18/index.vue
+++ b/web/src/pages/Doc/zh/course18/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>如何持久化数据</h1>
+<p>编写中。。。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course2/index.md
+++ b/web/src/pages/Doc/zh/course2/index.md
@@ -0,0 +1,183 @@
+# 操作节点内容
+
+目前支持在节点中插入`图片`、`图标`、`超链接`、`备注`、`标签`、`概要`、`关联线`，本节教程会介绍如何通过UI界面来完成这些内容的插入。
+
+## 监听节点激活事件
+
+首先我们要监听节点的激活事件，如果当前没有激活节点，那么对应的UI界面肯定是禁用状态。可以通过`node_active`事件来监听节点激活事件：
+
+```js
+const activeNodes = shallowRef([])
+mindMap.on('node_active', (node, activeNodeList) => {
+    activeNodes.value = activeNodeList
+})
+```
+
+你还可以进一步判断当前激活的节点中是否操作根节点，是否存在概要节点，因为根节点肯定不能添加兄弟节点，概要节点则子节点、兄弟节点、概要节点、关联线都不能添加。
+
+```js
+const hasRoot = computed(() => {
+    return activeNodes.value.findIndex(node => {
+        return node.isRoot
+    }) !== -1
+})
+
+
+const hasGeneralization = computed(() => {
+    return activeNodes.value.findIndex(node => {
+        return node.isGeneralization
+    }) !== -1
+})
+```
+
+有了这些判断以后，我们就可以对工具按钮进行控制了，接下来就是实现按钮的相关功能。
+
+## 插入图片
+
+选择图片和上传图片的功能需要你自行开发，假设我们已经上传了一张图片，我们就可以遍历当前激活的节点，挨个调用节点的`setImage`方法设置图片：
+
+```js
+activeNodes.value.forEach((node) => {
+    node.setImage({
+        url: '图片url',
+        title: '图片的标题或描述',
+        width: 100,// 图片的宽高也不能少
+        height: 100
+    })
+})
+```
+
+图片回显也很简单，可以使用节点的`getData`方法获取节点的图片：
+
+```js
+const img = activeNode.getData('image')
+const imgTitle = activeNode.getData('imageTitle')
+```
+
+## 插入图标
+
+整体逻辑和插入图片是一样的，不过你需要显示所有可插入的图标，目前只能使用库里自带的一些图标，然后将选择的图标插入到节点中：
+
+```js
+const iconList = ['priority_1', '...']// 选择的图标
+activeNodes.value.forEach(node => {
+    node.setIcon(iconList)
+})
+```
+
+获取节点的图标数据：
+
+```js
+const iconList = activeNode.getData('icon') || []
+```
+
+## 插入超链接
+
+对于超链接，你需要实现两个输入框，分别输入`url`和名称，然后插入到节点：
+
+```js
+activeNodes.value.forEach(node => {
+    node.setHyperlink('url', '名称')
+})
+```
+
+获取节点超链接数据：
+
+```js
+const url = activeNode.getData('hyperlink')
+const name = activeNode.getData('hyperlinkTitle')
+```
+
+## 插入备注
+
+备注会稍微复杂一点，因为支持两种方式。
+
+### 使用内置逻辑
+
+使用内置的逻辑，只能插入纯文本备注，所以你只需要显示一个输入框用来输入文本，然后插入到节点：
+
+```js
+activeNodes.value.forEach(node => {
+    node.setNote('备注内容')
+})
+```
+
+这样在鼠标移入节点内的备注图标时会显示你插入的备注内容。
+
+### 自定义显示备注
+
+如果你想显示更丰富的备注内容，比如支持`markdown`，那么你可以在实例化`simple-mind-map`时插入`customNoteContentShow`选项。
+
+设置备注内容还是使用`setNote`方法，只不过现在插入的是`markdown`字符串，因为内置的备注弹窗只能处理纯文本内容，所以你需要自己来渲染`markdown`：
+
+```js
+const mindMap = new MindMap({
+    // ...
+    customNoteContentShow: {
+        show: (content, left, top) => {
+            // 在这里显示你的自定义弹窗
+            // content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位
+        },
+        hide: () => {
+            // 在这里隐藏你的自定义弹窗
+            // 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏
+        }
+    },
+})
+```
+
+获取节点的备注内容可以通过`getData`方法：
+
+```js
+const note = activeNode.getData('note')
+```
+
+## 插入标签
+
+标签其实就是一个个带背景颜色的文本块，你需要实现的就是一个可以输入多个文本的输入框，然后插入到节点：
+
+```js
+activeNodes.value.forEach(node => {
+    node.setTag(['标签1', '...'])
+})
+```
+
+获取节点标签数据：
+
+```js
+const tagArr = activeNode.getData('tag') || []
+```
+
+## 插入概要
+
+插入概要可以不需要实现UI，直接调用插入概要的命令即可：
+
+```js
+mindMap.execCommand('ADD_GENERALIZATION', data)
+```
+
+会给当前激活的节点插入一个概要节点，第二个参数`data`可以不传，默认为：
+
+```js
+{
+    text: '概要'
+}
+```
+
+概要节点本质上也是一个节点，所以普通节点支持的内容它也支持。
+
+## 插入关联线
+
+> 要支持关联线需要使用关联线插件
+
+关联线也不需要UI，调用一个方法即可：
+
+```js
+mindMap.associativeLine.createLineFromActiveNode()
+```
+
+然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV/9PHEUU/1cma8we5tiDRmKCBykFRBJAQ5poZRuy7M7dDezObHfn4AghsVRK0Vb6xWjTRq2mraYqaULTCA3wz7B3x3/hm539dsdhzvhDSQ5m3rzPe+/el88Ma8qI62rLVawMKkXf9IjLkY951R3WKXFc5nG0hjxcyiNGp1mVcmzlkV8xbJutzOISWkcljzlIBQtqgpgm1Jo2XHmkKz6IbdzrgLTXMVxd0SlCOrUxR0ImNIcQrdq2lBcKKDh8EGzfqR9/WX/1pvHoq+bXG42N/eDWD81fftepyajPkWFysoxnmIV9QKcR5eau9ug0tFLfuR9sPgseHzW2t2IYoT72Jh2jjAGV60FDw2hNuM2Y05YNu4q1EvPGDbOSy1EQpooIib0GOQqt5CKh+Kl69iBSK5y7/mChYNeuUX/V15jv95q0dwGTRULLmmGT1So1fc1kTuGaXSvUKhdGPl+6VLviDCxO4IHS2Adjn13xRgcWNJeW1XxqnhNuY3AgvxCkpf5k6/TXh/Vb39d3dprHL7O6K8TilUHU39eXF+mMEcHu4ekfD0/2fz75+07zxmHw8l4KqWBSrvAQI4XrIo9c/F5vTyh4bkkon4RNa0KjU/gzRWAxhOZU1yPMI3x1vl/No3R3Qb367xUQCe+Uf7Cdix2cE2vz9ebpg6P6t89aw50idKnb+p/j/eNVF3s22MmFFc8UXBRWfMHG3Zv1G3unP94P9l8Fuz+dvrgd7D5Vz0vq0636XtLcMsoZxrvu0nOiFCZyqjQe3NwMdvfPCwBK2vjrqDWAy0b5f/oHC7k5VdoOqy6XUPLzwni+0Xx+vTWMCaM1iog0NFzD5ihzHINaOXVkbGx+YnxmfHZkavKLkcuTn8yAu1Bd5xzXoLHV5taLYPfRyf62dBLlQ6h0qMfmXvP6d42D4zON01aSOBjD95lJDJEfoaSZHjZ4uPwIWHAkSVwudpXwae6sNcGHeCXm0ZhjMNCLxcyqgynXypiP21gsL61OwvePkKOMcgOcempPRAeWwY3BuC6QDUUIdCUjkmKRJCHWlfqTfcm4kqlDLki4RVfMCrEtD1OhPJfaaDPX0Uu7p5OD242D39qdtTrs4DTki7N6bymCeBnJYhyhhM8yBiNo4U+ZTzhhFJCqjUtcTIIJpYMyhaj1ng/l3YcQdGDj8b3g7p8yJnkHnhx8c/LmdbbdgPpUMWTzciTBYDiC+XDyQkLMTOOZsRX9Fekl7Q+fYkG+AODuhw3HcG1DD8MOoaJFlpFpQ5cP6UoUxBh2mK6Ex5ECsdLTpBNBpViA06xibIkzZi8YoIKWe0kJBNlQbUzLvIKGUV/iRefFhSrncNlcNG1iLgEivdFBK3vlFwtSNYKC547Q8B7JQoGiuoWKeySBJndNt2hBzqnjkKO7hQKvJkhJqd0iJ2AmYmBIg//hu2aijemxDZ0WOl4VC5k+gq3PV23ZUhej16KuaAX5RIz4TsO+o5m+ryvJVGiZlou7On3jvBvqIeQmY+Zh8AiNFB6EEyo+77S3ZmwqBRoLPrOrXAIREsM6iPqiHWduujnrPn5Bvd/X59Ziz539vhd7dgyvTMBvbNU1LAueibEgCV2LJqXLiPvjCKKgkz0YhCkPa6DkFVkB8SjXFn1G4X8AeWNGB1CBhD51BZ74kjO1Aiw1Dy4v4mBRrN4Fj61Aj4ARXYnor8OzX2LPllqgotjWlfV/AEgelAo=" />
--- a/web/src/pages/Doc/zh/course2/index.vue
+++ b/web/src/pages/Doc/zh/course2/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <h1>操作节点内容</h1>
+<p>目前支持在节点中插入<code>图片</code>、<code>图标</code>、<code>超链接</code>、<code>备注</code>、<code>标签</code>、<code>概要</code>、<code>关联线</code>，本节教程会介绍如何通过UI界面来完成这些内容的插入。</p>
+<h2>监听节点激活事件</h2>
+<p>首先我们要监听节点的激活事件，如果当前没有激活节点，那么对应的UI界面肯定是禁用状态。可以通过<code>node_active</code>事件来监听节点激活事件：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> activeNodes = shallowRef([])
+mindMap.on(<span class="hljs-string">&#x27;node_active&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">node, activeNodeList</span>) =&gt;</span> {
+    activeNodes.value = activeNodeList
+})
+</code></pre>
+<p>你还可以进一步判断当前激活的节点中是否操作根节点，是否存在概要节点，因为根节点肯定不能添加兄弟节点，概要节点则子节点、兄弟节点、概要节点、关联线都不能添加。</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> hasRoot = computed(<span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-keyword">return</span> activeNodes.value.findIndex(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+        <span class="hljs-keyword">return</span> node.isRoot
+    }) !== -<span class="hljs-number">1</span>
+})
+
+
+<span class="hljs-keyword">const</span> hasGeneralization = computed(<span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-keyword">return</span> activeNodes.value.findIndex(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+        <span class="hljs-keyword">return</span> node.isGeneralization
+    }) !== -<span class="hljs-number">1</span>
+})
+</code></pre>
+<p>有了这些判断以后，我们就可以对工具按钮进行控制了，接下来就是实现按钮的相关功能。</p>
+<h2>插入图片</h2>
+<p>选择图片和上传图片的功能需要你自行开发，假设我们已经上传了一张图片，我们就可以遍历当前激活的节点，挨个调用节点的<code>setImage</code>方法设置图片：</p>
+<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+    node.setImage({
+        <span class="hljs-attr">url</span>: <span class="hljs-string">&#x27;图片url&#x27;</span>,
+        <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;图片的标题或描述&#x27;</span>,
+        <span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,<span class="hljs-comment">// 图片的宽高也不能少</span>
+        <span class="hljs-attr">height</span>: <span class="hljs-number">100</span>
+    })
+})
+</code></pre>
+<p>图片回显也很简单，可以使用节点的<code>getData</code>方法获取节点的图片：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> img = activeNode.getData(<span class="hljs-string">&#x27;image&#x27;</span>)
+<span class="hljs-keyword">const</span> imgTitle = activeNode.getData(<span class="hljs-string">&#x27;imageTitle&#x27;</span>)
+</code></pre>
+<h2>插入图标</h2>
+<p>整体逻辑和插入图片是一样的，不过你需要显示所有可插入的图标，目前只能使用库里自带的一些图标，然后将选择的图标插入到节点中：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> iconList = [<span class="hljs-string">&#x27;priority_1&#x27;</span>, <span class="hljs-string">&#x27;...&#x27;</span>]<span class="hljs-comment">// 选择的图标</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setIcon(iconList)
+})
+</code></pre>
+<p>获取节点的图标数据：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> iconList = activeNode.getData(<span class="hljs-string">&#x27;icon&#x27;</span>) || []
+</code></pre>
+<h2>插入超链接</h2>
+<p>对于超链接，你需要实现两个输入框，分别输入<code>url</code>和名称，然后插入到节点：</p>
+<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setHyperlink(<span class="hljs-string">&#x27;url&#x27;</span>, <span class="hljs-string">&#x27;名称&#x27;</span>)
+})
+</code></pre>
+<p>获取节点超链接数据：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> url = activeNode.getData(<span class="hljs-string">&#x27;hyperlink&#x27;</span>)
+<span class="hljs-keyword">const</span> name = activeNode.getData(<span class="hljs-string">&#x27;hyperlinkTitle&#x27;</span>)
+</code></pre>
+<h2>插入备注</h2>
+<p>备注会稍微复杂一点，因为支持两种方式。</p>
+<h3>使用内置逻辑</h3>
+<p>使用内置的逻辑，只能插入纯文本备注，所以你只需要显示一个输入框用来输入文本，然后插入到节点：</p>
+<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setNote(<span class="hljs-string">&#x27;备注内容&#x27;</span>)
+})
+</code></pre>
+<p>这样在鼠标移入节点内的备注图标时会显示你插入的备注内容。</p>
+<h3>自定义显示备注</h3>
+<p>如果你想显示更丰富的备注内容，比如支持<code>markdown</code>，那么你可以在实例化<code>simple-mind-map</code>时插入<code>customNoteContentShow</code>选项。</p>
+<p>设置备注内容还是使用<code>setNote</code>方法，只不过现在插入的是<code>markdown</code>字符串，因为内置的备注弹窗只能处理纯文本内容，所以你需要自己来渲染<code>markdown</code>：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-attr">customNoteContentShow</span>: {
+        <span class="hljs-attr">show</span>: <span class="hljs-function">(<span class="hljs-params">content, left, top</span>) =&gt;</span> {
+            <span class="hljs-comment">// 在这里显示你的自定义弹窗</span>
+            <span class="hljs-comment">// content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位</span>
+        },
+        <span class="hljs-attr">hide</span>: <span class="hljs-function">() =&gt;</span> {
+            <span class="hljs-comment">// 在这里隐藏你的自定义弹窗</span>
+            <span class="hljs-comment">// 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏</span>
+        }
+    },
+})
+</code></pre>
+<p>获取节点的备注内容可以通过<code>getData</code>方法：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> note = activeNode.getData(<span class="hljs-string">&#x27;note&#x27;</span>)
+</code></pre>
+<h2>插入标签</h2>
+<p>标签其实就是一个个带背景颜色的文本块，你需要实现的就是一个可以输入多个文本的输入框，然后插入到节点：</p>
+<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setTag([<span class="hljs-string">&#x27;标签1&#x27;</span>, <span class="hljs-string">&#x27;...&#x27;</span>])
+})
+</code></pre>
+<p>获取节点标签数据：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> tagArr = activeNode.getData(<span class="hljs-string">&#x27;tag&#x27;</span>) || []
+</code></pre>
+<h2>插入概要</h2>
+<p>插入概要可以不需要实现UI，直接调用插入概要的命令即可：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;ADD_GENERALIZATION&#x27;</span>, data)
+</code></pre>
+<p>会给当前激活的节点插入一个概要节点，第二个参数<code>data</code>可以不传，默认为：</p>
+<pre class="hljs"><code>{
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;概要&#x27;</span>
+}
+</code></pre>
+<p>概要节点本质上也是一个节点，所以普通节点支持的内容它也支持。</p>
+<h2>插入关联线</h2>
+<blockquote>
+<p>要支持关联线需要使用关联线插件</p>
+</blockquote>
+<p>关联线也不需要UI，调用一个方法即可：</p>
+<pre class="hljs"><code>mindMap.associativeLine.createLineFromActiveNode()
+</code></pre>
+<p>然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。</p>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV/9PHEUU/1cma8we5tiDRmKCBykFRBJAQ5poZRuy7M7dDezObHfn4AghsVRK0Vb6xWjTRq2mraYqaULTCA3wz7B3x3/hm539dsdhzvhDSQ5m3rzPe+/el88Ma8qI62rLVawMKkXf9IjLkY951R3WKXFc5nG0hjxcyiNGp1mVcmzlkV8xbJutzOISWkcljzlIBQtqgpgm1Jo2XHmkKz6IbdzrgLTXMVxd0SlCOrUxR0ImNIcQrdq2lBcKKDh8EGzfqR9/WX/1pvHoq+bXG42N/eDWD81fftepyajPkWFysoxnmIV9QKcR5eau9ug0tFLfuR9sPgseHzW2t2IYoT72Jh2jjAGV60FDw2hNuM2Y05YNu4q1EvPGDbOSy1EQpooIib0GOQqt5CKh+Kl69iBSK5y7/mChYNeuUX/V15jv95q0dwGTRULLmmGT1So1fc1kTuGaXSvUKhdGPl+6VLviDCxO4IHS2Adjn13xRgcWNJeW1XxqnhNuY3AgvxCkpf5k6/TXh/Vb39d3dprHL7O6K8TilUHU39eXF+mMEcHu4ekfD0/2fz75+07zxmHw8l4KqWBSrvAQI4XrIo9c/F5vTyh4bkkon4RNa0KjU/gzRWAxhOZU1yPMI3x1vl/No3R3Qb367xUQCe+Uf7Cdix2cE2vz9ebpg6P6t89aw50idKnb+p/j/eNVF3s22MmFFc8UXBRWfMHG3Zv1G3unP94P9l8Fuz+dvrgd7D5Vz0vq0636XtLcMsoZxrvu0nOiFCZyqjQe3NwMdvfPCwBK2vjrqDWAy0b5f/oHC7k5VdoOqy6XUPLzwni+0Xx+vTWMCaM1iog0NFzD5ihzHINaOXVkbGx+YnxmfHZkavKLkcuTn8yAu1Bd5xzXoLHV5taLYPfRyf62dBLlQ6h0qMfmXvP6d42D4zON01aSOBjD95lJDJEfoaSZHjZ4uPwIWHAkSVwudpXwae6sNcGHeCXm0ZhjMNCLxcyqgynXypiP21gsL61OwvePkKOMcgOcempPRAeWwY3BuC6QDUUIdCUjkmKRJCHWlfqTfcm4kqlDLki4RVfMCrEtD1OhPJfaaDPX0Uu7p5OD242D39qdtTrs4DTki7N6bymCeBnJYhyhhM8yBiNo4U+ZTzhhFJCqjUtcTIIJpYMyhaj1ng/l3YcQdGDj8b3g7p8yJnkHnhx8c/LmdbbdgPpUMWTzciTBYDiC+XDyQkLMTOOZsRX9Fekl7Q+fYkG+AODuhw3HcG1DD8MOoaJFlpFpQ5cP6UoUxBh2mK6Ex5ECsdLTpBNBpViA06xibIkzZi8YoIKWe0kJBNlQbUzLvIKGUV/iRefFhSrncNlcNG1iLgEivdFBK3vlFwtSNYKC547Q8B7JQoGiuoWKeySBJndNt2hBzqnjkKO7hQKvJkhJqd0iJ2AmYmBIg//hu2aijemxDZ0WOl4VC5k+gq3PV23ZUhej16KuaAX5RIz4TsO+o5m+ryvJVGiZlou7On3jvBvqIeQmY+Zh8AiNFB6EEyo+77S3ZmwqBRoLPrOrXAIREsM6iPqiHWduujnrPn5Bvd/X59Ziz539vhd7dgyvTMBvbNU1LAueibEgCV2LJqXLiPvjCKKgkz0YhCkPa6DkFVkB8SjXFn1G4X8AeWNGB1CBhD51BZ74kjO1Aiw1Dy4v4mBRrN4Fj61Aj4ARXYnor8OzX2LPllqgotjWlfV/AEgelAo=" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course3/index.md
+++ b/web/src/pages/Doc/zh/course3/index.md
@@ -0,0 +1,60 @@
+# 插入/删除节点、前进回退
+
+首先和操作节点内容一样，也需要监听节点的激活事件，然后禁用相关按钮。
+
+## 插入子节点
+
+插入子节点很节点，执行`INSERT_CHILD_NODE`命令即可：
+
+```js
+mindMap.execCommand('INSERT_CHILD_NODE')
+```
+
+这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。
+
+`INSERT_CHILD_NODE`命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。
+
+## 插入兄弟节点
+
+插入兄弟节点和插入子节点方式完全一致：
+
+```js
+mindMap.execCommand('INSERT_NODE')
+```
+
+## 删除节点
+
+删除节点也是执行命令：
+
+```js
+mindMap.execCommand('REMOVE_NODE')
+```
+
+会删除当前激活的所有节点。
+
+## 前进回退
+
+首先需要监听`back_forward`事件，事件回调中可以获取当前的历史记录总数，以及当前所在的历史记录索引，那么就可以判断当前是否处于历史记录的最开始，还是最后，然后对前进回退按钮进行禁用。
+
+```js
+const isStart = ref(true)
+const isEnd = ref(true)
+mindMap.on('back_forward', (index, len) => {
+    isStart.value = index <= 0
+    isEnd.value = index >= len - 1
+})
+```
+
+然后前进回退调用相关命令即可：
+
+```js
+// 回退一次
+mindMap.execCommand('BACK')
+
+// 前进一次
+mindMap.execCommand('FORWARD')
+```
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt1qG0cUfpXTLUVykVYy9EqVRBxZpaaxXZTSXmSCWe2OpGl2Z5bdkeRgBCYkkP7RtKWU1tCm0NJetKUXpRCnIS/jtZ236Jmd/dMPWLmKYMXOnHO+78ycM9/OkbHl++ZkTI2G0QztgPkSQirHfptw5vkikHAEAR1UQPBdMeaSOhUIR5brimmPDmAGg0B4UEKEUhaxy7iza/naRIwQp11a9XC26lk+MQgHINylEtSc8mwBH7su4YTXanD519/Rs2+jT764fH4Snfz44viYcFvwUAILb0oLCVoqpbIMxnQjN3W5M29QJAgXPfsGsc6fH5//8/Tih/uXn967uPckevjd5c+/p8GWLdmE7gmHhgiRL6986zbiaJS5RPqWfQc9yxvQasORokpWYtJDaneE51ncKZeub3XeKyHCLAWJ15SCDEQwtQKV9FU47+z3PtrqbRehzr/8Onrwa/TgfvTfT3pJ2U7wkAZSLWYN5J29m93eBwd7+9vdFeh/PloF3Rkx13k5/M67Oze2l1iih49ffP/LPIVDsS/iUqyB3uvu7n/YncfN+rS8HK36jE7T/izHJgDqNsAR9tijXJpDKrsuVa/X7+4gRRLZEVxajNOgtFHRUY4lrYZGVz9iqAliFKb0tKSHUk0T4/zxk2St8QlQv1kCphxtta0B5cr5Vo6xALeSZZHp7PTzi9PfFsnmCVeQ3s5tRb9XlEH6msylcYwz2RMibvD3RcgkExwjSy4dyFIFSjaWDssUR8023tYyAIDtdnHyVfToD52TloOz08/Onv5bbC/ByyWOyAdaEhCwrIYVUP83WCjznoKibJgTyx2rlk39NH3CTmR2+LWOrCZWqnKQqIJiRhM9rIBLeZEVt0DLYMYZ+0GzBfXcA9Vwwd5uKSSowmaam3qaNa36qPc4kBSl2pIURwBNh03Adq0wbBEjyXObeoIYsTlxYE5uzU4JujRraC06pkhSCLdvKRdtJLLZH0spOFyzXWbfQRe1EcSASZUNcPRasl6M0LvXrOmABADxFwGSTZzDwB1RCHEVrkbIVTQHKdYbt3IoR9DGPTfay2K8LkGmpeuzpKJ8NUWupWugF8V4ATovZfrWrBU6BYehvOvqprmW3AGIYdb0hz9RW5OGnmmHITGyM2kWmirt7ilz5KgBm/X6G7EfgJ8d8oAiI2YfG2J9UM/ri82XQuWBVj8U7ljqQMBjMJANqCcjKfx8sEw/omw4Qve36nX/MGVezftmyuxZwZAhb4rqW47D+DCdyFI3k7OwZsabaQZJ0tkYAfEcxzUwKoaugLpqmR+HguPNLobHlosNWIFMvImBFzet2GYNX80AP53Mo6pY1X4gptijCEKMRHxXXOZ07HKpVVSS28yY/Q8ZbqFI" />
--- a/web/src/pages/Doc/zh/course3/index.vue
+++ b/web/src/pages/Doc/zh/course3/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>插入/删除节点、前进回退</h1>
+<p>首先和操作节点内容一样，也需要监听节点的激活事件，然后禁用相关按钮。</p>
+<h2>插入子节点</h2>
+<p>插入子节点很节点，执行<code>INSERT_CHILD_NODE</code>命令即可：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>)
+</code></pre>
+<p>这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。</p>
+<p><code>INSERT_CHILD_NODE</code>命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。</p>
+<h2>插入兄弟节点</h2>
+<p>插入兄弟节点和插入子节点方式完全一致：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>)
+</code></pre>
+<h2>删除节点</h2>
+<p>删除节点也是执行命令：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;REMOVE_NODE&#x27;</span>)
+</code></pre>
+<p>会删除当前激活的所有节点。</p>
+<h2>前进回退</h2>
+<p>首先需要监听<code>back_forward</code>事件，事件回调中可以获取当前的历史记录总数，以及当前所在的历史记录索引，那么就可以判断当前是否处于历史记录的最开始，还是最后，然后对前进回退按钮进行禁用。</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> isStart = ref(<span class="hljs-literal">true</span>)
+<span class="hljs-keyword">const</span> isEnd = ref(<span class="hljs-literal">true</span>)
+mindMap.on(<span class="hljs-string">&#x27;back_forward&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">index, len</span>) =&gt;</span> {
+    isStart.value = index &lt;= <span class="hljs-number">0</span>
+    isEnd.value = index &gt;= len - <span class="hljs-number">1</span>
+})
+</code></pre>
+<p>然后前进回退调用相关命令即可：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 回退一次</span>
+mindMap.execCommand(<span class="hljs-string">&#x27;BACK&#x27;</span>)
+
+<span class="hljs-comment">// 前进一次</span>
+mindMap.execCommand(<span class="hljs-string">&#x27;FORWARD&#x27;</span>)
+</code></pre>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt1qG0cUfpXTLUVykVYy9EqVRBxZpaaxXZTSXmSCWe2OpGl2Z5bdkeRgBCYkkP7RtKWU1tCm0NJetKUXpRCnIS/jtZ236Jmd/dMPWLmKYMXOnHO+78ycM9/OkbHl++ZkTI2G0QztgPkSQirHfptw5vkikHAEAR1UQPBdMeaSOhUIR5brimmPDmAGg0B4UEKEUhaxy7iza/naRIwQp11a9XC26lk+MQgHINylEtSc8mwBH7su4YTXanD519/Rs2+jT764fH4Snfz44viYcFvwUAILb0oLCVoqpbIMxnQjN3W5M29QJAgXPfsGsc6fH5//8/Tih/uXn967uPckevjd5c+/p8GWLdmE7gmHhgiRL6986zbiaJS5RPqWfQc9yxvQasORokpWYtJDaneE51ncKZeub3XeKyHCLAWJ15SCDEQwtQKV9FU47+z3PtrqbRehzr/8Onrwa/TgfvTfT3pJ2U7wkAZSLWYN5J29m93eBwd7+9vdFeh/PloF3Rkx13k5/M67Oze2l1iih49ffP/LPIVDsS/iUqyB3uvu7n/YncfN+rS8HK36jE7T/izHJgDqNsAR9tijXJpDKrsuVa/X7+4gRRLZEVxajNOgtFHRUY4lrYZGVz9iqAliFKb0tKSHUk0T4/zxk2St8QlQv1kCphxtta0B5cr5Vo6xALeSZZHp7PTzi9PfFsnmCVeQ3s5tRb9XlEH6msylcYwz2RMibvD3RcgkExwjSy4dyFIFSjaWDssUR8023tYyAIDtdnHyVfToD52TloOz08/Onv5bbC/ByyWOyAdaEhCwrIYVUP83WCjznoKibJgTyx2rlk39NH3CTmR2+LWOrCZWqnKQqIJiRhM9rIBLeZEVt0DLYMYZ+0GzBfXcA9Vwwd5uKSSowmaam3qaNa36qPc4kBSl2pIURwBNh03Adq0wbBEjyXObeoIYsTlxYE5uzU4JujRraC06pkhSCLdvKRdtJLLZH0spOFyzXWbfQRe1EcSASZUNcPRasl6M0LvXrOmABADxFwGSTZzDwB1RCHEVrkbIVTQHKdYbt3IoR9DGPTfay2K8LkGmpeuzpKJ8NUWupWugF8V4ATovZfrWrBU6BYehvOvqprmW3AGIYdb0hz9RW5OGnmmHITGyM2kWmirt7ilz5KgBm/X6G7EfgJ8d8oAiI2YfG2J9UM/ri82XQuWBVj8U7ljqQMBjMJANqCcjKfx8sEw/omw4Qve36nX/MGVezftmyuxZwZAhb4rqW47D+DCdyFI3k7OwZsabaQZJ0tkYAfEcxzUwKoaugLpqmR+HguPNLobHlosNWIFMvImBFzet2GYNX80AP53Mo6pY1X4gptijCEKMRHxXXOZ07HKpVVSS28yY/Q8ZbqFI" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course4/index.md
+++ b/web/src/pages/Doc/zh/course4/index.md
@@ -0,0 +1,235 @@
+# 设置节点样式
+
+本节将介绍如何更新当前激活节点的样式。
+
+样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是`setStyle`方法，通过第三个参数进行指定：
+
+```js
+// 设置常态样式
+node.setStyle('样式属性', '样式值')
+
+// 设置激活样式
+node.setStyle('样式属性', '样式值', true)
+```
+
+## 设置常态样式
+
+### 设置文字样式
+
+文字样式目前支持：`字体`、`字号`、`行高`、`颜色`、`加粗`、`斜体`、`划线`。
+
+这些样式选择的UI界面都需要你自行开发，然后调用节点的`setStyle`方法更新。
+
+同样首先需要监听节点的激活事件来换取当前激活的节点：
+
+```js
+const activeNodes = shallowRef([])
+mindMap.on('node_active', (node, activeNodeList) => {
+    activeNodes.value = activeNodeList
+})
+```
+
+```js
+// 设置字体
+activeNodes.value.forEach(node => {
+    node.setStyle('fontFamily', '宋体, SimSun, Songti SC')
+})
+
+// 设置字号
+activeNodes.value.forEach(node => {
+    node.setStyle('fontSize', 16)
+})
+
+// 设置行高
+activeNodes.value.forEach(node => {
+    node.setStyle('lineHeight', 1.5)
+})
+
+// 设置颜色
+activeNodes.value.forEach(node => {
+    node.setStyle('color', '#fff')
+})
+
+// 设置加粗
+activeNodes.value.forEach(node => {
+    node.setStyle('fontWeight', 'bold')// node.setStyle('fontWeight', 'normal')
+})
+
+// 设置划线
+activeNodes.value.forEach(node => {
+    // 下划线
+    node.setStyle('textDecoration', 'underline')
+    // 删除线
+    node.setStyle('textDecoration', 'line-through')
+    // 上划线
+    node.setStyle('textDecoration', 'overline')
+})
+```
+
+### 设置边框样式
+
+边框样式支持设置：`颜色`、`虚线`、`线宽`、`圆角`。
+
+设置边框样式前请先检查线宽是否被设置成了0。
+
+```js
+// 设置边框颜色
+activeNodes.value.forEach(node => {
+    node.setStyle('borderColor', '#000')
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+    node.setStyle('borderDasharray', '5,5')// node.setStyle('borderDasharray', 'none')
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+    node.setStyle('borderWidth', 2)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+    node.setStyle('borderRadius', 5)
+})
+```
+
+### 设置背景样式
+
+背景样式也就是背景颜色。
+
+```js
+activeNodes.value.forEach(node => {
+    node.setStyle('fillColor', '#fff')
+})
+```
+
+### 设置形状样式
+
+目前支持以下形状：
+
+```js
+[
+  {
+    name: '矩形',
+    value: 'rectangle'
+  },
+  {
+    name: '菱形',
+    value: 'diamond'
+  },
+  {
+    name: '平行四边形',
+    value: 'parallelogram'
+  },
+  {
+    name: '圆角矩形',
+    value: 'roundedRectangle'
+  },
+  {
+    name: '八角矩形',
+    value: 'octagonalRectangle'
+  },
+  {
+    name: '外三角矩形',
+    value: 'outerTriangularRectangle'
+  },
+  {
+    name: '内三角矩形',
+    value: 'innerTriangularRectangle'
+  },
+  {
+    name: '椭圆',
+    value: 'ellipse'
+  },
+  {
+    name: '圆',
+    value: 'circle'
+  }
+]
+```
+
+设置形状前请先确认边框宽度是否被设置成了0。
+
+```js
+activeNodes.value.forEach(node => {
+    node.setStyle('shape', 'circle')
+})
+```
+
+### 设置线条样式
+
+节点线条支持设置：`颜色`、`虚线`、`线宽`。
+
+```js
+// 设置线条颜色
+activeNodes.value.forEach(node => {
+    node.setStyle('lineColor', '#000')
+})
+
+// 设置线条虚线
+activeNodes.value.forEach(node => {
+    node.setStyle('lineDasharray', '5, 5, 1, 5')// node.setStyle('lineDasharray', 'none')
+})
+
+// 设置线条宽度
+activeNodes.value.forEach(node => {
+    node.setStyle('lineWidth', 3)
+})
+```
+
+### 设置节点内边距
+
+节点内边距支持设置水平和垂直方向的内边距。
+
+```js
+activeNodes.value.forEach(node => {
+    node.setStyle('paddingX', 50)
+    node.setStyle('paddingY', 50)
+})
+```
+
+## 设置激活样式
+
+激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：
+
+```js
+import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
+
+const checkIsSupportActive = (prop) => {
+    return supportActiveStyle.includes(prop)
+}
+```
+
+其他和数值常态样式是一样的，只需要给`setStyle`方法传入第三个参数：
+
+```js
+// 设置边框颜色
+activeNodes.value.forEach(node => {
+    node.setStyle('borderColor', '#000', true)
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+    node.setStyle('borderDasharray', '5,5', true)// node.setStyle('borderDasharray', 'none', true)
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+    node.setStyle('borderWidth', 2, true)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+    node.setStyle('borderRadius', 5, true)
+})
+
+// 设置背景颜色
+activeNodes.value.forEach(node => {
+    node.setStyle('fillColor', '#fff', true)
+})
+```
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV91uG0UUfpXRVmgd5KwdIFwYJypNikBqUBUjFdSt0Hh3bA/MzqxmZ52GyBIqUKAtAlSJClClhhu4gHCDqJI27cvEP4/RM/tfex35wlKj2N6Z+b5zzsz55szsgfGu71v9kBgNoxk4kvoKBUSF/qbNqecLqdABkqRTRYLviJAr4lZR0MOMib1d0kED1JHCQyZYMDPGDuXuDvbjIdsIoJuRVQ96Vz3s24bNEbI5IwrpPo3cQDxkzOY2r9XQ8PT+8PsfRs+/HP33ZPzb15M7t8a3joffPZgc/mVzR/BAIewo2icfCpcEwM3jqVy/sZJYmRw9G58ejX75dvjPg9Gjx8OnP6ZkmN9H5KZqqX1GgF1ZQRub6EAHVTBr9TELidUR8jJ2ehUOfRkMId20wE5ko2J2BFfvYY+yfbOKzOHR3bPT+1XUol4r5PAreFdR1NoyIbY57Bb9ggB37e1yCKOcvE9ot6c0yFovRzmCCakjkMQ9x9e11JDZFmweUMEKbRNHSKyo4BqsY1hVPSnCbk+TbDWA78FLyz15djw6vD2z3JeEdIlc4oK3I4Nb6Xwv1Ov1OfOIkdsYNCIljvKzXl0/F3yNuqoHwDfOA+1il4YBoHQuSpfiq3ujX/8tLkJ3SWKjjGUzbwNvXjKGp3+M7/xfiKDVw/6SEgDL6WvBmg6VDpsbwvjk+ejh4YweroCUlqgGrcxFtKBxU0pA8L8G3+cwUjm8OW+Zb38Dsp88fliY4FXsupQvKeF+bOxjLbZ6eZwJ5JMUUogzq9uVQiiFukv20npdSdwT1kCucEKPcGV1ibrMiH68tP+BWzET5hbUEQyLI82VasxyscKNdAZQ3w3dYRuFrrhbFxbdbRujR8dxbY9PBP03SIxpoNOjzJWEa/D13MaUuVIv057OTu6NT/6cdvaywxKnN/KxIu4VRZA+Jn0pj3KqdoVQWldXRUB1uQamyUgnqvEOpA7SFLEGK+/EZy9CIN/x7z8Pf/o7jik+bc9O7p49gYqRCcQSvGJqrX0aixcMRmKtRgK8QgOVa6pE4FpfCS52D5qET7MW3zTgjgENReB6gBWBFkJNl/aRw3AQbNhGEsQ28YRtRMMJgLr5aKZEgDRrMFoEppaUEKyNAYL6q7QDHcVQGYHzuYc2UT3zYqtmO1RKcHTRYdT5HBjFWwPgZq8XzVpMSUxABCUmCidhZqR4aC5mpJtzo1NmIVZU/TNifDgsRMyqdUYulvWFTCT1MPee1swpdp7A9KlZK+gDmoEOJEJcTG6btmHV4itmUscsEniWEwS2kandKkgpVeuerusNtFavvxbhEPKz7SMJeASBRAPRztOfC9OSS03lRNwOBAtVTERIb8IGqictJfy8Meu+F93LGuitet2/mXou9/t66tnDskvBb2o1OQjSjix0K9kBC0a8lkaQBJ21wSDs3igHRtWIM6Av9dZngeDwDhGZt5MByEBWFm0DXhHiWmjV4NGScChRj+hkrbal2AuIBCO2kZS1kteGmDubas1KYhsYgxcal4r4" />
--- a/web/src/pages/Doc/zh/course4/index.vue
+++ b/web/src/pages/Doc/zh/course4/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <h1>设置节点样式</h1>
+<p>本节将介绍如何更新当前激活节点的样式。</p>
+<p>样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是<code>setStyle</code>方法，通过第三个参数进行指定：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 设置常态样式</span>
+node.setStyle(<span class="hljs-string">&#x27;样式属性&#x27;</span>, <span class="hljs-string">&#x27;样式值&#x27;</span>)
+
+<span class="hljs-comment">// 设置激活样式</span>
+node.setStyle(<span class="hljs-string">&#x27;样式属性&#x27;</span>, <span class="hljs-string">&#x27;样式值&#x27;</span>, <span class="hljs-literal">true</span>)
+</code></pre>
+<h2>设置常态样式</h2>
+<h3>设置文字样式</h3>
+<p>文字样式目前支持：<code>字体</code>、<code>字号</code>、<code>行高</code>、<code>颜色</code>、<code>加粗</code>、<code>斜体</code>、<code>划线</code>。</p>
+<p>这些样式选择的UI界面都需要你自行开发，然后调用节点的<code>setStyle</code>方法更新。</p>
+<p>同样首先需要监听节点的激活事件来换取当前激活的节点：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> activeNodes = shallowRef([])
+mindMap.on(<span class="hljs-string">&#x27;node_active&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">node, activeNodeList</span>) =&gt;</span> {
+    activeNodes.value = activeNodeList
+})
+</code></pre>
+<pre class="hljs"><code><span class="hljs-comment">// 设置字体</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;fontFamily&#x27;</span>, <span class="hljs-string">&#x27;宋体, SimSun, Songti SC&#x27;</span>)
+})
+
+<span class="hljs-comment">// 设置字号</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;fontSize&#x27;</span>, <span class="hljs-number">16</span>)
+})
+
+<span class="hljs-comment">// 设置行高</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;lineHeight&#x27;</span>, <span class="hljs-number">1.5</span>)
+})
+
+<span class="hljs-comment">// 设置颜色</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;color&#x27;</span>, <span class="hljs-string">&#x27;#fff&#x27;</span>)
+})
+
+<span class="hljs-comment">// 设置加粗</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;fontWeight&#x27;</span>, <span class="hljs-string">&#x27;bold&#x27;</span>)<span class="hljs-comment">// node.setStyle(&#x27;fontWeight&#x27;, &#x27;normal&#x27;)</span>
+})
+
+<span class="hljs-comment">// 设置划线</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    <span class="hljs-comment">// 下划线</span>
+    node.setStyle(<span class="hljs-string">&#x27;textDecoration&#x27;</span>, <span class="hljs-string">&#x27;underline&#x27;</span>)
+    <span class="hljs-comment">// 删除线</span>
+    node.setStyle(<span class="hljs-string">&#x27;textDecoration&#x27;</span>, <span class="hljs-string">&#x27;line-through&#x27;</span>)
+    <span class="hljs-comment">// 上划线</span>
+    node.setStyle(<span class="hljs-string">&#x27;textDecoration&#x27;</span>, <span class="hljs-string">&#x27;overline&#x27;</span>)
+})
+</code></pre>
+<h3>设置边框样式</h3>
+<p>边框样式支持设置：<code>颜色</code>、<code>虚线</code>、<code>线宽</code>、<code>圆角</code>。</p>
+<p>设置边框样式前请先检查线宽是否被设置成了0。</p>
+<pre class="hljs"><code><span class="hljs-comment">// 设置边框颜色</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderColor&#x27;</span>, <span class="hljs-string">&#x27;#000&#x27;</span>)
+})
+
+<span class="hljs-comment">// 设置边框虚线</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderDasharray&#x27;</span>, <span class="hljs-string">&#x27;5,5&#x27;</span>)<span class="hljs-comment">// node.setStyle(&#x27;borderDasharray&#x27;, &#x27;none&#x27;)</span>
+})
+
+<span class="hljs-comment">// 设置边框宽度</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderWidth&#x27;</span>, <span class="hljs-number">2</span>)
+})
+
+<span class="hljs-comment">// 设置边框圆角</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderRadius&#x27;</span>, <span class="hljs-number">5</span>)
+})
+</code></pre>
+<h3>设置背景样式</h3>
+<p>背景样式也就是背景颜色。</p>
+<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;fillColor&#x27;</span>, <span class="hljs-string">&#x27;#fff&#x27;</span>)
+})
+</code></pre>
+<h3>设置形状样式</h3>
+<p>目前支持以下形状：</p>
+<pre class="hljs"><code>[
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;矩形&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;rectangle&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;菱形&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;diamond&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;平行四边形&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;parallelogram&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;圆角矩形&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;roundedRectangle&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;八角矩形&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;octagonalRectangle&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;外三角矩形&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;outerTriangularRectangle&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;内三角矩形&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;innerTriangularRectangle&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;椭圆&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;ellipse&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;圆&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;circle&#x27;</span>
+  }
+]
+</code></pre>
+<p>设置形状前请先确认边框宽度是否被设置成了0。</p>
+<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;shape&#x27;</span>, <span class="hljs-string">&#x27;circle&#x27;</span>)
+})
+</code></pre>
+<h3>设置线条样式</h3>
+<p>节点线条支持设置：<code>颜色</code>、<code>虚线</code>、<code>线宽</code>。</p>
+<pre class="hljs"><code><span class="hljs-comment">// 设置线条颜色</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;lineColor&#x27;</span>, <span class="hljs-string">&#x27;#000&#x27;</span>)
+})
+
+<span class="hljs-comment">// 设置线条虚线</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;lineDasharray&#x27;</span>, <span class="hljs-string">&#x27;5, 5, 1, 5&#x27;</span>)<span class="hljs-comment">// node.setStyle(&#x27;lineDasharray&#x27;, &#x27;none&#x27;)</span>
+})
+
+<span class="hljs-comment">// 设置线条宽度</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;lineWidth&#x27;</span>, <span class="hljs-number">3</span>)
+})
+</code></pre>
+<h3>设置节点内边距</h3>
+<p>节点内边距支持设置水平和垂直方向的内边距。</p>
+<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;paddingX&#x27;</span>, <span class="hljs-number">50</span>)
+    node.setStyle(<span class="hljs-string">&#x27;paddingY&#x27;</span>, <span class="hljs-number">50</span>)
+})
+</code></pre>
+<h2>设置激活样式</h2>
+<p>激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { supportActiveStyle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/themes/default&#x27;</span>
+
+<span class="hljs-keyword">const</span> checkIsSupportActive = <span class="hljs-function">(<span class="hljs-params">prop</span>) =&gt;</span> {
+    <span class="hljs-keyword">return</span> supportActiveStyle.includes(prop)
+}
+</code></pre>
+<p>其他和数值常态样式是一样的，只需要给<code>setStyle</code>方法传入第三个参数：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 设置边框颜色</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderColor&#x27;</span>, <span class="hljs-string">&#x27;#000&#x27;</span>, <span class="hljs-literal">true</span>)
+})
+
+<span class="hljs-comment">// 设置边框虚线</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderDasharray&#x27;</span>, <span class="hljs-string">&#x27;5,5&#x27;</span>, <span class="hljs-literal">true</span>)<span class="hljs-comment">// node.setStyle(&#x27;borderDasharray&#x27;, &#x27;none&#x27;, true)</span>
+})
+
+<span class="hljs-comment">// 设置边框宽度</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderWidth&#x27;</span>, <span class="hljs-number">2</span>, <span class="hljs-literal">true</span>)
+})
+
+<span class="hljs-comment">// 设置边框圆角</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;borderRadius&#x27;</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">true</span>)
+})
+
+<span class="hljs-comment">// 设置背景颜色</span>
+activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
+    node.setStyle(<span class="hljs-string">&#x27;fillColor&#x27;</span>, <span class="hljs-string">&#x27;#fff&#x27;</span>, <span class="hljs-literal">true</span>)
+})
+</code></pre>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV91uG0UUfpXRVmgd5KwdIFwYJypNikBqUBUjFdSt0Hh3bA/MzqxmZ52GyBIqUKAtAlSJClClhhu4gHCDqJI27cvEP4/RM/tfex35wlKj2N6Z+b5zzsz55szsgfGu71v9kBgNoxk4kvoKBUSF/qbNqecLqdABkqRTRYLviJAr4lZR0MOMib1d0kED1JHCQyZYMDPGDuXuDvbjIdsIoJuRVQ96Vz3s24bNEbI5IwrpPo3cQDxkzOY2r9XQ8PT+8PsfRs+/HP33ZPzb15M7t8a3joffPZgc/mVzR/BAIewo2icfCpcEwM3jqVy/sZJYmRw9G58ejX75dvjPg9Gjx8OnP6ZkmN9H5KZqqX1GgF1ZQRub6EAHVTBr9TELidUR8jJ2ehUOfRkMId20wE5ko2J2BFfvYY+yfbOKzOHR3bPT+1XUol4r5PAreFdR1NoyIbY57Bb9ggB37e1yCKOcvE9ot6c0yFovRzmCCakjkMQ9x9e11JDZFmweUMEKbRNHSKyo4BqsY1hVPSnCbk+TbDWA78FLyz15djw6vD2z3JeEdIlc4oK3I4Nb6Xwv1Ov1OfOIkdsYNCIljvKzXl0/F3yNuqoHwDfOA+1il4YBoHQuSpfiq3ujX/8tLkJ3SWKjjGUzbwNvXjKGp3+M7/xfiKDVw/6SEgDL6WvBmg6VDpsbwvjk+ejh4YweroCUlqgGrcxFtKBxU0pA8L8G3+cwUjm8OW+Zb38Dsp88fliY4FXsupQvKeF+bOxjLbZ6eZwJ5JMUUogzq9uVQiiFukv20npdSdwT1kCucEKPcGV1ibrMiH68tP+BWzET5hbUEQyLI82VasxyscKNdAZQ3w3dYRuFrrhbFxbdbRujR8dxbY9PBP03SIxpoNOjzJWEa/D13MaUuVIv057OTu6NT/6cdvaywxKnN/KxIu4VRZA+Jn0pj3KqdoVQWldXRUB1uQamyUgnqvEOpA7SFLEGK+/EZy9CIN/x7z8Pf/o7jik+bc9O7p49gYqRCcQSvGJqrX0aixcMRmKtRgK8QgOVa6pE4FpfCS52D5qET7MW3zTgjgENReB6gBWBFkJNl/aRw3AQbNhGEsQ28YRtRMMJgLr5aKZEgDRrMFoEppaUEKyNAYL6q7QDHcVQGYHzuYc2UT3zYqtmO1RKcHTRYdT5HBjFWwPgZq8XzVpMSUxABCUmCidhZqR4aC5mpJtzo1NmIVZU/TNifDgsRMyqdUYulvWFTCT1MPee1swpdp7A9KlZK+gDmoEOJEJcTG6btmHV4itmUscsEniWEwS2kandKkgpVeuerusNtFavvxbhEPKz7SMJeASBRAPRztOfC9OSS03lRNwOBAtVTERIb8IGqictJfy8Meu+F93LGuitet2/mXou9/t66tnDskvBb2o1OQjSjix0K9kBC0a8lkaQBJ21wSDs3igHRtWIM6Av9dZngeDwDhGZt5MByEBWFm0DXhHiWmjV4NGScChRj+hkrbal2AuIBCO2kZS1kteGmDubas1KYhsYgxcal4r4" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course5/index.md
+++ b/web/src/pages/Doc/zh/course5/index.md
@@ -0,0 +1,219 @@
+# 设置基础样式
+
+基础样式修改的其实是主题配置，所以会通过`setThemeConfig`方法设置。
+
+## 设置背景
+
+画布背景可以设置颜色或图片。
+
+### 设置画布背景颜色
+
+```js
+mindMap.setThemeConfig({
+    backgroundColor: '#A4DD00'
+})
+```
+
+### 设置背景图片
+
+背景图片还支持设置三个属性：`图片重复`、`图片位置`、`图片大小`。其实就是`css`的`background-repeat`、`background-position`、`background-size`三个属性。
+
+不过导出为图片的时候背景图片的行为和`css`并不完全一致，因为导出是通过`canvas`实现的，而`canvas`并不存在这三个属性，所以是通过有限模拟`css`这三个属性行为实现的，详情可以阅读文章[如何在canvas中模拟css的背景图片样式](https://juejin.cn/post/7204854015463538744)。
+
+```js
+mindMap.setThemeConfig({
+    backgroundImage: 'xxx.png',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center center',
+    backgroundSize: 'cover'
+})
+```
+
+`backgroundRepeat`支持设置的值如下：
+
+```js
+[
+  {
+    name: '不重复',
+    value: 'no-repeat'
+  },
+  {
+    name: '重复',
+    value: 'repeat'
+  },
+  {
+    name: '水平方向重复',
+    value: 'repeat-x'
+  },
+  {
+    name: '垂直方向重复',
+    value: 'repeat-y'
+  }
+]
+```
+
+`backgroundPosition`支持设置的值如下：
+
+```js
+[
+  {
+    name: '默认',
+    value: '0% 0%'
+  },
+  {
+    name: '左上',
+    value: 'left top'
+  },
+  {
+    name: '左中',
+    value: 'left center'
+  },
+  {
+    name: '左下',
+    value: 'left bottom'
+  },
+  {
+    name: '右上',
+    value: 'right top'
+  },
+  {
+    name: '右中',
+    value: 'right center'
+  },
+  {
+    name: '右下',
+    value: 'right bottom'
+  },
+  {
+    name: '中上',
+    value: 'center top'
+  },
+  {
+    name: '居中',
+    value: 'center center'
+  },
+  {
+    name: '中下',
+    value: 'center bottom'
+  }
+]
+```
+
+`backgroundSize`支持设置的值如下：
+
+```js
+[
+  {
+    name: '自动',
+    value: 'auto'
+  },
+  {
+    name: '覆盖',
+    value: 'cover'
+  },
+  {
+    name: '保持',
+    value: 'contain'
+  }
+]
+```
+
+## 设置连线样式
+
+设置节点间的连线样式，支持：`颜色`、`粗细`、`虚线`、`风格`。
+
+目前支持三种连线风格，分别是：曲线（curve）、直线（straight）、直连（direct），其中曲线只在`logicalStructure`逻辑结构图和`mindMap`思维导图两种结构时生效。
+
+```js
+mindMap.setThemeConfig({
+    lineColor: '#009CE0',
+    lineWidth: 3,
+    lineDasharray: '15, 10, 5, 10, 15',
+    lineStyle: 'curve'
+})
+```
+
+## 设置概要的连线样式
+
+概要节点前面会有一条弧线，它的颜色和粗细可以修改。
+
+```js
+mindMap.setThemeConfig({
+    generalizationLineColor: '#FA28FF',
+    generalizationLineWidth: 4
+})
+```
+
+## 设置关联线的样式
+
+> 关联线需要使用关联线插件
+
+关联线支持设置颜色和粗细，因为它还可以被激活选中，所以还可以设置激活时的颜色和粗细。
+
+```js
+mindMap.setThemeConfig({
+    associativeLineColor: '#FA28FF',
+    associativeLineWidth: 4,
+    associativeLineActiveColor: '#9F0500',
+    associativeLineActiveWidth: 6
+})
+```
+
+## 设置节点边框风格
+
+默认节点的边框时封闭图形，不过也提供了一种只有底边边框的风格。
+
+```js
+mindMap.setThemeConfig({
+    nodeUseLineStyle: true
+})
+```
+
+## 设置节点内边距
+
+```js
+mindMap.setThemeConfig({
+    paddingX: 30,
+    paddingY: 20
+})
+```
+
+## 设置节点内的图片最大的显示宽高
+
+```js
+mindMap.setThemeConfig({
+    imgMaxWidth: 100,
+    imgMaxHeight: 50
+})
+```
+
+## 设置节点内图标的显示大小
+
+```js
+mindMap.setThemeConfig({
+    iconSize: 30,
+})
+```
+
+## 设置节点外边距
+
+设置节点外边距稍微麻烦一点，需要针对不同层级的节点进行设置。
+
+```js
+mindMap.setThemeConfig({
+    // 二级节点样式
+    second: {
+        marginX: 30,
+        marginY: 20
+    },
+    // 三级及以下节点样式
+    node: {
+        marginX: 40,
+        marginY: 30
+    }
+})
+```
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNq1WAtvE0cQ/iurQ8hOsc92EofgJoiQEIpEWgRUEOUidL5b2xfOt+ZunThEkYCWR3iUVqUtLbRKaQpIraBqq0ISkvyZ+JF/0dm9p31OsKM2UuS7nZlvvp3dnZ25BWGkVBJny1jICEOWYmoliixMy6WjkqEVS8SkaAGZOBdDxJggZYNiNYasgqzrZO4szqFFlDNJEUUAIeJZTGiGOiGXbJEkWDCs43gRRuNFuSQJkoGQZOiYIjbGNIeRUdZ1yZCMRAJVN76uLj2obV2r/b1e/+Hzxt0b9Rur1TvfNX5+KRkKMSyKZIVqs/hjomILbH0+0anpHgel8WqzvvGq8dn92vevd549bSz96RrD/I7nR4lOTLCN9qDho2iBUXLIiCA/X8BFPEqMnJaPchlCWVm5nDchBCo3zaDIgZH+sbFkEuYt0UVwu9jseeun+tpWbflN9d3DJs+ninIe788zNwXPBUpLViaR0CtXDGveEollxRUjnsXajGbkRVnX5suGYokKKSZkC1CtRC+eHEwPjqSKRJwp4Xwk1op9FpewTAHcIHGTP4d1zhBLoxoxQEvBsBdMZP+ENc9pVxlRhcyCtKsAndYMfI7O612FSAcjb1mSySOjJ5IuJya6oKm0kEF9gaExGXaNacrzYJFKx1AqGUPOTyrNbJspV+/crj14ZlPe+eWL2vI7ewMrZdMjfMpQcQVYJ20R88LHT2sws2E0FQHlWRyJoYhFTVnLFyDCKKJqJlZoZNoLwZxGlcK+o8CNMs3Op6IhmocO9aCDqA+8IhRemtrzG43n19nZa7dGnOBJeV8U89jAJuzPqzLbRwzCW7bxkd7B8XF32cKKziL2t99N1Zt/Na4/ArLAuh3fEWtffOH0EEUDDrMQyV3Jtmi5TNtLR3ju8pCOjCfTkET20nXwBlpnvr2xVX/0srr2TWNz1d2U9pzLFk+O+5qyAYafWr5tBlGzjHc5w3ZuvnUTGDTe/Bg4xsz9GVlVIR9147xkm1yEw5p0QuIMTWZQL5ysPVnA2lefbNaXbteeXquuvGBb4fFmfWWt+mpj57fHLex4MmV5qht+WjE/IVecBUm7FO3RjzA702z4PTSBY235ts9u5UX1j2AK5OzgrWtyjo0TvD04rHzbdsEmZDOvGd24ZLtw7X597YUN7J48JrIwYKsZG8X+K3L84OL6o876soFFR8jA3y4BePXh3e31X7ff3gt7Ybu1vY/+tj76XB9N8fGKm2h45qw4wXNuUeNOHOsZpBKlXIQLUMxjekKH2Bj0+PwpNRpxLCFUVIZjZEZ6HCqqTOUAW0lgA5KQCfCXBIorFMYkoba8ak9YErypuLFhikpB01UTG6A85QMEsNp7aPESXL+AI1evORGHkZoZ84sjhOKTDr/tNo3QVPaaTguN6p1btUevt9+u7zx7HCJj67KzArpwK5dMjZganb+UikyHVJu5hvnyC3R39f9xAi03xXnY4FDn8RgKAwNKti8n4/jhVB+O9/cmU/Fsr9wXHxzoT6bUgb5cNj0oCeHZ7orLdrJJ9E9yOVZMMidTC5JQgYd4bzomCfPwlFyMOWOBoemWAHUf0eBrQBaE+Y93vKZyrc6CGLZm1wrbWZLQTZl+Ra8kKoXekYuXj1cmi+mZkzidGzs8dmHSHE1nxZKR380VS/jMXZutNseuKSZLJYO50BUX+H3lyAMJiEJi7PjABpfEfXTGXDPN0OhZQuySwOsgpiI6zvEK2OkhnFr0Q7s75Nm//uSr6pe/O0mf94Pba/e21/8J3kvEiELLouJLdk8IgFH2GuM3A6t+/YQO5ZXfN4qzsl5m16ur55XC8D+UsHth6ILhhWJoYGWK4Q2hIVWbRYoOx2RYEhwSY7hIJIGLHQVN9aXeNQAqQwmQBhVdJEqInpWZii2U6FC2TCkx0DFF15TLoOL3raAVbm+HEraBAwD4bQF42dMCYBdNHQF4ZaEPEegROoBobm8AJdxadYoS6EE8Nm1bl04BA02CBxhuLN6P1lp+A1i4Vu8o3IEy2g94c9HdMY5X8LYi8dW3a+TOwZxaM4wFpW2XWHbZ2Yrk1qgtMP4Jcp+GEoEDCq8WCznXOOZ8kJIEMWF/hXKqOBFbRVGx4Cbz0o0YOMtuuuAJlKfHg1wPmhEvf5kYPEIy4QKe+tj/gdYz70L5hnLWInqZ2obQtEMWzKCk80ZJyX8Ju7dTNqttk6WK67m93w9cz3bp66M6/ZQ74FEXnRTUIeOUy8Ah7b0DIKRPvgZCDO4otgLsu584YxEDPjNyeHZ5MQGrJVyHkgBfEe2bU0zAo2hCSa4VMVuseNYkcxY2AcS7CNt8WbRtw0vNrBxui8Liv2HIkPI=" />
--- a/web/src/pages/Doc/zh/course5/index.vue
+++ b/web/src/pages/Doc/zh/course5/index.vue
@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <h1>设置基础样式</h1>
+<p>基础样式修改的其实是主题配置，所以会通过<code>setThemeConfig</code>方法设置。</p>
+<h2>设置背景</h2>
+<p>画布背景可以设置颜色或图片。</p>
+<h3>设置画布背景颜色</h3>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">&#x27;#A4DD00&#x27;</span>
+})
+</code></pre>
+<h3>设置背景图片</h3>
+<p>背景图片还支持设置三个属性：<code>图片重复</code>、<code>图片位置</code>、<code>图片大小</code>。其实就是<code>css</code>的<code>background-repeat</code>、<code>background-position</code>、<code>background-size</code>三个属性。</p>
+<p>不过导出为图片的时候背景图片的行为和<code>css</code>并不完全一致，因为导出是通过<code>canvas</code>实现的，而<code>canvas</code>并不存在这三个属性，所以是通过有限模拟<code>css</code>这三个属性行为实现的，详情可以阅读文章<a href="https://juejin.cn/post/7204854015463538744">如何在canvas中模拟css的背景图片样式</a>。</p>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">backgroundImage</span>: <span class="hljs-string">&#x27;xxx.png&#x27;</span>,
+    <span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">&#x27;no-repeat&#x27;</span>,
+    <span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">&#x27;center center&#x27;</span>,
+    <span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">&#x27;cover&#x27;</span>
+})
+</code></pre>
+<p><code>backgroundRepeat</code>支持设置的值如下：</p>
+<pre class="hljs"><code>[
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;不重复&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;no-repeat&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;重复&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;repeat&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;水平方向重复&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;repeat-x&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;垂直方向重复&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;repeat-y&#x27;</span>
+  }
+]
+</code></pre>
+<p><code>backgroundPosition</code>支持设置的值如下：</p>
+<pre class="hljs"><code>[
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;默认&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;0% 0%&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;左上&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;left top&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;左中&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;left center&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;左下&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;left bottom&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;右上&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;right top&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;右中&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;right center&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;右下&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;right bottom&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;中上&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;center top&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;居中&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;center center&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;中下&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;center bottom&#x27;</span>
+  }
+]
+</code></pre>
+<p><code>backgroundSize</code>支持设置的值如下：</p>
+<pre class="hljs"><code>[
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;自动&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;auto&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;覆盖&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;cover&#x27;</span>
+  },
+  {
+    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;保持&#x27;</span>,
+    <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;contain&#x27;</span>
+  }
+]
+</code></pre>
+<h2>设置连线样式</h2>
+<p>设置节点间的连线样式，支持：<code>颜色</code>、<code>粗细</code>、<code>虚线</code>、<code>风格</code>。</p>
+<p>目前支持三种连线风格，分别是：曲线（curve）、直线（straight）、直连（direct），其中曲线只在<code>logicalStructure</code>逻辑结构图和<code>mindMap</code>思维导图两种结构时生效。</p>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">lineColor</span>: <span class="hljs-string">&#x27;#009CE0&#x27;</span>,
+    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">3</span>,
+    <span class="hljs-attr">lineDasharray</span>: <span class="hljs-string">&#x27;15, 10, 5, 10, 15&#x27;</span>,
+    <span class="hljs-attr">lineStyle</span>: <span class="hljs-string">&#x27;curve&#x27;</span>
+})
+</code></pre>
+<h2>设置概要的连线样式</h2>
+<p>概要节点前面会有一条弧线，它的颜色和粗细可以修改。</p>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">generalizationLineColor</span>: <span class="hljs-string">&#x27;#FA28FF&#x27;</span>,
+    <span class="hljs-attr">generalizationLineWidth</span>: <span class="hljs-number">4</span>
+})
+</code></pre>
+<h2>设置关联线的样式</h2>
+<blockquote>
+<p>关联线需要使用关联线插件</p>
+</blockquote>
+<p>关联线支持设置颜色和粗细，因为它还可以被激活选中，所以还可以设置激活时的颜色和粗细。</p>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">associativeLineColor</span>: <span class="hljs-string">&#x27;#FA28FF&#x27;</span>,
+    <span class="hljs-attr">associativeLineWidth</span>: <span class="hljs-number">4</span>,
+    <span class="hljs-attr">associativeLineActiveColor</span>: <span class="hljs-string">&#x27;#9F0500&#x27;</span>,
+    <span class="hljs-attr">associativeLineActiveWidth</span>: <span class="hljs-number">6</span>
+})
+</code></pre>
+<h2>设置节点边框风格</h2>
+<p>默认节点的边框时封闭图形，不过也提供了一种只有底边边框的风格。</p>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">nodeUseLineStyle</span>: <span class="hljs-literal">true</span>
+})
+</code></pre>
+<h2>设置节点内边距</h2>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">paddingX</span>: <span class="hljs-number">30</span>,
+    <span class="hljs-attr">paddingY</span>: <span class="hljs-number">20</span>
+})
+</code></pre>
+<h2>设置节点内的图片最大的显示宽高</h2>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">imgMaxWidth</span>: <span class="hljs-number">100</span>,
+    <span class="hljs-attr">imgMaxHeight</span>: <span class="hljs-number">50</span>
+})
+</code></pre>
+<h2>设置节点内图标的显示大小</h2>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-attr">iconSize</span>: <span class="hljs-number">30</span>,
+})
+</code></pre>
+<h2>设置节点外边距</h2>
+<p>设置节点外边距稍微麻烦一点，需要针对不同层级的节点进行设置。</p>
+<pre class="hljs"><code>mindMap.setThemeConfig({
+    <span class="hljs-comment">// 二级节点样式</span>
+    <span class="hljs-attr">second</span>: {
+        <span class="hljs-attr">marginX</span>: <span class="hljs-number">30</span>,
+        <span class="hljs-attr">marginY</span>: <span class="hljs-number">20</span>
+    },
+    <span class="hljs-comment">// 三级及以下节点样式</span>
+    <span class="hljs-attr">node</span>: {
+        <span class="hljs-attr">marginX</span>: <span class="hljs-number">40</span>,
+        <span class="hljs-attr">marginY</span>: <span class="hljs-number">30</span>
+    }
+})
+</code></pre>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNq1WAtvE0cQ/iurQ8hOsc92EofgJoiQEIpEWgRUEOUidL5b2xfOt+ZunThEkYCWR3iUVqUtLbRKaQpIraBqq0ISkvyZ+JF/0dm9p31OsKM2UuS7nZlvvp3dnZ25BWGkVBJny1jICEOWYmoliixMy6WjkqEVS8SkaAGZOBdDxJggZYNiNYasgqzrZO4szqFFlDNJEUUAIeJZTGiGOiGXbJEkWDCs43gRRuNFuSQJkoGQZOiYIjbGNIeRUdZ1yZCMRAJVN76uLj2obV2r/b1e/+Hzxt0b9Rur1TvfNX5+KRkKMSyKZIVqs/hjomILbH0+0anpHgel8WqzvvGq8dn92vevd549bSz96RrD/I7nR4lOTLCN9qDho2iBUXLIiCA/X8BFPEqMnJaPchlCWVm5nDchBCo3zaDIgZH+sbFkEuYt0UVwu9jseeun+tpWbflN9d3DJs+ninIe788zNwXPBUpLViaR0CtXDGveEollxRUjnsXajGbkRVnX5suGYokKKSZkC1CtRC+eHEwPjqSKRJwp4Xwk1op9FpewTAHcIHGTP4d1zhBLoxoxQEvBsBdMZP+ENc9pVxlRhcyCtKsAndYMfI7O612FSAcjb1mSySOjJ5IuJya6oKm0kEF9gaExGXaNacrzYJFKx1AqGUPOTyrNbJspV+/crj14ZlPe+eWL2vI7ewMrZdMjfMpQcQVYJ20R88LHT2sws2E0FQHlWRyJoYhFTVnLFyDCKKJqJlZoZNoLwZxGlcK+o8CNMs3Op6IhmocO9aCDqA+8IhRemtrzG43n19nZa7dGnOBJeV8U89jAJuzPqzLbRwzCW7bxkd7B8XF32cKKziL2t99N1Zt/Na4/ArLAuh3fEWtffOH0EEUDDrMQyV3Jtmi5TNtLR3ju8pCOjCfTkET20nXwBlpnvr2xVX/0srr2TWNz1d2U9pzLFk+O+5qyAYafWr5tBlGzjHc5w3ZuvnUTGDTe/Bg4xsz9GVlVIR9147xkm1yEw5p0QuIMTWZQL5ysPVnA2lefbNaXbteeXquuvGBb4fFmfWWt+mpj57fHLex4MmV5qht+WjE/IVecBUm7FO3RjzA702z4PTSBY235ts9u5UX1j2AK5OzgrWtyjo0TvD04rHzbdsEmZDOvGd24ZLtw7X597YUN7J48JrIwYKsZG8X+K3L84OL6o876soFFR8jA3y4BePXh3e31X7ff3gt7Ybu1vY/+tj76XB9N8fGKm2h45qw4wXNuUeNOHOsZpBKlXIQLUMxjekKH2Bj0+PwpNRpxLCFUVIZjZEZ6HCqqTOUAW0lgA5KQCfCXBIorFMYkoba8ak9YErypuLFhikpB01UTG6A85QMEsNp7aPESXL+AI1evORGHkZoZ84sjhOKTDr/tNo3QVPaaTguN6p1btUevt9+u7zx7HCJj67KzArpwK5dMjZganb+UikyHVJu5hvnyC3R39f9xAi03xXnY4FDn8RgKAwNKti8n4/jhVB+O9/cmU/Fsr9wXHxzoT6bUgb5cNj0oCeHZ7orLdrJJ9E9yOVZMMidTC5JQgYd4bzomCfPwlFyMOWOBoemWAHUf0eBrQBaE+Y93vKZyrc6CGLZm1wrbWZLQTZl+Ra8kKoXekYuXj1cmi+mZkzidGzs8dmHSHE1nxZKR380VS/jMXZutNseuKSZLJYO50BUX+H3lyAMJiEJi7PjABpfEfXTGXDPN0OhZQuySwOsgpiI6zvEK2OkhnFr0Q7s75Nm//uSr6pe/O0mf94Pba/e21/8J3kvEiELLouJLdk8IgFH2GuM3A6t+/YQO5ZXfN4qzsl5m16ur55XC8D+UsHth6ILhhWJoYGWK4Q2hIVWbRYoOx2RYEhwSY7hIJIGLHQVN9aXeNQAqQwmQBhVdJEqInpWZii2U6FC2TCkx0DFF15TLoOL3raAVbm+HEraBAwD4bQF42dMCYBdNHQF4ZaEPEegROoBobm8AJdxadYoS6EE8Nm1bl04BA02CBxhuLN6P1lp+A1i4Vu8o3IEy2g94c9HdMY5X8LYi8dW3a+TOwZxaM4wFpW2XWHbZ2Yrk1qgtMP4Jcp+GEoEDCq8WCznXOOZ8kJIEMWF/hXKqOBFbRVGx4Cbz0o0YOMtuuuAJlKfHg1wPmhEvf5kYPEIy4QKe+tj/gdYz70L5hnLWInqZ2obQtEMWzKCk80ZJyX8Ju7dTNqttk6WK67m93w9cz3bp66M6/ZQ74FEXnRTUIeOUy8Ah7b0DIKRPvgZCDO4otgLsu584YxEDPjNyeHZ5MQGrJVyHkgBfEe2bU0zAo2hCSa4VMVuseNYkcxY2AcS7CNt8WbRtw0vNrBxui8Liv2HIkPI=" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course6/index.md
+++ b/web/src/pages/Doc/zh/course6/index.md
@@ -0,0 +1,44 @@
+# 显示水印
+
+> 要使用水印需要注册水印插件
+
+`simple-mind-map`提供了水印的插件，使用非常简单，首先可以在实例化`simple-mind-map`时提供水印的选项配置来直接显示水印：
+
+```js
+new MindMap({
+    // ...
+    watermarkConfig: {
+        text: '水印文字',
+        lineSpacing: 100,
+        textSpacing: 100,
+        angle: 30,
+        textStyle: {
+            color: '#999',
+            opacity: 0.5,
+            fontSize: 14
+        }
+    }
+})
+```
+
+详细字段含义可以阅读【API】-【构造函数】-【实例化选项】小节。
+
+此外也可以动态更新水印，`watermarkConfig`的所有配置都可以修改，如果不想再显示水印将`text`传入空字符串即可。
+
+```js
+mindMap.watermark.updateWatermark({
+    text: '街角小林',
+    lineSpacing: 50,
+    textSpacing: 50,
+    angle: 45,
+    textStyle: {
+        color: '#73D8FF',
+        opacity: 1,
+        fontSize: 12
+    }
+})
+```
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVdtqG0cYfpVhQ1m5SLty49BalUPapoFCXUpy0YuMKavdkTTJ7Mx2Z9ayagQlFHoMPUEMDZTmKrlIwBcmEIeQl7FkP0b+2ZlZrQ4XuYtg7Zn/9P3nOfQ+ybJgvyBex+vKOKeZQpKoIruKOU0zkSt0iHLSbyLBd0XBFUmaSA4jxsToJumjCernIkU+WPArjV3Kk90oMyzsSSAz0kqB2kqjDHuYI4Q5IwppmpbcQbxgzNDDEE1f/TP95f7s9Q+zk5fn//548eu983svpj8fXTx6gnksuFQoihXdJ1+JhEjQnnvUuL23gXlpZfbwZPbgeHZ8Mr1/7NSKLIkU+Qa+PI3yu6Da2EA7V9GhxrbeBCPHDpbEG6UYQoocqA7yLx4dXTz+e3r8x+y/I79pWIxyciuLYsoHHXSlbalaYZUa8QEjHbR1pS6lxppmgfQvFkzkgHbpw8vXP7pxwwHpn9Am1biDNmvEvuDqFv0ejGx+YKgTSIiaQFr0gVeFbKyGrgtBRq6ALlzCOigRcZESroIBUZ8zoo+fjr9IGr7V/AxQI4g99zesL5C5qBYI9jQBewuxabKOWpOxN/v/hSm1aZHS9Sow7MVDypKccC18e25jydxalGWks9Pfz08fL4MtAq4B3Zvz6nLvyAN3tDSnRzlVN4VQeja+FpIqKjho+oz0ld9EfgylgzLtWfGq2aGCfQrtWXPb9rkZodmDn6bPqj5f6fXNtmvrlYZfZNmuv7wivtL5C92/vb1dx15o/3bgRmjNEGytpKz8N9n42OwbhGBXnD/8a/rnU1MOs3fOTn87e/m8vhYEb/gckvqt2T2Qy4a+NpH++yWVaj5OEOV8PwX7ESuIHi0rZ+BhHOHrhmbrwr6FiyKwKqEgcEOom9B9FLNIyh3sWSeuk1Rgr2RbAZrMudUQgkg3BG5d0FlSQrBepEUME6tur1BKcHQtZjS+CyJLaw9E67u0Gxp5Z7wCcqduWIsDrlJXtpS4Zl8I7AWheRbsqgmITINYSuxVVQlqIbusjmiihmVDvVfKIZRVHZ4TQIScl4yyxPq7tJwaZ2quGPWkYIUyitDVMCfQUvamRDa/rMIPCR0MQXyr3c4OHPJ63PcdMqR0QAHXWc2iJCnnxBAq1wNbqbf0eNN5YJ2u7mAQuqysgdf0TAX0QxzckYLDu1+ax5YBFahmEHvwrJt1FYRwDHJ4N2hKdLFavVyMJMnBCPbs8K156rXuUKlMdsKQHXzH5VgGQspWzFs9Qu9A2EHE6LjgsQxikYbQokTJNb2hYWwwE2/yBqzl3vI=" />
--- a/web/src/pages/Doc/zh/course6/index.vue
+++ b/web/src/pages/Doc/zh/course6/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <h1>显示水印</h1>
+<blockquote>
+<p>要使用水印需要注册水印插件</p>
+</blockquote>
+<p><code>simple-mind-map</code>提供了水印的插件，使用非常简单，首先可以在实例化<code>simple-mind-map</code>时提供水印的选项配置来直接显示水印：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-attr">watermarkConfig</span>: {
+        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;水印文字&#x27;</span>,
+        <span class="hljs-attr">lineSpacing</span>: <span class="hljs-number">100</span>,
+        <span class="hljs-attr">textSpacing</span>: <span class="hljs-number">100</span>,
+        <span class="hljs-attr">angle</span>: <span class="hljs-number">30</span>,
+        <span class="hljs-attr">textStyle</span>: {
+            <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#999&#x27;</span>,
+            <span class="hljs-attr">opacity</span>: <span class="hljs-number">0.5</span>,
+            <span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>
+        }
+    }
+})
+</code></pre>
+<p>详细字段含义可以阅读【API】-【构造函数】-【实例化选项】小节。</p>
+<p>此外也可以动态更新水印，<code>watermarkConfig</code>的所有配置都可以修改，如果不想再显示水印将<code>text</code>传入空字符串即可。</p>
+<pre class="hljs"><code>mindMap.watermark.updateWatermark({
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;街角小林&#x27;</span>,
+    <span class="hljs-attr">lineSpacing</span>: <span class="hljs-number">50</span>,
+    <span class="hljs-attr">textSpacing</span>: <span class="hljs-number">50</span>,
+    <span class="hljs-attr">angle</span>: <span class="hljs-number">45</span>,
+    <span class="hljs-attr">textStyle</span>: {
+        <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#73D8FF&#x27;</span>,
+        <span class="hljs-attr">opacity</span>: <span class="hljs-number">1</span>,
+        <span class="hljs-attr">fontSize</span>: <span class="hljs-number">12</span>
+    }
+})
+</code></pre>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVdtqG0cYfpVhQ1m5SLty49BalUPapoFCXUpy0YuMKavdkTTJ7Mx2Z9ayagQlFHoMPUEMDZTmKrlIwBcmEIeQl7FkP0b+2ZlZrQ4XuYtg7Zn/9P3nOfQ+ybJgvyBex+vKOKeZQpKoIruKOU0zkSt0iHLSbyLBd0XBFUmaSA4jxsToJumjCernIkU+WPArjV3Kk90oMyzsSSAz0kqB2kqjDHuYI4Q5IwppmpbcQbxgzNDDEE1f/TP95f7s9Q+zk5fn//548eu983svpj8fXTx6gnksuFQoihXdJ1+JhEjQnnvUuL23gXlpZfbwZPbgeHZ8Mr1/7NSKLIkU+Qa+PI3yu6Da2EA7V9GhxrbeBCPHDpbEG6UYQoocqA7yLx4dXTz+e3r8x+y/I79pWIxyciuLYsoHHXSlbalaYZUa8QEjHbR1pS6lxppmgfQvFkzkgHbpw8vXP7pxwwHpn9Am1biDNmvEvuDqFv0ejGx+YKgTSIiaQFr0gVeFbKyGrgtBRq6ALlzCOigRcZESroIBUZ8zoo+fjr9IGr7V/AxQI4g99zesL5C5qBYI9jQBewuxabKOWpOxN/v/hSm1aZHS9Sow7MVDypKccC18e25jydxalGWks9Pfz08fL4MtAq4B3Zvz6nLvyAN3tDSnRzlVN4VQeja+FpIqKjho+oz0ld9EfgylgzLtWfGq2aGCfQrtWXPb9rkZodmDn6bPqj5f6fXNtmvrlYZfZNmuv7wivtL5C92/vb1dx15o/3bgRmjNEGytpKz8N9n42OwbhGBXnD/8a/rnU1MOs3fOTn87e/m8vhYEb/gckvqt2T2Qy4a+NpH++yWVaj5OEOV8PwX7ESuIHi0rZ+BhHOHrhmbrwr6FiyKwKqEgcEOom9B9FLNIyh3sWSeuk1Rgr2RbAZrMudUQgkg3BG5d0FlSQrBepEUME6tur1BKcHQtZjS+CyJLaw9E67u0Gxp5Z7wCcqduWIsDrlJXtpS4Zl8I7AWheRbsqgmITINYSuxVVQlqIbusjmiihmVDvVfKIZRVHZ4TQIScl4yyxPq7tJwaZ2quGPWkYIUyitDVMCfQUvamRDa/rMIPCR0MQXyr3c4OHPJ63PcdMqR0QAHXWc2iJCnnxBAq1wNbqbf0eNN5YJ2u7mAQuqysgdf0TAX0QxzckYLDu1+ax5YBFahmEHvwrJt1FYRwDHJ4N2hKdLFavVyMJMnBCPbs8K156rXuUKlMdsKQHXzH5VgGQspWzFs9Qu9A2EHE6LjgsQxikYbQokTJNb2hYWwwE2/yBqzl3vI=" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course7/index.md
+++ b/web/src/pages/Doc/zh/course7/index.md
@@ -0,0 +1,30 @@
+# 开启节点自由拖拽
+
+节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化`simple-mind-map`时传入开启的选项：
+
+```js
+new MindMap({
+    // ...
+    enableFreeDrag: true
+})
+```
+
+也可以动态切换是否开启：
+
+```js
+mindMap.updateConfig({
+    enableFreeDrag: true// false
+})
+```
+
+自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：
+
+```js
+mindMap.execCommand('RESET_LAYOUT')
+```
+
+也可以使用快捷键`Ctrl + L`来恢复。
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVd1uG0UUfpVhEVoH2buuxJVxSksbJKSEolAuUDeqxrtje8rszLIzm8SyVgoF1EKIFASiFdxAVQFCQFWBEE2oeJmsnb4FZ3b2L44veldLa82c853znZnzM1PrchQ52wmxelZf+jGNFJJEJdFFj9MwErFCUxSTYRsJviESrkjQRnKMGRM7m2SIUjSMRYhs8GBXFhuUBxs4MirPkiBmpBOCtBPiyLM8jpDHGVFIyzRyFfGEMSN3XZQ9/Tr7/GD2397sr+P5d5+efnF7fvtJdvfe6Y+/eNwXXCqEfUW3yTsiIBKs64haN7ZWPF6iqLwWEf5WTMjVGI8ACEdpDTGTJAdpqrt3ZgcPZvcfZYc/Zf/uZYePTu/8Ov/m8Wz/29n+09KPEqMRIw0/rRW0ehFNdcRnOZxtzBICiJeWyTW+OLOTRAFW5IrgQzpq5Z4QIhwPap7eUt8QuEoh/LQ4wezjB9nDg2fH90//eJj980n2eK+MOiaQynU8EYk6G3IZAtkl/hURhpgHLXtz7b216zfXL39w7f3rdum/ynrrvLnOGtkps10dgfVQIPwkJFw5I6LWGNHLNydvA0dhCYdWmHIS2yttYwVXgXvGu/55lhZ4VkNkxIrsKi32rNkPT0xdmHrSv7RwpoH+mLIgJlyDb9Q+FtwtZVlkOjn6cn708yLZWcIlpFu1rol7QRGUy0JW2lFO1aYQSjfSu0JSRQUHS5uRobLbyPYhdZCmrQK+WJ95K2lVuvK66V6EoCTn33+VHf5m4jVdfHK0f3L8d7P2BG/ZHFhvmk4GspbetpH+X6dS1fWGmt1eNViJM/RQr/D1XTPDYHrBRhEYPNBjsEOoH9Bt5DMs5apnFUFcJaHwrFxdAGhQa6sqBUjfBW0TWHpSQrAB1hCj9FR/kCglOLrkM+p/mEOawwOQ0+niYHoD2dlnfz6793tz+NioB+JzM8lGadp3DUlBCjEtkjZ6HxjPz4gFD/X5ylXfbVwfbKWaMHOTl4ox71mOa2Z7MQIcIkPHl9KzqmJwGjddJnOHBmrcQxe63VdyHEJRVXkxAUZIda7Ii1Z/Ly9mpHRVG+KBFCxRxhAhXb891C12SkT15jz9mNDRGOCvdbvRbsm8nPfVkjnE8YgCb+k1wkFAObSEEVShO0WBPGfEF8oIiqCrPTiE4s5zYLUtkwH9mjq3pODweOfuvUIBGagmimfB22zGiOPC0olhntOQ6GR1BrHYkSQGJ55VtPiS91rbjpWKZM912e5HXE6kI6Ts+LwzIPQWHNvBjE4S7kvHF6ELnUGUXFIbmqY4TGql/wPpBfrv" />
--- a/web/src/pages/Doc/zh/course7/index.vue
+++ b/web/src/pages/Doc/zh/course7/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>开启节点自由拖拽</h1>
+<p>节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化<code>simple-mind-map</code>时传入开启的选项：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span>
+})
+</code></pre>
+<p>也可以动态切换是否开启：</p>
+<pre class="hljs"><code>mindMap.updateConfig({
+    <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// false</span>
+})
+</code></pre>
+<p>自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;RESET_LAYOUT&#x27;</span>)
+</code></pre>
+<p>也可以使用快捷键<code>Ctrl + L</code>来恢复。</p>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVd1uG0UUfpVhEVoH2buuxJVxSksbJKSEolAuUDeqxrtje8rszLIzm8SyVgoF1EKIFASiFdxAVQFCQFWBEE2oeJmsnb4FZ3b2L44veldLa82c853znZnzM1PrchQ52wmxelZf+jGNFJJEJdFFj9MwErFCUxSTYRsJviESrkjQRnKMGRM7m2SIUjSMRYhs8GBXFhuUBxs4MirPkiBmpBOCtBPiyLM8jpDHGVFIyzRyFfGEMSN3XZQ9/Tr7/GD2397sr+P5d5+efnF7fvtJdvfe6Y+/eNwXXCqEfUW3yTsiIBKs64haN7ZWPF6iqLwWEf5WTMjVGI8ACEdpDTGTJAdpqrt3ZgcPZvcfZYc/Zf/uZYePTu/8Ov/m8Wz/29n+09KPEqMRIw0/rRW0ehFNdcRnOZxtzBICiJeWyTW+OLOTRAFW5IrgQzpq5Z4QIhwPap7eUt8QuEoh/LQ4wezjB9nDg2fH90//eJj980n2eK+MOiaQynU8EYk6G3IZAtkl/hURhpgHLXtz7b216zfXL39w7f3rdum/ynrrvLnOGtkps10dgfVQIPwkJFw5I6LWGNHLNydvA0dhCYdWmHIS2yttYwVXgXvGu/55lhZ4VkNkxIrsKi32rNkPT0xdmHrSv7RwpoH+mLIgJlyDb9Q+FtwtZVlkOjn6cn708yLZWcIlpFu1rol7QRGUy0JW2lFO1aYQSjfSu0JSRQUHS5uRobLbyPYhdZCmrQK+WJ95K2lVuvK66V6EoCTn33+VHf5m4jVdfHK0f3L8d7P2BG/ZHFhvmk4GspbetpH+X6dS1fWGmt1eNViJM/RQr/D1XTPDYHrBRhEYPNBjsEOoH9Bt5DMs5apnFUFcJaHwrFxdAGhQa6sqBUjfBW0TWHpSQrAB1hCj9FR/kCglOLrkM+p/mEOawwOQ0+niYHoD2dlnfz6793tz+NioB+JzM8lGadp3DUlBCjEtkjZ6HxjPz4gFD/X5ylXfbVwfbKWaMHOTl4ox71mOa2Z7MQIcIkPHl9KzqmJwGjddJnOHBmrcQxe63VdyHEJRVXkxAUZIda7Ii1Z/Ly9mpHRVG+KBFCxRxhAhXb891C12SkT15jz9mNDRGOCvdbvRbsm8nPfVkjnE8YgCb+k1wkFAObSEEVShO0WBPGfEF8oIiqCrPTiE4s5zYLUtkwH9mjq3pODweOfuvUIBGagmimfB22zGiOPC0olhntOQ6GR1BrHYkSQGJ55VtPiS91rbjpWKZM912e5HXE6kI6Ts+LwzIPQWHNvBjE4S7kvHF6ELnUGUXFIbmqY4TGql/wPpBfrv" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course8/index.md
+++ b/web/src/pages/Doc/zh/course8/index.md
@@ -0,0 +1,20 @@
+# 开启节点富文本编辑
+
+默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情可以阅读[richText](https://wanglin2.github.io/mind-map/#/doc/zh/richText)。
+
+富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能一般都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读[如何渲染富文本的悬浮工具栏](https://wanglin2.github.io/mind-map/#/doc/zh/course16)。
+
+如果也你需要动态切换是否开启富文本编辑的功能可以参考如下代码：
+
+```js
+import MindMap from 'simple-mind-map'
+import RichText from 'simple-mind-map/src/RichText.js'
+
+// 动态开启富文本编辑
+mindMap.addPlugin(RichText)
+
+// 动态关闭富文本编辑
+mindMap.removePlugin(RichText)
+```
+
+如果你使用的是`simpleMindMap.umd.js`或`simpleMindMap.esm.js`这种打包后的完整版，那么是不支持切换的，默认是就是开启的，如有相关需求可以提[issue](https://github.com/wanglin2/mind-map/issues)。
--- a/web/src/pages/Doc/zh/course8/index.vue
+++ b/web/src/pages/Doc/zh/course8/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>开启节点富文本编辑</h1>
+<p>默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情可以阅读<a href="https://wanglin2.github.io/mind-map/#/doc/zh/richText">richText</a>。</p>
+<p>富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能一般都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course16">如何渲染富文本的悬浮工具栏</a>。</p>
+<p>如果也你需要动态切换是否开启富文本编辑的功能可以参考如下代码：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/RichText.js&#x27;</span>
+
+<span class="hljs-comment">// 动态开启富文本编辑</span>
+mindMap.addPlugin(RichText)
+
+<span class="hljs-comment">// 动态关闭富文本编辑</span>
+mindMap.removePlugin(RichText)
+</code></pre>
+<p>如果你使用的是<code>simpleMindMap.umd.js</code>或<code>simpleMindMap.esm.js</code>这种打包后的完整版，那么是不支持切换的，默认是就是开启的，如有相关需求可以提<a href="https://github.com/wanglin2/mind-map/issues">issue</a>。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course9/index.md
+++ b/web/src/pages/Doc/zh/course9/index.md
@@ -0,0 +1,37 @@
+# 修改鼠标滚轮的行为
+
+鼠标滚轮的行为支持放大缩小画布和上下移动画布，可以在实例化时通过配置指定：
+
+```js
+new MindMap({
+    // ...
+    mousewheelAction: 'zoom'// zoom（放大缩小）、move（上下移动）
+    // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+    mousewheelMoveStep: 100,
+})
+```
+
+如果需要动态的切换行为可以使用`updateConfig`方法：
+
+```js
+mindMap.updateConfig({
+    mousewheelAction: 'move'
+})
+```
+
+此外也支持让你自行处理鼠标滚轮事件：
+
+```js
+new MindMap({
+    // ...
+    customHandleMousewheel: (e) => {
+        // 你的自定义逻辑
+    }
+})
+```
+
+当传了`customHandleMousewheel`选项，`mousewheelAction`选项将不生效。
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVU+P20QU/ypPRshZlNipxCkkpeXPAYlFqNedFXLsSTJlPGM842SXyBKqkFpKK4FAQiqXLZcWCXFCiO628GU2yfIteOPxON6QAzciOZp57/fe7828P7P0bmdZMC+oN/CGKs5ZpkFRXWQ3iWBpJnMNS8jppAtSHMpCaJp0Qc0izuXiDp1ACZNcpuCjB7+xOGQiOYwyqyKeQjGnvRSlvTTKiEcEABGcajAygxyBKDi38jCE1avvVl89Xv/1xfq3i82TL68e3tvce7F68MPV0+dExFIoDVGs2Zx+JBOq0HobUefo+IAIh4qLPKdC30awFIjDk3T8z6VM/QpkqB7cXz/+6e+XZ+uz++uLJ1evfr16+ujyj3PnQcvplFM8uqKLGaW8cdU5gNFNWJqYr7EE84gXFAF7paMRWH54G/xUzqkPg1piPNX3ERRZEmn6rhQTNu1UHKjbiWGwjwFPpUs8W2mO16Ss0wq2deV04VLlOCgfQCLjIkW3wZTq9zk1y3dOP0g6fm2JUemICZr7B11rhbFGA+vd/IhnBMRriaxY0xNtxMRbn72wSbXFYH5l7cwA4xnjCR7NgI+2Pnbc7WXZZbo8f7Q5f7ZLdp1wD+nxVtfG/U8RuGUtc3ZMMH1HSm264GOpmK2KI5/Tifa74MeYOkzTcQUvD96y/QWAZb/58dvVN7/YoGyfXZ5/fXnxe7sIpej4Al1/YnsNPXbMtgvm/0Om9LaooN2PTQc4nKXHosRvGNopg/MFN5riaMBKxx3AMGFziHmk1Ih4dRDv0VQSr1LXAJZstU0pImQYorYNdJ60lHwcGYhVEj0cF1pjE9+KOYs/rSD7mhwtlsvdEXKtge3wwGmxeXaxevi86uWt7OXP6+//9KEsh6EldNE1kbrVMGxdBG6VPuX2Tm7VI5V4QWjnaN2xAVVpECtFvCatQevOXFoWLNGzAdzo91+vcABZUyg5RUZMWqWoasx8r+3erXO1NYzGSvJCW0MAU24D6Nc7LbPt5t/0M8qmM4S/2e9nJ455P+8bjjmN8ilDXuc1i5KEiakTNKEHdar/Y8Q3XAR10M0eHWKZVjnwup7NgHm5grtKCnwoK/ekVmAGmgFAPHwHbdcHIS6DHMcvS6lJVm+cy4WiOTohXt3Ae95GYzvTOlODMOQnnwl1qgKpVC8WvTFld/HYQcTZaSFiFcQyDbHGqVZ7asPQ1IcpvfIftRG5qQ==" />
--- a/web/src/pages/Doc/zh/course9/index.vue
+++ b/web/src/pages/Doc/zh/course9/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>修改鼠标滚轮的行为</h1>
+<p>鼠标滚轮的行为支持放大缩小画布和上下移动画布，可以在实例化时通过配置指定：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-attr">mousewheelAction</span>: <span class="hljs-string">&#x27;zoom&#x27;</span><span class="hljs-comment">// zoom（放大缩小）、move（上下移动）</span>
+    <span class="hljs-comment">// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px</span>
+    <span class="hljs-attr">mousewheelMoveStep</span>: <span class="hljs-number">100</span>,
+})
+</code></pre>
+<p>如果需要动态的切换行为可以使用<code>updateConfig</code>方法：</p>
+<pre class="hljs"><code>mindMap.updateConfig({
+    <span class="hljs-attr">mousewheelAction</span>: <span class="hljs-string">&#x27;move&#x27;</span>
+})
+</code></pre>
+<p>此外也支持让你自行处理鼠标滚轮事件：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-attr">customHandleMousewheel</span>: <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> {
+        <span class="hljs-comment">// 你的自定义逻辑</span>
+    }
+})
+</code></pre>
+<p>当传了<code>customHandleMousewheel</code>选项，<code>mousewheelAction</code>选项将不生效。</p>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVU+P20QU/ypPRshZlNipxCkkpeXPAYlFqNedFXLsSTJlPGM842SXyBKqkFpKK4FAQiqXLZcWCXFCiO628GU2yfIteOPxON6QAzciOZp57/fe7828P7P0bmdZMC+oN/CGKs5ZpkFRXWQ3iWBpJnMNS8jppAtSHMpCaJp0Qc0izuXiDp1ACZNcpuCjB7+xOGQiOYwyqyKeQjGnvRSlvTTKiEcEABGcajAygxyBKDi38jCE1avvVl89Xv/1xfq3i82TL68e3tvce7F68MPV0+dExFIoDVGs2Zx+JBOq0HobUefo+IAIh4qLPKdC30awFIjDk3T8z6VM/QpkqB7cXz/+6e+XZ+uz++uLJ1evfr16+ujyj3PnQcvplFM8uqKLGaW8cdU5gNFNWJqYr7EE84gXFAF7paMRWH54G/xUzqkPg1piPNX3ERRZEmn6rhQTNu1UHKjbiWGwjwFPpUs8W2mO16Ss0wq2deV04VLlOCgfQCLjIkW3wZTq9zk1y3dOP0g6fm2JUemICZr7B11rhbFGA+vd/IhnBMRriaxY0xNtxMRbn72wSbXFYH5l7cwA4xnjCR7NgI+2Pnbc7WXZZbo8f7Q5f7ZLdp1wD+nxVtfG/U8RuGUtc3ZMMH1HSm264GOpmK2KI5/Tifa74MeYOkzTcQUvD96y/QWAZb/58dvVN7/YoGyfXZ5/fXnxe7sIpej4Al1/YnsNPXbMtgvm/0Om9LaooN2PTQc4nKXHosRvGNopg/MFN5riaMBKxx3AMGFziHmk1Ih4dRDv0VQSr1LXAJZstU0pImQYorYNdJ60lHwcGYhVEj0cF1pjE9+KOYs/rSD7mhwtlsvdEXKtge3wwGmxeXaxevi86uWt7OXP6+//9KEsh6EldNE1kbrVMGxdBG6VPuX2Tm7VI5V4QWjnaN2xAVVpECtFvCatQevOXFoWLNGzAdzo91+vcABZUyg5RUZMWqWoasx8r+3erXO1NYzGSvJCW0MAU24D6Nc7LbPt5t/0M8qmM4S/2e9nJ455P+8bjjmN8ilDXuc1i5KEiakTNKEHdar/Y8Q3XAR10M0eHWKZVjnwup7NgHm5grtKCnwoK/ekVmAGmgFAPHwHbdcHIS6DHMcvS6lJVm+cy4WiOTohXt3Ae95GYzvTOlODMOQnnwl1qgKpVC8WvTFld/HYQcTZaSFiFcQyDbHGqVZ7asPQ1IcpvfIftRG5qQ==" />
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -2,6 +2,8 @@

 `simple-mind-map`是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。

+> 如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。
+
 ## 特性

 - [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
@@ -66,6 +68,35 @@

 尊重版权，主题和图标请勿直接用于商业项目。

+## 为什么不是？
+
+1.[知犀](https://www.zhixi.com/)
+
+知犀是一个免费的思维导图产品，支持多端同步，ui设计很漂亮，功能也很齐全，但是它并不开源，所以只能作为一个用户，而无法在你的项目中使用。
+
+类似知犀的其他在线思维导图产品还有很多，比如[GitMind](https://gitmind.cn/)、[MindLine](http://www.mindline.cn/)、[MinMeister](https://www.mindmeister.com/zh)、[幕布](https://mubu.com/)等等，搜索引擎上搜索一下非常多，但是这些产品或者是要收费，或者是小公司开发的，稳定性和持续性无法保证，当然最关键的就是它们都不开源。
+
+2.[kityminder-core](https://github.com/fex-team/kityminder-core)
+
+`kityminder-core`是百度开发的开源的脑图工具，功能很强大，性能也很好，但是它已经不维护了，所以代码比较陈旧，界面美观度也比较一般，另外bug只能自己修，功能只能自己开发，对前端开发能力要求比较高。
+
+3.[jsmind](https://github.com/hizzgdev/jsmind)、[Mind-elixir](https://github.com/ssshooter/mind-elixir-core)、[my-mind](https://github.com/ondras/my-mind)、[blink-mind](https://github.com/awehook/blink-mind)、[remind](https://github.com/luvsic3/remind)、[vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)、[ZMindMap](https://github.com/zyascend/ZMindMap)...
+
+这些开源的思维导图也都不错，各有各的特点，但是它们也都有一定缺点，比如停止更新、界面美观度一般、功能比较少、依赖某个框架等等。
+
+综上，在开源的思维导图中，你很难找到一个比`simple-mind-map`更好的选择。当然，`simple-mind-map`也远远谈不上最好，它也有很多不足，如你在前面的【特别说明】所看到的那样，不过`simple-mind-map`一直处于快速迭代中，欢迎你加入进来一起完善它。
+
+
 ## License

-[MIT](https://opensource.org/licenses/MIT)
+[MIT](https://opensource.org/licenses/MIT)
+
+## 请作者喝杯咖啡
+
+开源不易，如果本项目有帮助到你的话，可以请作者喝杯咖啡哟~
+
+> 转账请备注【思维导图】。你的头像和名字将会出现在下面。
+
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -2,21 +2,24 @@
  <div>
    <h1>简介</h1>
 <p><code>simple-mind-map</code>是一个简单&amp;强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。</p>
+<blockquote>
+<p>如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。</p>
+</blockquote>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox198" checked="true"><label for="checkbox198">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
-<li><input type="checkbox" id="checkbox199" checked="true"><label for="checkbox199">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
-<li><input type="checkbox" id="checkbox200" checked="true"><label for="checkbox200">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox201" checked="true"><label for="checkbox201">支持快捷键</label></li>
-<li><input type="checkbox" id="checkbox202" checked="true"><label for="checkbox202">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox203" checked="true"><label for="checkbox203">支持前进后退</label></li>
-<li><input type="checkbox" id="checkbox204" checked="true"><label for="checkbox204">支持拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox205" checked="true"><label for="checkbox205">支持右键和Ctrl+左键两种多选方式</label></li>
-<li><input type="checkbox" id="checkbox206" checked="true"><label for="checkbox206">支持节点自由拖拽、拖拽调整</label></li>
-<li><input type="checkbox" id="checkbox207" checked="true"><label for="checkbox207">支持多种节点形状</label></li>
-<li><input type="checkbox" id="checkbox208" checked="true"><label for="checkbox208">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
-<li><input type="checkbox" id="checkbox209" checked="true"><label for="checkbox209">支持小地图、支持水印</label></li>
-<li><input type="checkbox" id="checkbox210" checked="true"><label for="checkbox210">支持关联线</label></li>
+<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
+<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
+<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">支持快捷键</label></li>
+<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持前进后退</label></li>
+<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
+<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持节点自由拖拽、拖拽调整</label></li>
+<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">支持多种节点形状</label></li>
+<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持小地图、支持水印</label></li>
+<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">支持关联线</label></li>
 </ul>
 <h2>仓库目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -24,11 +27,11 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox211" checked="true"><label for="checkbox211">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox212" checked="true"><label for="checkbox212">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox213" checked="true"><label for="checkbox213">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox214" checked="true"><label for="checkbox214">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox215" checked="true"><label for="checkbox215">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -46,9 +49,24 @@
 <p><a href="https://naotu.baidu.com/">百度脑图</a></p>
 <p><a href="https://www.zhixi.com/">知犀思维导图</a></p>
 <p>尊重版权，主题和图标请勿直接用于商业项目。</p>
+<h2>为什么不是？</h2>
+<p>1.<a href="https://www.zhixi.com/">知犀</a></p>
+<p>知犀是一个免费的思维导图产品，支持多端同步，ui设计很漂亮，功能也很齐全，但是它并不开源，所以只能作为一个用户，而无法在你的项目中使用。</p>
+<p>类似知犀的其他在线思维导图产品还有很多，比如<a href="https://gitmind.cn/">GitMind</a>、<a href="http://www.mindline.cn/">MindLine</a>、<a href="https://www.mindmeister.com/zh">MinMeister</a>、<a href="https://mubu.com/">幕布</a>等等，搜索引擎上搜索一下非常多，但是这些产品或者是要收费，或者是小公司开发的，稳定性和持续性无法保证，当然最关键的就是它们都不开源。</p>
+<p>2.<a href="https://github.com/fex-team/kityminder-core">kityminder-core</a></p>
+<p><code>kityminder-core</code>是百度开发的开源的脑图工具，功能很强大，性能也很好，但是它已经不维护了，所以代码比较陈旧，界面美观度也比较一般，另外bug只能自己修，功能只能自己开发，对前端开发能力要求比较高。</p>
+<p>3.<a href="https://github.com/hizzgdev/jsmind">jsmind</a>、<a href="https://github.com/ssshooter/mind-elixir-core">Mind-elixir</a>、<a href="https://github.com/ondras/my-mind">my-mind</a>、<a href="https://github.com/awehook/blink-mind">blink-mind</a>、<a href="https://github.com/luvsic3/remind">remind</a>、<a href="https://github.com/hellowuxin/vue3-mindmap">vue3-mindmap</a>、<a href="https://github.com/zyascend/ZMindMap">ZMindMap</a>...</p>
+<p>这些开源的思维导图也都不错，各有各的特点，但是它们也都有一定缺点，比如停止更新、界面美观度一般、功能比较少、依赖某个框架等等。</p>
+<p>综上，在开源的思维导图中，你很难找到一个比<code>simple-mind-map</code>更好的选择。当然，<code>simple-mind-map</code>也远远谈不上最好，它也有很多不足，如你在前面的【特别说明】所看到的那样，不过<code>simple-mind-map</code>一直处于快速迭代中，欢迎你加入进来一起完善它。</p>
 <h2>License</h2>
 <p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
-
+<h2>请作者喝杯咖啡</h2>
+<p>开源不易，如果本项目有帮助到你的话，可以请作者喝杯咖啡哟~</p>
+<blockquote>
+<p>转账请备注【思维导图】。你的头像和名字将会出现在下面。</p>
+</blockquote>
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
  </div>
 </template>

--- a/web/src/pages/Doc/zh/miniMap/index.md
+++ b/web/src/pages/Doc/zh/miniMap/index.md
@@ -45,13 +45,13 @@ MindMap.usePlugin(MiniMap)

 3.在`container`内创建一个视口框元素`viewBoxContainer`，绝对定位，设置边框样式，过渡属性（可选）

-4.监听`data_change`和`view_data_change`事件，在该事件内调用`calculationMiniMap`方法获取计算数据，然后将`svgHTML`渲染到`miniMapContainer`元素内，并且设置它的样式：
+4.监听`data_change`和`view_data_change`事件，在该事件内调用`calculationMiniMap`方法获取计算数据，然后将`svgHTML`渲染到`miniMapContainer`元素内，并且设置`miniMapContainer`元素的样式：

 ```js
 :style="{
-    transform: `scale(${svgBoxScale})`,
-    left: svgBoxLeft + 'px',
-    top: svgBoxTop + 'px',
+    transform: `scale(${miniMapBoxScale})`,
+    left: miniMapBoxLeft + 'px',
+    top: miniMapBoxTop + 'px',
 }"
 ```

--- a/web/src/pages/Doc/zh/miniMap/index.vue
+++ b/web/src/pages/Doc/zh/miniMap/index.vue
@@ -30,11 +30,11 @@ MindMap.usePlugin(MiniMap)
 <p>1.准备一个容器元素<code>container</code>，定位不为<code>static</code></p>
 <p>2.在<code>container</code>内创建一个小地图容器元素<code>miniMapContainer</code>，绝对定位</p>
 <p>3.在<code>container</code>内创建一个视口框元素<code>viewBoxContainer</code>，绝对定位，设置边框样式，过渡属性（可选）</p>
-<p>4.监听<code>data_change</code>和<code>view_data_change</code>事件，在该事件内调用<code>calculationMiniMap</code>方法获取计算数据，然后将<code>svgHTML</code>渲染到<code>miniMapContainer</code>元素内，并且设置它的样式：</p>
+<p>4.监听<code>data_change</code>和<code>view_data_change</code>事件，在该事件内调用<code>calculationMiniMap</code>方法获取计算数据，然后将<code>svgHTML</code>渲染到<code>miniMapContainer</code>元素内，并且设置<code>miniMapContainer</code>元素的样式：</p>
 <pre class="hljs"><code>:style=<span class="hljs-string">&quot;{
-    transform: `scale(${svgBoxScale})`,
-    left: svgBoxLeft + &#x27;px&#x27;,
-    top: svgBoxTop + &#x27;px&#x27;,
+    transform: `scale(${miniMapBoxScale})`,
+    left: miniMapBoxLeft + &#x27;px&#x27;,
+    top: miniMapBoxTop + &#x27;px&#x27;,
 }&quot;</span>
 </code></pre>
 <p>5.将<code>viewBoxStyle</code>对象设置为<code>viewBoxContainer</code>元素的样式</p>
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@@ -1,7 +1,87 @@
 # 开始

+## 安装
+
+```bash
+npm i simple-mind-map
+```
+
+`0.2.0`版本之前的注意事项：
+
+> 注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
+> 
+> ```js
+> module.exports = {
+>      transpileDependencies: ['simple-mind-map']
+> }
+> ```
+> 
+> 其他项目请自行修改打包配置。
+
+## 使用
+
+> 本仓库的`web`目录提供了一个基于`Vue2`的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
+
+> 想要了解在其他框架中的使用，你可以参考以下这些非官方的实现：
+>
+> 1.[https://github.com/huangyuanyin/hyy-vue3-mindMap](https://github.com/huangyuanyin/hyy-vue3-mindMap)：一个基于 Vue3.2 +ElementPlus的思维导图。
+
+首先提供一个宽高不为0的容器元素：
+
+```html
+<div id="mindMapContainer"></div>
+```
+
+另外再设置一下`css`样式：
+
+```css
+#mindMapContainer * {
+  margin: 0;
+  padding: 0;
+}
+```
+
+然后引入`simple-mind-map`库，创建一个实例：
+
+```js
+import MindMap from "simple-mind-map";
+
+const mindMap = new MindMap({
+  el: document.getElementById('mindMapContainer'),
+  data: {
+    "data": {
+        "text": "根节点"
+    },
+    "children": []
+  }
+});
+```
+
+这样即可得一个思维导图。
+
+如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过`simple-mind-map`库提供的接口来实现更多功能。
+
+`simple-mind-map`支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。
+
+默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
+
+如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件和`simpleMindMap.css`文件，复制到你的项目中，然后在页面中引入：
+
+```html
+<link rel="stylesheet" href="simpleMindMap.css">
+<script scr="simpleMindMap.umd.min.js"></script>
+```
+
+会创建一个全局变量`window.simpleMindMap`。
+
+这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
+
+（v0.5.4+）如果你想直接在浏览器端通过`ES`模块的方式来使用，你可以在`/simple-mind-map/dist/`目录中找到`simpleMindMap.esm.js`和`simpleMindMap.esm.css`文件。
+
 ## 开发

+如果你只是使用库的话可以不用阅读此小节。
+
 ### 本地开发

 ```bash
@@ -52,58 +132,6 @@ npm run build

 会自动把`index.html`移动到根目录。

-## 安装
-
-```bash
-npm i simple-mind-map
-```
-
-`0.2.0`版本之前的注意事项：
-
-> 注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
-> 
-> ```js
-> module.exports = {
->      transpileDependencies: ['simple-mind-map']
-> }
-> ```
-> 
-> 其他项目请自行修改打包配置。
-
-## 使用
-
-> 本仓库的`web`目录提供了一个基于`Vue2`的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
-
-```html
-<div id="mindMapContainer"></div>
-```
-
-```js
-import MindMap from "simple-mind-map";
-
-const mindMap = new MindMap({
-  el: document.getElementById('mindMapContainer'),
-  data: {
-    "data": {
-        "text": "根节点"
-    },
-    "children": []
-  }
-});
-```
-
-默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
-
-如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件，复制到你的项目中，然后在页面中引入：
-
-```html
-<script scr="simpleMindMap.umd.min.js"></script>
-```
-
-会创建一个全局变量`window.simpleMindMap`。
-
-这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
-
 ## 问题

 ### 1.在Vite中使用报错，提示xml-js依赖出错
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@@ -1,7 +1,61 @@
 <template>
  <div>
    <h1>开始</h1>
+<h2>安装</h2>
+<pre class="hljs"><code>npm i simple-mind-map
+</code></pre>
+<p><code>0.2.0</code>版本之前的注意事项：</p>
+<blockquote>
+<p>注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：</p>
+<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
+     <span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">&#x27;simple-mind-map&#x27;</span>]
+}
+</code></pre>
+<p>其他项目请自行修改打包配置。</p>
+</blockquote>
+<h2>使用</h2>
+<blockquote>
+<p>本仓库的<code>web</code>目录提供了一个基于<code>Vue2</code>的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。</p>
+</blockquote>
+<blockquote>
+<p>想要了解在其他框架中的使用，你可以参考以下这些非官方的实现：</p>
+<p>1.<a href="https://github.com/huangyuanyin/hyy-vue3-mindMap">https://github.com/huangyuanyin/hyy-vue3-mindMap</a>：一个基于 Vue3.2 +ElementPlus的思维导图。</p>
+</blockquote>
+<p>首先提供一个宽高不为0的容器元素：</p>
+<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+<p>另外再设置一下<code>css</code>样式：</p>
+<pre class="hljs"><code><span class="hljs-selector-id">#mindMapContainer</span> * {
+  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
+  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
+}
+</code></pre>
+<p>然后引入<code>simple-mind-map</code>库，创建一个实例：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</span>;
+
+<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
+  <span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;mindMapContainer&#x27;</span>),
+  <span class="hljs-attr">data</span>: {
+    <span class="hljs-string">&quot;data&quot;</span>: {
+        <span class="hljs-string">&quot;text&quot;</span>: <span class="hljs-string">&quot;根节点&quot;</span>
+    },
+    <span class="hljs-string">&quot;children&quot;</span>: []
+  }
+});
+</code></pre>
+<p>这样即可得一个思维导图。</p>
+<p>如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过<code>simple-mind-map</code>库提供的接口来实现更多功能。</p>
+<p><code>simple-mind-map</code>支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。</p>
+<p>默认引入的是未打包的<code>ES</code>模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置<code>babel</code>编译<code>simple-mind-map</code>，防止一些较新的<code>js</code>语法部分浏览器不支持。</p>
+<p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以从<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.umd.min.js</code>文件和<code>simpleMindMap.css</code>文件，复制到你的项目中，然后在页面中引入：</p>
+<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+</code></pre>
+<p>会创建一个全局变量<code>window.simpleMindMap</code>。</p>
+<p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
+<p>（v0.5.4+）如果你想直接在浏览器端通过<code>ES</code>模块的方式来使用，你可以在<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.esm.js</code>和<code>simpleMindMap.esm.css</code>文件。</p>
 <h2>开发</h2>
+<p>如果你只是使用库的话可以不用阅读此小节。</p>
 <h3>本地开发</h3>
 <pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
 <span class="hljs-built_in">cd</span> simple-mind-map
@@ -34,42 +88,6 @@ npm run buildDoc
 npm run build
 </code></pre>
 <p>会自动把<code>index.html</code>移动到根目录。</p>
-<h2>安装</h2>
-<pre class="hljs"><code>npm i simple-mind-map
-</code></pre>
-<p><code>0.2.0</code>版本之前的注意事项：</p>
-<blockquote>
-<p>注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：</p>
-<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
-     <span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">&#x27;simple-mind-map&#x27;</span>]
-}
-</code></pre>
-<p>其他项目请自行修改打包配置。</p>
-</blockquote>
-<h2>使用</h2>
-<blockquote>
-<p>本仓库的<code>web</code>目录提供了一个基于<code>Vue2</code>的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。</p>
-</blockquote>
-<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
-<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</span>;
-
-<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
-  <span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;mindMapContainer&#x27;</span>),
-  <span class="hljs-attr">data</span>: {
-    <span class="hljs-string">&quot;data&quot;</span>: {
-        <span class="hljs-string">&quot;text&quot;</span>: <span class="hljs-string">&quot;根节点&quot;</span>
-    },
-    <span class="hljs-string">&quot;children&quot;</span>: []
-  }
-});
-</code></pre>
-<p>默认引入的是未打包的<code>ES</code>模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置<code>babel</code>编译<code>simple-mind-map</code>，防止一些较新的<code>js</code>语法部分浏览器不支持。</p>
-<p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以从<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.umd.min.js</code>文件，复制到你的项目中，然后在页面中引入：</p>
-<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
-</code></pre>
-<p>会创建一个全局变量<code>window.simpleMindMap</code>。</p>
-<p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
 <h2>问题</h2>
 <h3>1.在Vite中使用报错，提示xml-js依赖出错</h3>
 <p>解决方法：使用如下引入方式：</p>
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -60,9 +60,9 @@ MindMap
  .usePlugin(AssociativeLine)

 // 注册自定义主题
-customThemeList.forEach((item) => {
-  MindMap.defineTheme(item.value, item.theme)
-})
+// customThemeList.forEach((item) => {
+//   MindMap.defineTheme(item.value, item.theme)
+// })

 /**
 * @Author: 王林
@@ -126,6 +126,9 @@ export default {
    this.$bus.$on('createAssociativeLine', () => {
      this.mindMap.associativeLine.createLineFromActiveNode()
    })
+    window.addEventListener('resize', () => {
+      this.mindMap.resize()
+    })
    if (this.openTest) {
      setTimeout(() => {
        this.test()
@@ -336,7 +339,8 @@ export default {
      } else {
        this.mindMap.setData(data)
      }
-      // this.manualSave()
+      this.mindMap.view.reset()
+      this.manualSave()
    },

    /**
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/web/src/pages/Edit/components/Outline.vue
@@ -50,6 +50,7 @@ export default {
        }
      },
      notHandleDataChange: false,
+      isCreateNode: false
    }
  },
  computed: {
@@ -76,6 +77,10 @@ export default {
  },
  methods: {
    onBlur(e, node) {
+      if (this.isCreateNode) {
+        this.isCreateNode = false
+        return
+      }
      node.data._node.setText(e.target.innerText)
    },

@@ -97,12 +102,14 @@ export default {
    // 插入兄弟节点
    insertNode() {
      this.notHandleDataChange = false
+      this.isCreateNode = true
      this.mindMap.execCommand('INSERT_NODE', false)
    },

    // 插入下级节点
    insertChildNode() {
      this.notHandleDataChange = false
+      this.isCreateNode = true
      this.mindMap.execCommand('INSERT_CHILD_NODE', false)
    },

--- a/web/src/pages/Edit/components/RichTextToolbar.vue
+++ b/web/src/pages/Edit/components/RichTextToolbar.vue
@@ -227,7 +227,7 @@ export default {
 <style lang="less" scoped>
 .richTextToolbar {
  position: fixed;
-  z-index: 99999;
+  z-index: 2000;
  height: 55px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/web/src/pages/Edit/components/Theme.vue
@@ -42,7 +42,7 @@ export default {
  },
  data() {
    return {
-      themeList: [...themeList, ...customThemeList],
+      themeList: [...themeList],// ...customThemeList
      themeMap,
      theme: ''
    }
Author	SHA1	Message	Date
wanglin2	3f081e5021	更新群二维码	2023-04-14 10:29:49 +08:00
wanglin2	1e32338d23	Merge branch 'feature' into main	2023-04-10 22:11:00 +08:00
wanglin2	21f487321a	更新文档	2023-04-10 22:08:26 +08:00
wanglin2	750af31996	Merge branch 'main' of https://github.com/wanglin2/mind-map into main	2023-04-10 10:27:15 +08:00
wanglin2	dc1aaee75d	Merge branch 'feature' into main	2023-04-10 10:26:49 +08:00
wanglin2	2122fa59d7	更新文档	2023-04-10 10:25:59 +08:00
wanglin2	5b7c65adad	添加新主题	2023-04-10 10:20:09 +08:00
wanglin2	fabf4535a8	Merge branch 'feature' into main	2023-04-09 22:11:11 +08:00
wanglin2	04566080e0	更新文档	2023-04-09 22:10:13 +08:00
wanglin2	0f9d9cdb21	Merge branch 'feature' into main	2023-04-09 08:53:58 +08:00
wanglin2	11538d1789	打包0.5.3-fix.2：修复导出图片时节点中的图片无法显示的问题；更新文档	2023-04-09 08:52:43 +08:00
wanglin2	49bae6cc6c	Merge branch 'feature' into main	2023-04-08 21:09:49 +08:00
wanglin2	9644ba0c8d	打包0.5.3-fix.1，修复设置初始根节点位置不生效的问题；文档新增教程章节	2023-04-08 21:09:24 +08:00
wanglin2	ac2df3cb2e	Merge branch 'feature' into main	2023-04-08 15:37:58 +08:00
wanglin2	aad1f911c8	支持打包成esm模块	2023-04-08 15:37:34 +08:00
wanglin2	27b50bf4ae	Merge branch 'feature' into main	2023-04-07 20:14:47 +08:00
wanglin2	2d22837e32	Demo：修复导入存在主题配置的数据没有触发本地存储的问题	2023-04-07 20:14:30 +08:00
wanglin2	866f2071ce	Merge branch 'feature' into main	2023-04-07 19:31:10 +08:00
wanglin2	9cb35eac29	更新文档	2023-04-07 19:30:52 +08:00
wanglin2	6ff63d9d56	Merge branch 'feature' into main	2023-04-07 15:56:14 +08:00
wanglin2	43539df25b	修改文档	2023-04-07 15:55:55 +08:00
wanglin2	cbafc24670	Merge branch 'feature' into main	2023-04-07 08:56:44 +08:00
wanglin2	cc83a18b18	打包0.5.3	2023-04-07 08:55:55 +08:00
wanglin2	5ae931da92	更新文档	2023-04-07 08:53:05 +08:00
wanglin2	853b999a7d	Feature：支持设置初始中心节点的位置	2023-04-07 08:42:27 +08:00
wanglin2	505622f3dc	Fix：修复富文本模式下选择了多个节点时修改样式时意外修改文本的问题	2023-04-06 20:14:54 +08:00
wanglin2	0a5b41e3e0	更新群二维码	2023-04-06 08:47:31 +08:00
wanglin2	8630c47b26	Merge branch 'feature' into main	2023-04-06 08:46:54 +08:00
wanglin2	6105fd6e3d	打包0.5.2，去除导出json数据中的uid字段	2023-04-06 08:45:43 +08:00
wanglin2	d7b1c4e4fe	优化:重新渲染时清空节点池	2023-04-05 21:22:39 +08:00
wanglin2	6ccafaa771	Merge branch 'feature' into main	2023-04-05 16:47:06 +08:00
wanglin2	6b15e469a2	打包0.5.1	2023-04-05 16:45:06 +08:00
wanglin2	5675e29df3	更新文档	2023-04-05 16:40:29 +08:00
wanglin2	52d094a7c7	Demo:窗口大小改变后修改画布大小	2023-04-05 09:55:39 +08:00
wanglin2	633ed68f92	Demo:导入数据后复位画布变换效果,解决导入后新节点在画布外的问题	2023-04-05 08:49:36 +08:00
wanglin2	388594e29a	Fix:修复快速操作时节点位置不正确的问题	2023-04-05 08:45:23 +08:00
wanglin2	af148fef27	Demo:修复在大纲内添加新节点时节点错乱的问题	2023-04-04 22:54:24 +08:00
wanglin2	983e55bd1d	优化:只有当鼠标在画布内才响应快捷键	2023-04-04 22:53:38 +08:00