From 55836429619eaee9ad480134ad26e2cec24cb539 Mon Sep 17 00:00:00 2001
From: wanghao1993 <whao53333@gmail.com>
Date: Sun, 17 Sep 2023 18:51:12 +0800
Subject: [PATCH] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Doc/en/constructor/index.vue | 2312 +++++++++++---------
 web/src/pages/Doc/zh/constructor/index.vue | 2205 ++++++++++---------
 2 files changed, 2347 insertions(+), 2170 deletions(-)

diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 576ac5d3..6edf2ef0 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <h1>Constructor</h1>
-<h2>Basic use</h2>
-<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>
+    <h2>Basic use</h2>
+    <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>;
+    <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">&quot;mindMapContainer&quot;</span>),
@@ -16,478 +16,539 @@
   }
 });
 </code></pre>
-<h2>Instantiation options</h2>
-<table>
-<thead>
-<tr>
-<th>Field Name</th>
-<th>Type</th>
-<th>Default Value</th>
-<th>Description</th>
-<th>Required</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>el</td>
-<td>Element</td>
-<td></td>
-<td>Container element, must be a DOM element</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>data</td>
-<td>Object</td>
-<td>{}</td>
-<td>Mind map data, Please refer to the introduction of 【Data structure】 below</td>
-<td></td>
-</tr>
-<tr>
-<td>layout</td>
-<td>String</td>
-<td>logicalStructure</td>
-<td>Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram）</td>
-<td></td>
-</tr>
-<tr>
-<td>fishboneDeg（v0.5.4+）</td>
-<td>Number</td>
-<td>45</td>
-<td>Set the diagonal angle of the fishbone structure diagram</td>
-<td></td>
-</tr>
-<tr>
-<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, 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+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+)</td>
-<td></td>
-</tr>
-<tr>
-<td>themeConfig</td>
-<td>Object</td>
-<td>{}</td>
-<td>Theme configuration, will be merged with the selected theme, available fields refer to: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a></td>
-<td></td>
-</tr>
-<tr>
-<td>scaleRatio</td>
-<td>Number</td>
-<td>0.1</td>
-<td>The incremental scaling ratio</td>
-<td></td>
-</tr>
-<tr>
-<td>maxTag</td>
-<td>Number</td>
-<td>5</td>
-<td>The maximum number of tags displayed in the node, any additional tags will be discarded</td>
-<td></td>
-</tr>
-<tr>
-<td>exportPadding</td>
-<td>Number</td>
-<td>20</td>
-<td>The padding for exporting images</td>
-<td></td>
-</tr>
-<tr>
-<td>imgTextMargin</td>
-<td>Number</td>
-<td>5</td>
-<td>The spacing between the image and text in the node</td>
-<td></td>
-</tr>
-<tr>
-<td>textContentMargin</td>
-<td>Number</td>
-<td>2</td>
-<td>The spacing between various text information in the node, such as the spacing between the icon and text</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTranslateStep</td>
-<td>Number</td>
-<td>3</td>
-<td>The canvas offset when mouse moves to the edge during multi-select node</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTranslateLimit</td>
-<td>Number</td>
-<td>20</td>
-<td>The distance from the edge when the canvas begins to offset during multi-select node</td>
-<td></td>
-</tr>
-<tr>
-<td>customNoteContentShow（v0.1.6+）</td>
-<td>Object</td>
-<td>null</td>
-<td>Custom node note content display, object type, structure: {show: (noteContent, left, top) =&gt; {// your display node note logic }, hide: () =&gt; {// your hide node note logic }}</td>
-<td></td>
-</tr>
-<tr>
-<td>readonly（v0.1.7+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Whether it is read-only mode</td>
-<td></td>
-</tr>
-<tr>
-<td>enableFreeDrag（v0.2.4+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Enable node free drag</td>
-<td></td>
-</tr>
-<tr>
-<td>watermarkConfig（v0.2.4+）</td>
-<td>Object</td>
-<td></td>
-<td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td>
-<td></td>
-</tr>
-<tr>
-<td>textAutoWrapWidth（v0.3.4+）</td>
-<td>Number</td>
-<td>500</td>
-<td>Each line of text in the node will wrap automatically when it reaches the width</td>
-<td></td>
-</tr>
-<tr>
-<td>customHandleMousewheel（v0.4.3+）</td>
-<td>Function</td>
-<td>null</td>
-<td>User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object</td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelAction（v0.4.3+）</td>
-<td>String</td>
-<td>zoom</td>
-<td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If <code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelMoveStep（v0.4.3+）</td>
-<td>Number</td>
-<td>100</td>
-<td>When the <code>mousewheelAction</code> is set to <code>move</code>, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is <code>px</code></td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelZoomActionReverse（v0.6.5+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>When <code>mousewheelAction</code> is set to <code>zoom</code>, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
-<td>String</td>
-<td>二级节点</td>
-<td>Text of the default inserted secondary node</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td>
-<td>String</td>
-<td>分支主题</td>
-<td>Text for nodes below the second level inserted by default</td>
-<td></td>
-</tr>
-<tr>
-<td>expandBtnStyle（v0.5.0+）</td>
-<td>Object</td>
-<td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
-<td>Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded)</td>
-<td></td>
-</tr>
-<tr>
-<td>expandBtnIcon（v0.5.0+）</td>
-<td>Object</td>
-<td>{ open: '', close: '' }</td>
-<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>expandBtnNumHandler（v0.7.0+）</td>
-<td>Function</td>
-<td></td>
-<td>Used to customize the content of displaying the number of nodes when folding, receiving a parameter that represents the instance of the folding node, and returning a number or string that represents the final displayed content. For example, when the number is greater than 99, 99 can be displayed+</td>
-<td></td>
-</tr>
-<tr>
-<td>isShowExpandNum（v0.7.0+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Display the number of folded nodes when they are folded up</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+）（v0.6.7+ is remove this feature）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Whether to enable node animation transition</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）</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>
-<tr>
-<td>exportPaddingX（v0.5.5+）</td>
-<td>Number</td>
-<td>10</td>
-<td>Horizontal padding of graphics when exporting PNG, SVG, and PDF</td>
-<td></td>
-</tr>
-<tr>
-<td>exportPaddingY（v0.5.5+）</td>
-<td>Number</td>
-<td>10</td>
-<td>Vertical padding of graphics when exporting PNG, SVG, and PDF</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeTextEditZIndex（v0.5.5+）</td>
-<td>Number</td>
-<td>3000</td>
-<td></td>
-<td>z-index of node text edit box elements</td>
-</tr>
-<tr>
-<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
-<td>Number</td>
-<td>3000</td>
-<td>z-index of floating layer elements in node comments</td>
-<td></td>
-</tr>
-<tr>
-<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Whether to end the editing status of node text when clicking on an area outside the canvas</td>
-<td></td>
-</tr>
-<tr>
-<td>maxHistoryCount（v0.5.6+）</td>
-<td>Number</td>
-<td>1000</td>
-<td></td>
-<td>Maximum number of history records</td>
-</tr>
-<tr>
-<td>alwaysShowExpandBtn（v0.5.8+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default</td>
-<td></td>
-</tr>
-<tr>
-<td>iconList（v0.5.8+）</td>
-<td>Array</td>
-<td>[]</td>
-<td>The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the &quot;Icon Configuration&quot; table below for the detailed structure of the object</td>
-<td></td>
-</tr>
-<tr>
-<td>maxNodeCacheCount（v0.5.10+）</td>
-<td>Number</td>
-<td>1000</td>
-<td>The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultAssociativeLineText（v0.5.11+）</td>
-<td>String</td>
-<td>关联</td>
-<td>Association Line Default Text</td>
-<td></td>
-</tr>
-<tr>
-<td>fitPadding（v0.6.0+）</td>
-<td>Number</td>
-<td>50</td>
-<td>The padding of mind mapping when adapting to canvas size, Unit: px</td>
-<td></td>
-</tr>
-<tr>
-<td>enableCtrlKeyNodeSelection（v0.6.0+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Whether to enable the function of holding down the Ctrl key to select multiple nodes</td>
-<td></td>
-</tr>
-<tr>
-<td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Setting to left click to select multiple nodes and right click to drag the canvas.</td>
-<td></td>
-</tr>
-<tr>
-<td>beforeTextEdit（v0.6.0+）</td>
-<td>Function/null</td>
-<td>null</td>
-<td>The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance</td>
-<td></td>
-</tr>
-<tr>
-<td>isUseCustomNodeContent（v0.6.3+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Whether to customize node content</td>
-<td></td>
-</tr>
-<tr>
-<td>customCreateNodeContent（v0.6.3+）</td>
-<td>Function/null</td>
-<td>null</td>
-<td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td>
-<td></td>
-</tr>
-<tr>
-<td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas</td>
-<td></td>
-</tr>
-<tr>
-<td>customInnerElsAppendTo（v0.6.12+）</td>
-<td>null/HTMLElement</td>
-<td>null</td>
-<td>Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeDragPlaceholderMaxSize（v0.6.12+）</td>
-<td>Number</td>
-<td>20</td>
-<td>When dragging an element, the maximum height of the block indicating the new position of the element</td>
-<td></td>
-</tr>
-<tr>
-<td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+ remove this feature）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data and automatically entering the text editing state</td>
-<td></td>
-</tr>
-<tr>
-<td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when there is an activation node?</td>
-<td></td>
-</tr>
-<tr>
-<td>richTextEditFakeInPlace（v0.6.13+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better</td>
-<td></td>
-</tr>
-<tr>
-<td>customHandleClipboardText（v0.6.14+）</td>
-<td>Function</td>
-<td>null</td>
-<td>Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images from the user's clipboard. By default, it will only determine whether the text is regular text and node data in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you can pass a function that takes the text from the current clipboard as a parameter and returns the processed data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: '' }, children: [] } }, The representative is data in simple bind map format, and the node data is in the same format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return a promise</td>
-<td></td>
-</tr>
-<tr>
-<td>errorHandler（v0.6.15+）</td>
-<td>Function</td>
-<td></td>
-<td>Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object</td>
-<td></td>
-</tr>
-<tr>
-<td>disableMouseWheelZoom（v0.6.15+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Prohibit mouse wheel scaling, you can still use the API for scaling</td>
-<td></td>
-</tr>
-<tr>
-<td>resetCss（v0.6.16+）</td>
-<td>String</td>
-<td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
-<td>When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset</td>
-<td></td>
-</tr>
-<tr>
-<td>enableDblclickReset（v0.6.17+）</td>
-<td>Boolean</td>
-<td>true(v0.7.0+changed to false)</td>
-<td>Turn on the mouse and double-click to reset the position and zoom of the mind map</td>
-<td></td>
-</tr>
-<tr>
-<td>minExportImgCanvasScale（v0.7.0+）</td>
-<td>Number</td>
-<td>2</td>
-<td>The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity</td>
-<td></td>
-</tr>
-<tr>
-<td>hoverRectColor（v0.7.0+）</td>
-<td>String</td>
-<td>rgb(94, 200, 248)</td>
-<td>The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering</td>
-<td></td>
-</tr>
-<tr>
-<td>hoverRectPadding（v0.7.0+）</td>
-<td>Number</td>
-<td>2</td>
-<td>The distance between the node mouse hover and the displayed rectangular border when activated and the node content</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTextOnEnterEditText（v0.7.0+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node</td>
-<td></td>
-</tr>
-<tr>
-<td>deleteNodeActive（v0.7.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes</td>
-<td></td>
-</tr>
-<tr>
-<td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes</td>
-<td></td>
-</tr>
-</tbody>
-</table>
-<h3>Data structure</h3>
-<p>The basic data structure is as follows:</p>
-<pre class="hljs"><code>{
+    <h2>Instantiation options</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Field Name</th>
+          <th>Type</th>
+          <th>Default Value</th>
+          <th>Description</th>
+          <th>Required</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>el</td>
+          <td>Element</td>
+          <td></td>
+          <td>Container element, must be a DOM element</td>
+          <td>Yes</td>
+        </tr>
+        <tr>
+          <td>data</td>
+          <td>Object</td>
+          <td>{}</td>
+          <td>Mind map data, Please refer to the introduction of 【Data structure】 below</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>layout</td>
+          <td>String</td>
+          <td>logicalStructure</td>
+          <td>Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization
+            (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+,
+            timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram）</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>fishboneDeg（v0.5.4+）</td>
+          <td>Number</td>
+          <td>45</td>
+          <td>Set the diagonal angle of the fishbone structure diagram</td>
+          <td></td>
+        </tr>
+        <tr>
+          <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, 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+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+)</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>themeConfig</td>
+          <td>Object</td>
+          <td>{}</td>
+          <td>Theme configuration, will be merged with the selected theme, available fields refer to: <a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>scaleRatio</td>
+          <td>Number</td>
+          <td>0.1</td>
+          <td>The incremental scaling ratio</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>maxTag</td>
+          <td>Number</td>
+          <td>5</td>
+          <td>The maximum number of tags displayed in the node, any additional tags will be discarded</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>exportPadding</td>
+          <td>Number</td>
+          <td>20</td>
+          <td>The padding for exporting images</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>imgTextMargin</td>
+          <td>Number</td>
+          <td>5</td>
+          <td>The spacing between the image and text in the node</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>textContentMargin</td>
+          <td>Number</td>
+          <td>2</td>
+          <td>The spacing between various text information in the node, such as the spacing between the icon and text</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>selectTranslateStep</td>
+          <td>Number</td>
+          <td>3</td>
+          <td>The canvas offset when mouse moves to the edge during multi-select node</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>selectTranslateLimit</td>
+          <td>Number</td>
+          <td>20</td>
+          <td>The distance from the edge when the canvas begins to offset during multi-select node</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customNoteContentShow（v0.1.6+）</td>
+          <td>Object</td>
+          <td>null</td>
+          <td>Custom node note content display, object type, structure: {show: (noteContent, left, top) =&gt; {// your
+            display node note logic }, hide: () =&gt; {// your hide node note logic }}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>readonly（v0.1.7+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Whether it is read-only mode</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableFreeDrag（v0.2.4+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Enable node free drag</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>watermarkConfig（v0.2.4+）</td>
+          <td>Object</td>
+          <td></td>
+          <td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>textAutoWrapWidth（v0.3.4+）</td>
+          <td>Number</td>
+          <td>500</td>
+          <td>Each line of text in the node will wrap automatically when it reaches the width</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customHandleMousewheel（v0.4.3+）</td>
+          <td>Function</td>
+          <td>null</td>
+          <td>User-defined mouse wheel event processing can pass a function, and the callback parameter is the event
+            object</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mousewheelAction（v0.4.3+）</td>
+          <td>String</td>
+          <td>zoom</td>
+          <td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If
+            <code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mousewheelMoveStep（v0.4.3+）</td>
+          <td>Number</td>
+          <td>100</td>
+          <td>When the <code>mousewheelAction</code> is set to <code>move</code>, you can use this attribute to control
+            the step length of the view movement when the mouse scrolls. The unit is <code>px</code></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mousewheelZoomActionReverse（v0.6.5+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>When <code>mousewheelAction</code> is set to <code>zoom</code>, the default scrolling forward is to zoom
+            out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
+          <td>String</td>
+          <td>二级节点</td>
+          <td>Text of the default inserted secondary node</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td>
+          <td>String</td>
+          <td>分支主题</td>
+          <td>Text for nodes below the second level inserted by default</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>expandBtnStyle（v0.5.0+）</td>
+          <td>Object</td>
+          <td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
+          <td>Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set
+            the text style for displaying the number of nodes when folded)</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>expandBtnIcon（v0.5.0+）</td>
+          <td>Object</td>
+          <td>{ open: '', close: '' }</td>
+          <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>expandBtnNumHandler（v0.7.0+）</td>
+          <td>Function</td>
+          <td></td>
+          <td>Used to customize the content of displaying the number of nodes when folding, receiving a parameter that
+            represents the instance of the folding node, and returning a number or string that represents the final
+            displayed content. For example, when the number is greater than 99, 99 can be displayed+</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>isShowExpandNum（v0.7.0+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Display the number of folded nodes when they are folded up</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+）（v0.6.7+ is remove this feature）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Whether to enable node animation transition</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）</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>
+        <tr>
+          <td>exportPaddingX（v0.5.5+）</td>
+          <td>Number</td>
+          <td>10</td>
+          <td>Horizontal padding of graphics when exporting PNG, SVG, and PDF</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>exportPaddingY（v0.5.5+）</td>
+          <td>Number</td>
+          <td>10</td>
+          <td>Vertical padding of graphics when exporting PNG, SVG, and PDF</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>nodeTextEditZIndex（v0.5.5+）</td>
+          <td>Number</td>
+          <td>3000</td>
+          <td></td>
+          <td>z-index of node text edit box elements</td>
+        </tr>
+        <tr>
+          <td>nodeNoteTooltipZIndex（v0.5.5+）</td>
+          <td>Number</td>
+          <td>3000</td>
+          <td>z-index of floating layer elements in node comments</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Whether to end the editing status of node text when clicking on an area outside the canvas</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>maxHistoryCount（v0.5.6+）</td>
+          <td>Number</td>
+          <td>1000</td>
+          <td></td>
+          <td>Maximum number of history records</td>
+        </tr>
+        <tr>
+          <td>alwaysShowExpandBtn（v0.5.8+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse
+            is moved up and activated by default</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>iconList（v0.5.8+）</td>
+          <td>Array</td>
+          <td>[]</td>
+          <td>The icons that can be inserted into the extension node, and each item in the array is an object. Please
+            refer to the &quot;Icon Configuration&quot; table below for the detailed structure of the object</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>maxNodeCacheCount（v0.5.10+）</td>
+          <td>Number</td>
+          <td>1000</td>
+          <td>The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to
+            reuse nodes. This attribute allows you to specify the maximum number of caches in the pool</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>defaultAssociativeLineText（v0.5.11+）</td>
+          <td>String</td>
+          <td>关联</td>
+          <td>Association Line Default Text</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>fitPadding（v0.6.0+）</td>
+          <td>Number</td>
+          <td>50</td>
+          <td>The padding of mind mapping when adapting to canvas size, Unit: px</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableCtrlKeyNodeSelection（v0.6.0+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Whether to enable the function of holding down the Ctrl key to select multiple nodes</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Setting to left click to select multiple nodes and right click to drag the canvas.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>beforeTextEdit（v0.6.0+）</td>
+          <td>Function/null</td>
+          <td>null</td>
+          <td>The callback method before the node is about to enter editing. If the method returns a value other than
+            true, the editing will be canceled. The function can return a value or a promise, and the callback parameter
+            is the node instance</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>isUseCustomNodeContent（v0.6.3+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Whether to customize node content</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customCreateNodeContent（v0.6.3+）</td>
+          <td>Function/null</td>
+          <td>null</td>
+          <td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to
+            pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data
+            for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content
+            element, which is the DOM node. If a node does not require customization, you can return <code>null</code>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customInnerElsAppendTo（v0.6.12+）</td>
+          <td>null/HTMLElement</td>
+          <td>null</td>
+          <td>Specify the location where some internal elements (node text editing element, node note display element,
+            associated line text editing element, node image adjustment button element) are added, and default to
+            document.body</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>nodeDragPlaceholderMaxSize（v0.6.12+）</td>
+          <td>Number</td>
+          <td>20</td>
+          <td>When dragging an element, the maximum height of the block indicating the new position of the element</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+ remove this feature）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data
+            and automatically entering the text editing state</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when
+            there is an activation node?</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>richTextEditFakeInPlace（v0.6.13+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It
+            should be noted that only when there is only text within the node and the shape is rectangular, can the effect
+            be better</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customHandleClipboardText（v0.6.14+）</td>
+          <td>Function</td>
+          <td>null</td>
+          <td>Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images
+            from the user's clipboard. By default, it will only determine whether the text is regular text and node data
+            in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you
+            can pass a function that takes the text from the current clipboard as a parameter and returns the processed
+            data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that
+            text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: '' },
+            children: [] } }, The representative is data in simple bind map format, and the node data is in the same
+            format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return
+            a promise</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>errorHandler（v0.6.15+）</td>
+          <td>Function</td>
+          <td></td>
+          <td>Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function
+            that takes two parameters, the first being the wrong type and the second being the wrong object</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>disableMouseWheelZoom（v0.6.15+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Prohibit mouse wheel scaling, you can still use the API for scaling</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>resetCss（v0.6.16+）</td>
+          <td>String</td>
+          <td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
+          <td>When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in
+            HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableDblclickReset（v0.6.17+）</td>
+          <td>Boolean</td>
+          <td>true(v0.7.0+changed to false)</td>
+          <td>Turn on the mouse and double-click to reset the position and zoom of the mind map</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>minExportImgCanvasScale（v0.7.0+）</td>
+          <td>Number</td>
+          <td>2</td>
+          <td>The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of
+            window.devicePixelRatio to improve image clarity</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hoverRectColor（v0.7.0+）</td>
+          <td>String</td>
+          <td>rgb(94, 200, 248)</td>
+          <td>The node mouse hover and the rectangular border color displayed when activated will add a transparency of
+            0.6 when hovering</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hoverRectPadding（v0.7.0+）</td>
+          <td>Number</td>
+          <td>2</td>
+          <td>The distance between the node mouse hover and the displayed rectangular border when activated and the node
+            content</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>selectTextOnEnterEditText（v0.7.0+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Is the text selected by default when double-clicking a node to enter node text editing? By default, it will
+            only be selected when creating a new node</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>deleteNodeActive（v0.7.1+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging
+            nodes</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>fit</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Whether to fit view at first render</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Data structure</h3>
+    <p>The basic data structure is as follows:</p>
+    <pre class="hljs"><code>{
   <span class="hljs-attr">data</span>: {
     <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// The text of the node can be rich text, which is in HTML format. In this case, richText should be set to true</span>
     <span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Is the text of the node in rich text mode</span>
@@ -520,91 +581,99 @@
   ]
 }
 </code></pre>
-<p>If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the <code>_</code> Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.</p>
-<h3>Watermark config</h3>
-<table>
-<thead>
-<tr>
-<th>Field Name</th>
-<th>Type</th>
-<th>Default Value</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>text</td>
-<td>String</td>
-<td>''</td>
-<td>Watermark text. If it is an empty string, the watermark will not be displayed</td>
-</tr>
-<tr>
-<td>lineSpacing</td>
-<td>Number</td>
-<td>100</td>
-<td>Spacing between watermark lines</td>
-</tr>
-<tr>
-<td>textSpacing</td>
-<td>Number</td>
-<td>100</td>
-<td>Spacing between watermarks in the same row</td>
-</tr>
-<tr>
-<td>angle</td>
-<td>Number</td>
-<td>30</td>
-<td>Tilt angle of watermark, range: [0, 90]</td>
-</tr>
-<tr>
-<td>textStyle</td>
-<td>Object</td>
-<td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
-<td>Watermark text style</td>
-</tr>
-</tbody>
-</table>
-<h3>Icon Configuration</h3>
-<table>
-<thead>
-<tr>
-<th>Field Name</th>
-<th>Type</th>
-<th>Default Value</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>name</td>
-<td>String</td>
-<td></td>
-<td>The name of the icon group</td>
-</tr>
-<tr>
-<td>type</td>
-<td>String</td>
-<td></td>
-<td>Values for icon grouping</td>
-</tr>
-<tr>
-<td>list</td>
-<td>Array</td>
-<td></td>
-<td>A list of icons under grouping, with each item in the array being an object, <code>{ name: '', icon: '' }</code>，<code>name</code>represents the name of the icon, <code>icon</code>represents the icon, Can be an <code>svg</code> icon, such as <code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>, also can be a image <code>url</code>, or <code>base64</code> icon, such as <code>data:image/png;base64,...</code></td>
-</tr>
-</tbody>
-</table>
-<h2>Static methods</h2>
-<h3>defineTheme(name, config)</h3>
-<blockquote>
-<p>v0.2.23+</p>
-</blockquote>
-<p>Define new theme.</p>
-<p><code>name</code>：New theme name</p>
-<p><code>config</code>：New theme config</p>
-<p><code>Simple-mind-map </code> Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:</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>
+    <p>If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add
+      them to the 'data' object, please use the <code>_</code> Name your custom field at the beginning, and it will be
+      used internally to determine whether it is a custom field.</p>
+    <h3>Watermark config</h3>
+    <table>
+      <thead>
+        <tr>
+          <th>Field Name</th>
+          <th>Type</th>
+          <th>Default Value</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>text</td>
+          <td>String</td>
+          <td>''</td>
+          <td>Watermark text. If it is an empty string, the watermark will not be displayed</td>
+        </tr>
+        <tr>
+          <td>lineSpacing</td>
+          <td>Number</td>
+          <td>100</td>
+          <td>Spacing between watermark lines</td>
+        </tr>
+        <tr>
+          <td>textSpacing</td>
+          <td>Number</td>
+          <td>100</td>
+          <td>Spacing between watermarks in the same row</td>
+        </tr>
+        <tr>
+          <td>angle</td>
+          <td>Number</td>
+          <td>30</td>
+          <td>Tilt angle of watermark, range: [0, 90]</td>
+        </tr>
+        <tr>
+          <td>textStyle</td>
+          <td>Object</td>
+          <td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
+          <td>Watermark text style</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Icon Configuration</h3>
+    <table>
+      <thead>
+        <tr>
+          <th>Field Name</th>
+          <th>Type</th>
+          <th>Default Value</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>name</td>
+          <td>String</td>
+          <td></td>
+          <td>The name of the icon group</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>String</td>
+          <td></td>
+          <td>Values for icon grouping</td>
+        </tr>
+        <tr>
+          <td>list</td>
+          <td>Array</td>
+          <td></td>
+          <td>A list of icons under grouping, with each item in the array being an object,
+            <code>{ name: '', icon: '' }</code>，<code>name</code>represents the name of the icon,
+            <code>icon</code>represents the icon, Can be an <code>svg</code> icon, such as
+            <code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>, also can be a image <code>url</code>, or
+            <code>base64</code> icon, such as <code>data:image/png;base64,...</code></td>
+        </tr>
+      </tbody>
+    </table>
+    <h2>Static methods</h2>
+    <h3>defineTheme(name, config)</h3>
+    <blockquote>
+      <p>v0.2.23+</p>
+    </blockquote>
+    <p>Define new theme.</p>
+    <p><code>name</code>：New theme name</p>
+    <p><code>config</code>：New theme config</p>
+    <p><code>Simple-mind-map </code> Built-in many themes. In addition, you can register new theme. It is recommended to
+      register before instantiation, so that you can directly use the newly registered theme during instantiation. Use
+      example:</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;Theme name&#x27;</span>, {})
 
@@ -616,41 +685,49 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
 <span class="hljs-comment">// 2.动态切换新主题</span>
 mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 </code></pre>
-<p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of the themes  do not need custom many parts. For a typical customized theme configuration, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
-<h3>usePlugin(plugin, opt = {})</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<ul>
-<li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.</li>
-</ul>
-<p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.</p>
-<p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
-<h3>hasPlugin(plugin)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is <code>-1</code>, it means that the plugin is not registered.</p>
-<h2>Static props</h2>
-<h3>pluginList</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<p>List of all currently registered plugins.</p>
-<h2>Instance methods</h2>
-<h3>destroy()</h3>
-<blockquote>
-<p>v0.6.0+</p>
-</blockquote>
-<p>Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.</p>
-<h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<p><code>paddingX</code>: Padding x</p>
-<p><code>paddingY</code>: Padding y</p>
-<p>Get the <code>svg</code> data and return an object. The detailed structure is as follows:</p>
-<pre class="hljs"><code>{
+    <p>For all configurations of theme, please refer to <a
+        href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The
+      <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of
+      the themes do not need custom many parts. For a typical customized theme configuration, please refer to <a
+        href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
+    <h3>usePlugin(plugin, opt = {})</h3>
+    <blockquote>
+      <p>v0.3.0+</p>
+    </blockquote>
+    <ul>
+      <li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this
+        parameter.</li>
+    </ul>
+    <p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this
+      method. Can be called in chain.</p>
+    <p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
+    <h3>hasPlugin(plugin)</h3>
+    <blockquote>
+      <p>v0.4.0+</p>
+    </blockquote>
+    <p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is
+      <code>-1</code>, it means that the plugin is not registered.</p>
+    <h2>Static props</h2>
+    <h3>pluginList</h3>
+    <blockquote>
+      <p>v0.3.0+</p>
+    </blockquote>
+    <p>List of all currently registered plugins.</p>
+    <h2>Instance methods</h2>
+    <h3>destroy()</h3>
+    <blockquote>
+      <p>v0.6.0+</p>
+    </blockquote>
+    <p>Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.
+    </p>
+    <h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
+    <blockquote>
+      <p>v0.3.0+</p>
+    </blockquote>
+    <p><code>paddingX</code>: Padding x</p>
+    <p><code>paddingY</code>: Padding y</p>
+    <p>Get the <code>svg</code> data and return an object. The detailed structure is as follows:</p>
+    <pre class="hljs"><code>{
   svg, <span class="hljs-comment">// Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)</span>
   svgHTML, <span class="hljs-comment">// String, svg string, i.e. html string, can be directly rendered to the small map container you prepared</span>
   <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object, position, size, etc. of mind map graphics before zoom</span>
@@ -660,504 +737,557 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
   scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
 }
 </code></pre>
-<h3>render(callback)</h3>
-<ul>
-<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
-</ul>
-<p>Triggers a full rendering, which will reuse nodes for better performance. If
-only the node positions have changed, this method can be called to <code>reRender</code>.</p>
-<h3>reRender(callback)</h3>
-<ul>
-<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
-</ul>
-<p>Performs a full re-render, clearing the canvas and creating new nodes. This has
-poor performance and should be used sparingly.</p>
-<h3>resize()</h3>
-<p>After the container size has changed, this method should be called to adjust.</p>
-<h3>setMode(mode)</h3>
-<blockquote>
-<p>v0.1.7+</p>
-</blockquote>
-<p>Switches between readonly and edit mode.</p>
-<p><code>mode</code>：readonly、edit</p>
-<h3>on(event, fn)</h3>
-<p>Listen to an event. Event list:</p>
-<table>
-<thead>
-<tr>
-<th>Event Name</th>
-<th>Description</th>
-<th>Callback Parameters</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>data_change</td>
-<td>Tree rendering data change, listen to this method to get the latest data</td>
-<td>data (current tree rendering data)</td>
-</tr>
-<tr>
-<td>view_data_change（v0.1.1+）</td>
-<td>View change data, such as when dragging or zooming</td>
-<td>data (current view state data)</td>
-</tr>
-<tr>
-<td>back_forward</td>
-<td>Forward or backward</td>
-<td>activeHistoryIndex (current index in the history data array), length (current length of the history data array)</td>
-</tr>
-<tr>
-<td>draw_click</td>
-<td>Canvas click event</td>
-<td>e (event object)</td>
-</tr>
-<tr>
-<td>svg_mousedown</td>
-<td>svg canvas mouse down event</td>
-<td>e (event object)</td>
-</tr>
-<tr>
-<td>mousedown</td>
-<td>el element mouse down event</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>mousemove</td>
-<td>el element mouse move event</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>drag</td>
-<td>If it is a drag event while holding down the left button</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>mouseup</td>
-<td>el element mouse up event</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>mousewheel</td>
-<td>Mouse scroll event</td>
-<td>e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad）</td>
-</tr>
-<tr>
-<td>contextmenu</td>
-<td>svg canvas right mouse button menu event</td>
-<td>e (event object)</td>
-</tr>
-<tr>
-<td>node_click</td>
-<td>Node click event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mousedown</td>
-<td>Node mouse down event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mouseup</td>
-<td>node mouseup event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mouseup</td>
-<td>Node mouseup event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_dblclick</td>
-<td>Node double-click event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_contextmenu</td>
-<td>Node right-click menu event</td>
-<td>e (event object), this (node instance)</td>
-</tr>
-<tr>
-<td>node_mouseenter（v0.4.1+）</td>
-<td>Node mouseenter event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mouseleave（v0.4.1+）</td>
-<td>Node mouseleave event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>before_node_active</td>
-<td>Event before node activation</td>
-<td>this (node instance), activeNodeList (current list of active nodes)</td>
-</tr>
-<tr>
-<td>node_active</td>
-<td>Node activation event</td>
-<td>this (node instance), activeNodeList (current list of active nodes)</td>
-</tr>
-<tr>
-<td>expand_btn_click</td>
-<td>Node expand or collapse event</td>
-<td>this (node instance)</td>
-</tr>
-<tr>
-<td>before_show_text_edit</td>
-<td>Event before node text edit box opens</td>
-<td></td>
-</tr>
-<tr>
-<td>hide_text_edit</td>
-<td>Node text edit box close event</td>
-<td>textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)</td>
-</tr>
-<tr>
-<td>scale</td>
-<td>Zoom event</td>
-<td>scale (zoom ratio)</td>
-</tr>
-<tr>
-<td>node_img_dblclick（v0.2.15+）</td>
-<td>Node image double-click event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_img_mouseenter（v0.6.5+）</td>
-<td>Node image mouseenter event</td>
-<td>this（node instance）、imgNode（img node）、e（event object）</td>
-</tr>
-<tr>
-<td>node_img_mouseleave（v0.6.5+）</td>
-<td>Node image mouseleave event</td>
-<td>this（node instance）、imgNode（img node）、e（event object）</td>
-</tr>
-<tr>
-<td>node_img_mousemove（v0.6.5+）</td>
-<td>Node image mousemove event</td>
-<td>this（node instance）、imgNode（img node）、e（event object）</td>
-</tr>
-<tr>
-<td>node_tree_render_end（v0.2.16+）</td>
-<td>Node tree render end event</td>
-<td></td>
-</tr>
-<tr>
-<td>rich_text_selection_change（v0.4.0+）</td>
-<td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area changes when the node is edited</td>
-<td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）</td>
-</tr>
-<tr>
-<td>transforming-dom-to-images（v0.4.0+）</td>
-<td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting</td>
-<td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
-</tr>
-<tr>
-<td>node_dragging（v0.4.5+）</td>
-<td>Triggered when a node is dragged</td>
-<td>node(The currently dragged node)</td>
-</tr>
-<tr>
-<td>node_dragend（v0.4.5+）</td>
-<td>Triggered when the node is dragged and ends</td>
-<td>{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，The node uid to which the node is moved this time, for example, if it is moved to node A, then the overlayNodeUid is the uid of node A. If it is moved to the front of node B, then the nextNodeUid is the uid of node B. You can obtain the node instance through the mindMap. extender.findNodeByUid(uid) method）</td>
-</tr>
-<tr>
-<td>associative_line_click（v0.4.5+）</td>
-<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>
-<tr>
-<td>node_icon_click（v0.6.10+）</td>
-<td>Triggered when clicking on an icon within a node</td>
-<td>this（node instance）、item（Click on the icon name）、e（event object）</td>
-</tr>
-<tr>
-<td>view_theme_change（v0.6.12+）</td>
-<td>Triggered after calling the setTheme method to set the theme</td>
-<td>theme（theme name）</td>
-</tr>
-</tbody>
-</table>
-<h3>emit(event, ...args)</h3>
-<p>Trigger an event, which can be one of the events listed above or a custom event.</p>
-<h3>off(event, fn)</h3>
-<p>Unbind an event.</p>
-<h3>setTheme(theme)</h3>
-<p>Switches the theme. Available themes can be found in the options table above.</p>
-<h3>getTheme()</h3>
-<p>Gets the current theme.</p>
-<h3>setThemeConfig(config)</h3>
-<p>Sets the theme configuration. <code>config</code> is the same as the <code>themeConfig</code> option
-in the options table above.</p>
-<h3>getCustomThemeConfig()</h3>
-<p>Gets the custom theme configuration.</p>
-<h3>getThemeConfig(prop)</h3>
-<p>Gets the value of a specific theme configuration property.</p>
-<h3>getConfig(<em>prop</em>)</h3>
-<blockquote>
-<p>0.2.24+</p>
-</blockquote>
-<p><code>prop</code>：Get the value of the specified configuration, and return the entire configuration if not passed</p>
-<p>Get config, That is,  <code>opt</code> of <code>new MindMap (opt)</code></p>
-<h3>updateConfig(<em>opt</em> = {})</h3>
-<blockquote>
-<p>0.2.24+</p>
-</blockquote>
-<p><code>opt</code>：Configuration to update</p>
-<p>Update config，That is update <code>opt</code> of <code>new MindMap(opt)</code>，You can only update some data, such as:</p>
-<pre class="hljs"><code>mindMap.updateConfig({
+    <h3>render(callback)</h3>
+    <ul>
+      <li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete
+      </li>
+    </ul>
+    <p>Triggers a full rendering, which will reuse nodes for better performance. If
+      only the node positions have changed, this method can be called to <code>reRender</code>.</p>
+    <h3>reRender(callback)</h3>
+    <ul>
+      <li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete
+      </li>
+    </ul>
+    <p>Performs a full re-render, clearing the canvas and creating new nodes. This has
+      poor performance and should be used sparingly.</p>
+    <h3>resize()</h3>
+    <p>After the container size has changed, this method should be called to adjust.</p>
+    <h3>setMode(mode)</h3>
+    <blockquote>
+      <p>v0.1.7+</p>
+    </blockquote>
+    <p>Switches between readonly and edit mode.</p>
+    <p><code>mode</code>：readonly、edit</p>
+    <h3>on(event, fn)</h3>
+    <p>Listen to an event. Event list:</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Event Name</th>
+          <th>Description</th>
+          <th>Callback Parameters</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>data_change</td>
+          <td>Tree rendering data change, listen to this method to get the latest data</td>
+          <td>data (current tree rendering data)</td>
+        </tr>
+        <tr>
+          <td>view_data_change（v0.1.1+）</td>
+          <td>View change data, such as when dragging or zooming</td>
+          <td>data (current view state data)</td>
+        </tr>
+        <tr>
+          <td>back_forward</td>
+          <td>Forward or backward</td>
+          <td>activeHistoryIndex (current index in the history data array), length (current length of the history data
+            array)</td>
+        </tr>
+        <tr>
+          <td>draw_click</td>
+          <td>Canvas click event</td>
+          <td>e (event object)</td>
+        </tr>
+        <tr>
+          <td>svg_mousedown</td>
+          <td>svg canvas mouse down event</td>
+          <td>e (event object)</td>
+        </tr>
+        <tr>
+          <td>mousedown</td>
+          <td>el element mouse down event</td>
+          <td>e (event object), this (Event event class instance)</td>
+        </tr>
+        <tr>
+          <td>mousemove</td>
+          <td>el element mouse move event</td>
+          <td>e (event object), this (Event event class instance)</td>
+        </tr>
+        <tr>
+          <td>drag</td>
+          <td>If it is a drag event while holding down the left button</td>
+          <td>e (event object), this (Event event class instance)</td>
+        </tr>
+        <tr>
+          <td>mouseup</td>
+          <td>el element mouse up event</td>
+          <td>e (event object), this (Event event class instance)</td>
+        </tr>
+        <tr>
+          <td>mousewheel</td>
+          <td>Mouse scroll event</td>
+          <td>e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an
+            event triggered by the touchpad）</td>
+        </tr>
+        <tr>
+          <td>contextmenu</td>
+          <td>svg canvas right mouse button menu event</td>
+          <td>e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_click</td>
+          <td>Node click event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_mousedown</td>
+          <td>Node mouse down event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_mouseup</td>
+          <td>node mouseup event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_mouseup</td>
+          <td>Node mouseup event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_dblclick</td>
+          <td>Node double-click event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_contextmenu</td>
+          <td>Node right-click menu event</td>
+          <td>e (event object), this (node instance)</td>
+        </tr>
+        <tr>
+          <td>node_mouseenter（v0.4.1+）</td>
+          <td>Node mouseenter event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_mouseleave（v0.4.1+）</td>
+          <td>Node mouseleave event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>before_node_active</td>
+          <td>Event before node activation</td>
+          <td>this (node instance), activeNodeList (current list of active nodes)</td>
+        </tr>
+        <tr>
+          <td>node_active</td>
+          <td>Node activation event</td>
+          <td>this (node instance), activeNodeList (current list of active nodes)</td>
+        </tr>
+        <tr>
+          <td>expand_btn_click</td>
+          <td>Node expand or collapse event</td>
+          <td>this (node instance)</td>
+        </tr>
+        <tr>
+          <td>before_show_text_edit</td>
+          <td>Event before node text edit box opens</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hide_text_edit</td>
+          <td>Node text edit box close event</td>
+          <td>textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)</td>
+        </tr>
+        <tr>
+          <td>scale</td>
+          <td>Zoom event</td>
+          <td>scale (zoom ratio)</td>
+        </tr>
+        <tr>
+          <td>node_img_dblclick（v0.2.15+）</td>
+          <td>Node image double-click event</td>
+          <td>this (node instance), e (event object)</td>
+        </tr>
+        <tr>
+          <td>node_img_mouseenter（v0.6.5+）</td>
+          <td>Node image mouseenter event</td>
+          <td>this（node instance）、imgNode（img node）、e（event object）</td>
+        </tr>
+        <tr>
+          <td>node_img_mouseleave（v0.6.5+）</td>
+          <td>Node image mouseleave event</td>
+          <td>this（node instance）、imgNode（img node）、e（event object）</td>
+        </tr>
+        <tr>
+          <td>node_img_mousemove（v0.6.5+）</td>
+          <td>Node image mousemove event</td>
+          <td>this（node instance）、imgNode（img node）、e（event object）</td>
+        </tr>
+        <tr>
+          <td>node_tree_render_end（v0.2.16+）</td>
+          <td>Node tree render end event</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>rich_text_selection_change（v0.4.0+）</td>
+          <td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area
+            changes when the node is edited</td>
+          <td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected
+            area）、formatInfo（Text formatting information of the selected area）</td>
+        </tr>
+        <tr>
+          <td>transforming-dom-to-images（v0.4.0+）</td>
+          <td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in
+            <code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This
+            event will be triggered during the conversion process. You can use this event to prompt the user about the
+            node to which you are currently converting</td>
+          <td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
+        </tr>
+        <tr>
+          <td>node_dragging（v0.4.5+）</td>
+          <td>Triggered when a node is dragged</td>
+          <td>node(The currently dragged node)</td>
+        </tr>
+        <tr>
+          <td>node_dragend（v0.4.5+）</td>
+          <td>Triggered when the node is dragged and ends</td>
+          <td>{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，The node uid to which the node is moved this time, for
+            example, if it is moved to node A, then the overlayNodeUid is the uid of node A. If it is moved to the front
+            of node B, then the nextNodeUid is the uid of node B. You can obtain the node instance through the mindMap.
+            extender.findNodeByUid(uid) method）</td>
+        </tr>
+        <tr>
+          <td>associative_line_click（v0.4.5+）</td>
+          <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>
+        <tr>
+          <td>node_icon_click（v0.6.10+）</td>
+          <td>Triggered when clicking on an icon within a node</td>
+          <td>this（node instance）、item（Click on the icon name）、e（event object）</td>
+        </tr>
+        <tr>
+          <td>view_theme_change（v0.6.12+）</td>
+          <td>Triggered after calling the setTheme method to set the theme</td>
+          <td>theme（theme name）</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>emit(event, ...args)</h3>
+    <p>Trigger an event, which can be one of the events listed above or a custom event.</p>
+    <h3>off(event, fn)</h3>
+    <p>Unbind an event.</p>
+    <h3>setTheme(theme)</h3>
+    <p>Switches the theme. Available themes can be found in the options table above.</p>
+    <h3>getTheme()</h3>
+    <p>Gets the current theme.</p>
+    <h3>setThemeConfig(config)</h3>
+    <p>Sets the theme configuration. <code>config</code> is the same as the <code>themeConfig</code> option
+      in the options table above.</p>
+    <h3>getCustomThemeConfig()</h3>
+    <p>Gets the custom theme configuration.</p>
+    <h3>getThemeConfig(prop)</h3>
+    <p>Gets the value of a specific theme configuration property.</p>
+    <h3>getConfig(<em>prop</em>)</h3>
+    <blockquote>
+      <p>0.2.24+</p>
+    </blockquote>
+    <p><code>prop</code>：Get the value of the specified configuration, and return the entire configuration if not passed
+    </p>
+    <p>Get config, That is, <code>opt</code> of <code>new MindMap (opt)</code></p>
+    <h3>updateConfig(<em>opt</em> = {})</h3>
+    <blockquote>
+      <p>0.2.24+</p>
+    </blockquote>
+    <p><code>opt</code>：Configuration to update</p>
+    <p>Update config，That is update <code>opt</code> of <code>new MindMap(opt)</code>，You can only update some data, such
+      as:</p>
+    <pre class="hljs"><code>mindMap.updateConfig({
     <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
 })
 </code></pre>
-<p>This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering</p>
-<h3>getLayout()</h3>
-<p>Gets the current layout structure.</p>
-<h3>setLayout(layout)</h3>
-<p>Sets the layout structure. Available values can be found in the <code>layout</code> field
-in the options table above.</p>
-<h3>execCommand(name, ...args)</h3>
-<p>Executes a command, which will add a record to the history stack for undo or
-redo. All commands are as follows:</p>
-<table>
-<thead>
-<tr>
-<th>Command name</th>
-<th>Description</th>
-<th>Parameters</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>SELECT_ALL</td>
-<td>Select all</td>
-<td></td>
-</tr>
-<tr>
-<td>BACK</td>
-<td>Go back a specified number of steps</td>
-<td>step (the number of steps to go back, default is 1)</td>
-</tr>
-<tr>
-<td>FORWARD</td>
-<td>Go forward a specified number of steps</td>
-<td>step (the number of steps to go forward, default is 1)</td>
-</tr>
-<tr>
-<td>INSERT_NODE</td>
-<td>Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective</td>
-<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a> ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
-</tr>
-<tr>
-<td>INSERT_CHILD_NODE</td>
-<td>Insert a child node, the active node or appoint node will be the operation node</td>
-<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a> ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
-</tr>
-<tr>
-<td>UP_NODE</td>
-<td>Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid</td>
-<td></td>
-</tr>
-<tr>
-<td>DOWN_NODE</td>
-<td>Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid</td>
-<td></td>
-</tr>
-<tr>
-<td>REMOVE_NODE</td>
-<td>Remove node, the active node or appoint node will be the operation node</td>
-<td>appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）</td>
-</tr>
-<tr>
-<td>PASTE_NODE</td>
-<td>Paste node to a node, the active node will be the operation node</td>
-<td>data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods)</td>
-</tr>
-<tr>
-<td>SET_NODE_STYLE</td>
-<td>Modify node single style</td>
-<td>node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state)</td>
-</tr>
-<tr>
-<td>SET_NODE_STYLEs（v0.6.12+）</td>
-<td>Modify multiple styles of nodes</td>
-<td>node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state）</td>
-</tr>
-<tr>
-<td>SET_NODE_ACTIVE</td>
-<td>Set whether the node is active</td>
-<td>node (the node to set), active (boolean, whether to activate)</td>
-</tr>
-<tr>
-<td>CLEAR_ACTIVE_NODE</td>
-<td>Clear the active state of the currently active node(s), the active node will be the operation node</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_EXPAND</td>
-<td>Set whether the node is expanded</td>
-<td>node (the node to set), expand (boolean, whether to expand)</td>
-</tr>
-<tr>
-<td>EXPAND_ALL</td>
-<td>Expand all nodes</td>
-<td></td>
-</tr>
-<tr>
-<td>UNEXPAND_ALL</td>
-<td>Collapse all nodes</td>
-<td></td>
-</tr>
-<tr>
-<td>UNEXPAND_TO_LEVEL (v0.2.8+)</td>
-<td>Expand to a specified level</td>
-<td>level (the level to expand to, 1, 2, 3...)</td>
-</tr>
-<tr>
-<td>SET_NODE_DATA</td>
-<td>Update node data, that is, update the data in the data object of the node data object</td>
-<td>node (the node to set), data (object, the data to update, e.g. <code>{expand: true}</code>)</td>
-</tr>
-<tr>
-<td>SET_NODE_TEXT</td>
-<td>Set node text</td>
-<td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to <code>true</code>）、resetRichText（v0.6.10+Do you want to reset rich text? The default is false. If true is passed, the style of the rich text node will be reset）</td>
-</tr>
-<tr>
-<td>SET_NODE_IMAGE</td>
-<td>Set Node Image</td>
-<td>node (node to set), imgData (object, image information, structured as: <code>{url, title, width, height}</code>, the width and height of the image must be passed)</td>
-</tr>
-<tr>
-<td>SET_NODE_ICON</td>
-<td>Set Node Icon</td>
-<td>node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a> file, icon name is type_name, such as ['priority_1'])</td>
-</tr>
-<tr>
-<td>SET_NODE_HYPERLINK</td>
-<td>Set Node Hyperlink</td>
-<td>node (node to set), link (hyperlink address), title (hyperlink name, optional)</td>
-</tr>
-<tr>
-<td>SET_NODE_NOTE</td>
-<td>Set Node Note</td>
-<td>node (node to set), note (note text)</td>
-</tr>
-<tr>
-<td>SET_NODE_TAG</td>
-<td>Set Node Tag</td>
-<td>node (node to set), tag (string array, built-in color information can be obtained in <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>)</td>
-</tr>
-<tr>
-<td>INSERT_AFTER (v0.1.5+)</td>
-<td>Move Node to After Another Node</td>
-<td>node (node to move), exist (target node)</td>
-</tr>
-<tr>
-<td>INSERT_BEFORE (v0.1.5+)</td>
-<td>Move Node to Before Another Node</td>
-<td>node (node to move), exist (target node)</td>
-</tr>
-<tr>
-<td>MOVE_NODE_TO (v0.1.5+)</td>
-<td>Move a node as a child of another node</td>
-<td>node (the node to move), toNode (the target node)</td>
-</tr>
-<tr>
-<td>ADD_GENERALIZATION (v0.2.0+)</td>
-<td>Add a node summary</td>
-<td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is <code>{text: 'summary'}</code>)</td>
-</tr>
-<tr>
-<td>REMOVE_GENERALIZATION (v0.2.0+)</td>
-<td>Remove a node summary</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_CUSTOM_POSITION (v0.2.0+)</td>
-<td>Set a custom position for a node</td>
-<td>node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined)</td>
-</tr>
-<tr>
-<td>RESET_LAYOUT (v0.2.0+)</td>
-<td>Arrange layout with one click</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_SHAPE (v0.2.4+)</td>
-<td>Set the shape of a node</td>
-<td>node (the node to set), shape (the shape, all shapes: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>)</td>
-</tr>
-<tr>
-<td>GO_TARGET_NODE（v0.6.7+）</td>
-<td>Navigate to a node, and if the node is collapsed, it will automatically expand to that node</td>
-<td>node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion）</td>
-</tr>
-</tbody>
-</table>
-<h3>setData(data)</h3>
-<p>Dynamic setting of mind map data, pure node data</p>
-<p><code>data</code>: mind map structure data</p>
-<h3>setFullData(<em>data</em>)</h3>
-<blockquote>
-<p>v0.2.7+</p>
-</blockquote>
-<p>Dynamic setting of mind map data, including node data, layout, theme, view</p>
-<p><code>data</code>: complete data, structure can refer to
-<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
-<h3>getData(withConfig)</h3>
-<blockquote>
-<p>v0.2.9+</p>
-</blockquote>
-<p>Gets mind map data</p>
-<p><code>withConfig</code>: <code>Boolean</code>, default is <code>false</code>, that is, the obtained data only
-includes the node tree, if <code>true</code> is passed, it will also include theme, layout,
-view, etc. data</p>
-<h3>export(type, isDownload, fileName)</h3>
-<blockquote>
-<p>You need to register the <code>Export</code> plugin first</p>
-</blockquote>
-<p>Export</p>
-<p><code>type</code>: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
-smm (essentially also json)</p>
-<p><code>isDownload</code>: whether to directly trigger download, Boolean value, default is
-<code>false</code></p>
-<p><code>fileName</code>: (v0.1.6+) the name of the exported file, default is <code>思维导图</code> (mind
-map).</p>
-<p>If it is exported as <code>png</code>, the fourth parameter can be passed:</p>
-<p><code>transparent</code>: v0.5.7+, <code>Boolean</code>, default is <code>false</code>, Specify whether the background of the exported image is transparent</p>
-<p>If it is exported as <code>svg</code>, the fourth parameter can be passed:</p>
-<p><code>plusCssText</code>: Additional <code>CSS</code> style. If there is a <code>dom</code> node in <code>svg</code>, you can pass in some styles specific to the node through this parameter</p>
-<p>If it is exported as <code>json</code> or <code>smm</code>, the fourth parameter can be passed:</p>
-<p><code>withConfig</code>: <code>Boolean</code>, default is <code>true</code>, Specify whether the exported data includes configuration data, otherwise only pure node tree data will be exported</p>
-<h3>toPos(x, y)</h3>
-<blockquote>
-<p>v0.1.5+</p>
-</blockquote>
-<p>Convert the coordinates of the browser's visible window to coordinates relative
-to the canvas.</p>
-<h3>addPlugin(plugin, opt)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the <code>addPlugin</code> method of the instance.</p>
-<h3>removePlugin(plugin)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods can be removed.</p>
+    <p>This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering
+    </p>
+    <h3>getLayout()</h3>
+    <p>Gets the current layout structure.</p>
+    <h3>setLayout(layout)</h3>
+    <p>Sets the layout structure. Available values can be found in the <code>layout</code> field
+      in the options table above.</p>
+    <h3>execCommand(name, ...args)</h3>
+    <p>Executes a command, which will add a record to the history stack for undo or
+      redo. All commands are as follows:</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Command name</th>
+          <th>Description</th>
+          <th>Parameters</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>SELECT_ALL</td>
+          <td>Select all</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>BACK</td>
+          <td>Go back a specified number of steps</td>
+          <td>step (the number of steps to go back, default is 1)</td>
+        </tr>
+        <tr>
+          <td>FORWARD</td>
+          <td>Go forward a specified number of steps</td>
+          <td>step (the number of steps to go forward, default is 1)</td>
+        </tr>
+        <tr>
+          <td>INSERT_NODE</td>
+          <td>Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple
+            active nodes, only the first one will be effective</td>
+          <td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is
+            <code>true</code>） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an
+            array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...},
+            Detailed structure can be referred to <a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>
+            ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
+        </tr>
+        <tr>
+          <td>INSERT_CHILD_NODE</td>
+          <td>Insert a child node, the active node or appoint node will be the operation node</td>
+          <td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is
+            <code>true</code>）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an
+            array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...},
+            Detailed structure can be referred to <a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>
+            ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
+        </tr>
+        <tr>
+          <td>UP_NODE</td>
+          <td>Move node up, the active node will be the operation node. If there are multiple active nodes, only the first
+            one will be effective. Using this command on the root node or the first node in the list will be invalid</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>DOWN_NODE</td>
+          <td>Move node down, the active node will be the operation node. If there are multiple active nodes, only the
+            first one will be effective. Using this command on the root node or the last node in the list will be invalid
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>REMOVE_NODE</td>
+          <td>Remove node, the active node or appoint node will be the operation node</td>
+          <td>appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）</td>
+        </tr>
+        <tr>
+          <td>PASTE_NODE</td>
+          <td>Paste node to a node, the active node will be the operation node</td>
+          <td>data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode()
+            methods)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_STYLE</td>
+          <td>Modify node single style</td>
+          <td>node (the node to set the style of), prop (style property), value (style property value), isActive
+            (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_STYLEs（v0.6.12+）</td>
+          <td>Modify multiple styles of nodes</td>
+          <td>node（the node to set the style of）、style（Style object，key is style prop，value is style
+            value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_ACTIVE</td>
+          <td>Set whether the node is active</td>
+          <td>node (the node to set), active (boolean, whether to activate)</td>
+        </tr>
+        <tr>
+          <td>CLEAR_ACTIVE_NODE</td>
+          <td>Clear the active state of the currently active node(s), the active node will be the operation node</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>SET_NODE_EXPAND</td>
+          <td>Set whether the node is expanded</td>
+          <td>node (the node to set), expand (boolean, whether to expand)</td>
+        </tr>
+        <tr>
+          <td>EXPAND_ALL</td>
+          <td>Expand all nodes</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>UNEXPAND_ALL</td>
+          <td>Collapse all nodes</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>UNEXPAND_TO_LEVEL (v0.2.8+)</td>
+          <td>Expand to a specified level</td>
+          <td>level (the level to expand to, 1, 2, 3...)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_DATA</td>
+          <td>Update node data, that is, update the data in the data object of the node data object</td>
+          <td>node (the node to set), data (object, the data to update, e.g. <code>{expand: true}</code>)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_TEXT</td>
+          <td>Set node text</td>
+          <td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text
+            character, you need to set it to <code>true</code>）、resetRichText（v0.6.10+Do you want to reset rich text? The
+            default is false. If true is passed, the style of the rich text node will be reset）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_IMAGE</td>
+          <td>Set Node Image</td>
+          <td>node (node to set), imgData (object, image information, structured as:
+            <code>{url, title, width, height}</code>, the width and height of the image must be passed)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_ICON</td>
+          <td>Set Node Icon</td>
+          <td>node (node to set), icons (array, predefined image names array, available icons can be obtained in the
+            nodeIconList list in the <a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a> file,
+            icon name is type_name, such as ['priority_1'])</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_HYPERLINK</td>
+          <td>Set Node Hyperlink</td>
+          <td>node (node to set), link (hyperlink address), title (hyperlink name, optional)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_NOTE</td>
+          <td>Set Node Note</td>
+          <td>node (node to set), note (note text)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_TAG</td>
+          <td>Set Node Tag</td>
+          <td>node (node to set), tag (string array, built-in color information can be obtained in <a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>)
+          </td>
+        </tr>
+        <tr>
+          <td>INSERT_AFTER (v0.1.5+)</td>
+        <td>Move Node to After Another Node</td>
+        <td>node (node to move), exist (target node)</td>
+      </tr>
+      <tr>
+        <td>INSERT_BEFORE (v0.1.5+)</td>
+        <td>Move Node to Before Another Node</td>
+        <td>node (node to move), exist (target node)</td>
+      </tr>
+      <tr>
+        <td>MOVE_NODE_TO (v0.1.5+)</td>
+        <td>Move a node as a child of another node</td>
+        <td>node (the node to move), toNode (the target node)</td>
+      </tr>
+      <tr>
+        <td>ADD_GENERALIZATION (v0.2.0+)</td>
+        <td>Add a node summary</td>
+        <td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is
+          <code>{text: 'summary'}</code>)</td>
+      </tr>
+      <tr>
+        <td>REMOVE_GENERALIZATION (v0.2.0+)</td>
+        <td>Remove a node summary</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>SET_NODE_CUSTOM_POSITION (v0.2.0+)</td>
+        <td>Set a custom position for a node</td>
+        <td>node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default
+          is undefined)</td>
+      </tr>
+      <tr>
+        <td>RESET_LAYOUT (v0.2.0+)</td>
+        <td>Arrange layout with one click</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>SET_NODE_SHAPE (v0.2.4+)</td>
+        <td>Set the shape of a node</td>
+        <td>node (the node to set), shape (the shape, all shapes: <a
+            href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>)
+        </td>
+      </tr>
+      <tr>
+        <td>GO_TARGET_NODE（v0.6.7+）</td>
+        <td>Navigate to a node, and if the node is collapsed, it will automatically expand to that node</td>
+        <td>node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion）
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>setData(data)</h3>
+  <p>Dynamic setting of mind map data, pure node data</p>
+  <p><code>data</code>: mind map structure data</p>
+  <h3>setFullData(<em>data</em>)</h3>
+  <blockquote>
+    <p>v0.2.7+</p>
+  </blockquote>
+  <p>Dynamic setting of mind map data, including node data, layout, theme, view</p>
+  <p><code>data</code>: complete data, structure can refer to
+    <a
+      href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a>
+  </p>
+  <h3>getData(withConfig)</h3>
+  <blockquote>
+    <p>v0.2.9+</p>
+  </blockquote>
+  <p>Gets mind map data</p>
+  <p><code>withConfig</code>: <code>Boolean</code>, default is <code>false</code>, that is, the obtained data only
+    includes the node tree, if <code>true</code> is passed, it will also include theme, layout,
+    view, etc. data</p>
+  <h3>export(type, isDownload, fileName)</h3>
+  <blockquote>
+    <p>You need to register the <code>Export</code> plugin first</p>
+  </blockquote>
+  <p>Export</p>
+  <p><code>type</code>: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
+    smm (essentially also json)</p>
+  <p><code>isDownload</code>: whether to directly trigger download, Boolean value, default is
+    <code>false</code>
+  </p>
+  <p><code>fileName</code>: (v0.1.6+) the name of the exported file, default is <code>思维导图</code> (mind
+    map).</p>
+  <p>If it is exported as <code>png</code>, the fourth parameter can be passed:</p>
+  <p><code>transparent</code>: v0.5.7+, <code>Boolean</code>, default is <code>false</code>, Specify whether the
+    background of the exported image is transparent</p>
+  <p>If it is exported as <code>svg</code>, the fourth parameter can be passed:</p>
+  <p><code>plusCssText</code>: Additional <code>CSS</code> style. If there is a <code>dom</code> node in
+    <code>svg</code>, you can pass in some styles specific to the node through this parameter</p>
+  <p>If it is exported as <code>json</code> or <code>smm</code>, the fourth parameter can be passed:</p>
+  <p><code>withConfig</code>: <code>Boolean</code>, default is <code>true</code>, Specify whether the exported data
+    includes configuration data, otherwise only pure node tree data will be exported</p>
+  <h3>toPos(x, y)</h3>
+  <blockquote>
+    <p>v0.1.5+</p>
+  </blockquote>
+  <p>Convert the coordinates of the browser's visible window to coordinates relative
+    to the canvas.</p>
+  <h3>addPlugin(plugin, opt)</h3>
+  <blockquote>
+    <p>v0.4.0+</p>
+  </blockquote>
+  <p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered
+    plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can
+    use the <code>addPlugin</code> method of the instance.</p>
+  <h3>removePlugin(plugin)</h3>
+  <blockquote>
+    <p>v0.4.0+</p>
+  </blockquote>
+  <p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods
+    can be removed.</p>
 
-  </div>
-</template>
+</div></template>
 
 <script>
 export default {
@@ -1165,6 +1295,4 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index a9a4409d..2d0b916b 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <h1>构造函数</h1>
-<h2>基本使用</h2>
-<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>
+    <h2>基本使用</h2>
+    <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>;
+    <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>),
@@ -16,478 +16,501 @@
   }
 });
 </code></pre>
-<h2>实例化选项</h2>
-<table>
-<thead>
-<tr>
-<th>字段名称</th>
-<th>类型</th>
-<th>默认值</th>
-<th>描述</th>
-<th>是否必填</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>el</td>
-<td>Element</td>
-<td></td>
-<td>容器元素，必须为DOM元素</td>
-<td>是</td>
-</tr>
-<tr>
-<td>data</td>
-<td>Object</td>
-<td>{}</td>
-<td>思维导图数据，可参考下方【数据结构】介绍</td>
-<td></td>
-</tr>
-<tr>
-<td>layout</td>
-<td>String</td>
-<td>logicalStructure</td>
-<td>布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）</td>
-<td></td>
-</tr>
-<tr>
-<td>fishboneDeg（v0.5.4+）</td>
-<td>Number</td>
-<td>45</td>
-<td>设置鱼骨结构图的斜线角度</td>
-<td></td>
-</tr>
-<tr>
-<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（浪漫紫）、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+黑金）、avocado（v.5.10-fix.2+牛油果）、autumn（v.5.10-fix.2+秋天）、orangeJuice（v.5.10-fix.2+橙汁）</td>
-<td></td>
-</tr>
-<tr>
-<td>themeConfig</td>
-<td>Object</td>
-<td>{}</td>
-<td>主题配置，会和所选择的主题进行合并，可用字段可参考：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a></td>
-<td></td>
-</tr>
-<tr>
-<td>scaleRatio</td>
-<td>Number</td>
-<td>0.1</td>
-<td>放大缩小的增量比例</td>
-<td></td>
-</tr>
-<tr>
-<td>maxTag</td>
-<td>Number</td>
-<td>5</td>
-<td>节点里最多显示的标签数量，多余的会被丢弃</td>
-<td></td>
-</tr>
-<tr>
-<td>exportPadding</td>
-<td>Number</td>
-<td>20</td>
-<td>导出图片时的内边距</td>
-<td></td>
-</tr>
-<tr>
-<td>imgTextMargin</td>
-<td>Number</td>
-<td>5</td>
-<td>节点里图片和文字的间距</td>
-<td></td>
-</tr>
-<tr>
-<td>textContentMargin</td>
-<td>Number</td>
-<td>2</td>
-<td>节点里各种文字信息的间距，如图标和文字的间距</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTranslateStep</td>
-<td>Number</td>
-<td>3</td>
-<td>多选节点时鼠标移动到边缘时的画布移动偏移量</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTranslateLimit</td>
-<td>Number</td>
-<td>20</td>
-<td>多选节点时鼠标移动距边缘多少距离时开始偏移</td>
-<td></td>
-</tr>
-<tr>
-<td>customNoteContentShow（v0.1.6+）</td>
-<td>Object</td>
-<td>null</td>
-<td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) =&gt; {// 你的显示节点备注逻辑 }, hide: () =&gt; {// 你的隐藏节点备注逻辑 }}</td>
-<td></td>
-</tr>
-<tr>
-<td>readonly（v0.1.7+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>是否是只读模式</td>
-<td></td>
-</tr>
-<tr>
-<td>enableFreeDrag（v0.2.4+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>是否开启节点自由拖拽</td>
-<td></td>
-</tr>
-<tr>
-<td>watermarkConfig（v0.2.4+）</td>
-<td>Object</td>
-<td></td>
-<td>水印配置，详细配置请参考下方表格【水印配置】</td>
-<td></td>
-</tr>
-<tr>
-<td>textAutoWrapWidth（v0.3.4+）</td>
-<td>Number</td>
-<td>500</td>
-<td>节点内每行文本达到该宽度后自动换行</td>
-<td></td>
-</tr>
-<tr>
-<td>customHandleMousewheel（v0.4.3+）</td>
-<td>Function</td>
-<td>null</td>
-<td>自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象</td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelAction（v0.4.3+）</td>
-<td>String</td>
-<td>zoom</td>
-<td>鼠标滚轮的行为，<code>zoom</code>（放大缩小）、<code>move</code>（上下移动）。如果<code>customHandleMousewheel</code>传了自定义函数，这个属性不生效</td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelMoveStep（v0.4.3+）</td>
-<td>Number</td>
-<td>100</td>
-<td>当<code>mousewheelAction</code>设为<code>move</code>时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位<code>px</code></td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelZoomActionReverse（v0.6.5+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
-<td>String</td>
-<td>二级节点</td>
-<td>默认插入的二级节点的文字</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td>
-<td>String</td>
-<td>分支主题</td>
-<td>默认插入的二级以下节点的文字</td>
-<td></td>
-</tr>
-<tr>
-<td>expandBtnStyle（v0.5.0+）</td>
-<td>Object</td>
-<td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
-<td>展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式）</td>
-<td></td>
-</tr>
-<tr>
-<td>expandBtnIcon（v0.5.0+）</td>
-<td>Object</td>
-<td>{ open: '', close: '' }</td>
-<td>自定义展开收起按钮的图标，可以传图标的svg字符串</td>
-<td></td>
-</tr>
-<tr>
-<td>expandBtnNumHandler（v0.7.0+）</td>
-<td>Function</td>
-<td></td>
-<td>用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+</td>
-<td></td>
-</tr>
-<tr>
-<td>isShowExpandNum（v0.7.0+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>节点收起时是否显示收起的数量</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+）（v0.6.7+已去除该特性）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>是否开启节点动画过渡</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+已去除该特性）</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>
-<tr>
-<td>exportPaddingX（v0.5.5+）</td>
-<td>Number</td>
-<td>10</td>
-<td>导出png、svg、pdf时的图形水平内边距</td>
-<td></td>
-</tr>
-<tr>
-<td>exportPaddingY（v0.5.5+）</td>
-<td>Number</td>
-<td>10</td>
-<td>导出png、svg、pdf时的图形垂直内边距</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeTextEditZIndex（v0.5.5+）</td>
-<td>Number</td>
-<td>3000</td>
-<td>节点文本编辑框元素的z-index</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
-<td>Number</td>
-<td>3000</td>
-<td>节点备注浮层元素的z-index</td>
-<td></td>
-</tr>
-<tr>
-<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>是否在点击了画布外的区域时结束节点文本的编辑状态</td>
-<td></td>
-</tr>
-<tr>
-<td>maxHistoryCount（v0.5.6+）</td>
-<td>Number</td>
-<td>1000</td>
-<td>最大历史记录数</td>
-<td></td>
-</tr>
-<tr>
-<td>alwaysShowExpandBtn（v0.5.8+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示</td>
-<td></td>
-</tr>
-<tr>
-<td>iconList（v0.5.8+）</td>
-<td>Array</td>
-<td>[]</td>
-<td>扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格</td>
-<td></td>
-</tr>
-<tr>
-<td>maxNodeCacheCount（v0.5.10+）</td>
-<td>Number</td>
-<td>1000</td>
-<td>节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultAssociativeLineText（v0.5.11+）</td>
-<td>String</td>
-<td>关联</td>
-<td>关联线默认文字</td>
-<td></td>
-</tr>
-<tr>
-<td>fitPadding（v0.6.0+）</td>
-<td>Number</td>
-<td>50</td>
-<td>思维导图适应画布大小时的内边距，单位：px</td>
-<td></td>
-</tr>
-<tr>
-<td>enableCtrlKeyNodeSelection（v0.6.0+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>是否开启按住ctrl键多选节点的功能</td>
-<td></td>
-</tr>
-<tr>
-<td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>设置为左键多选节点，右键拖动画布</td>
-<td></td>
-</tr>
-<tr>
-<td>beforeTextEdit（v0.6.0+）</td>
-<td>Function/null</td>
-<td>null</td>
-<td>节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例</td>
-<td></td>
-</tr>
-<tr>
-<td>isUseCustomNodeContent（v0.6.3+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>是否自定义节点内容</td>
-<td></td>
-</tr>
-<tr>
-<td>customCreateNodeContent（v0.6.3+）</td>
-<td>Function/null</td>
-<td>null</td>
-<td>如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可</td>
-<td></td>
-</tr>
-<tr>
-<td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点</td>
-<td></td>
-</tr>
-<tr>
-<td>customInnerElsAppendTo（v0.6.12+）</td>
-<td>null/HTMLElement</td>
-<td>null</td>
-<td>指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeDragPlaceholderMaxSize（v0.6.12+）</td>
-<td>Number</td>
-<td>20</td>
-<td>拖拽元素时，指示元素新位置的块的最大高度</td>
-<td></td>
-</tr>
-<tr>
-<td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+版本已去除该特性）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>是否允许创建一个隐藏的输入框，该输入框会在节点激活时聚焦，用于粘贴数据和自动进入文本编辑状态</td>
-<td></td>
-</tr>
-<tr>
-<td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式</td>
-<td></td>
-</tr>
-<tr>
-<td>richTextEditFakeInPlace（v0.6.13+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果</td>
-<td></td>
-</tr>
-<tr>
-<td>customHandleClipboardText（v0.6.14+）</td>
-<td>Function</td>
-<td>null</td>
-<td>自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：1.返回一个纯文本，那么会直接以该文本创建一个子节点；2.返回一个节点对象，格式如下：{ simpleMindMap: true, data: { data: { text: '' }, children: [] } }，代表是simple-mind-map格式的数据，节点数据同simple-mind-map节点数据格式，如果你的处理逻辑存在异步逻辑，也可以返回一个promise</td>
-<td></td>
-</tr>
-<tr>
-<td>errorHandler（v0.6.15+）</td>
-<td>Function</td>
-<td></td>
-<td>自定义错误处理函数，目前只会抛出一些异步逻辑出错的情况。可以传递一个函数，会接收两个参数，第一个为错误的类型，第二个为错误对象</td>
-<td></td>
-</tr>
-<tr>
-<td>disableMouseWheelZoom（v0.6.15+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放</td>
-<td></td>
-</tr>
-<tr>
-<td>resetCss（v0.6.16+）</td>
-<td>String</td>
-<td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
-<td>设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移</td>
-<td></td>
-</tr>
-<tr>
-<td>enableDblclickReset（v0.6.17+）</td>
-<td>Boolean</td>
-<td>true（v0.7.0+改为false）</td>
-<td>开启鼠标双击复位思维导图位置及缩放</td>
-<td></td>
-</tr>
-<tr>
-<td>minExportImgCanvasScale（v0.7.0+）</td>
-<td>Number</td>
-<td>2</td>
-<td>导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度</td>
-<td></td>
-</tr>
-<tr>
-<td>hoverRectColor（v0.7.0+）</td>
-<td>String</td>
-<td>rgb(94, 200, 248)</td>
-<td>节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度</td>
-<td></td>
-</tr>
-<tr>
-<td>hoverRectPadding（v0.7.0+）</td>
-<td>Number</td>
-<td>2</td>
-<td>节点鼠标hover和激活时显示的矩形边框距节点内容的距离</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTextOnEnterEditText（v0.7.0+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中</td>
-<td></td>
-</tr>
-<tr>
-<td>deleteNodeActive（v0.7.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>是否开启删除节点后自动激活节点相邻节点或父节点的功能</td>
-<td></td>
-</tr>
-<tr>
-<td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>拖拽节点时鼠标移动到画布边缘是否开启画布自动移动</td>
-<td></td>
-</tr>
-</tbody>
-</table>
-<h3>数据结构</h3>
-<p>基本的数据结构如下：</p>
-<pre class="hljs"><code>{
+    <h2>实例化选项</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>字段名称</th>
+          <th>类型</th>
+          <th>默认值</th>
+          <th>描述</th>
+          <th>是否必填</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>el</td>
+          <td>Element</td>
+          <td></td>
+          <td>容器元素，必须为DOM元素</td>
+          <td>是</td>
+        </tr>
+        <tr>
+          <td>data</td>
+          <td>Object</td>
+          <td>{}</td>
+          <td>思维导图数据，可参考下方【数据结构】介绍</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>layout</td>
+          <td>String</td>
+          <td>logicalStructure</td>
+          <td>
+            布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>fishboneDeg（v0.5.4+）</td>
+          <td>Number</td>
+          <td>45</td>
+          <td>设置鱼骨结构图的斜线角度</td>
+          <td></td>
+        </tr>
+        <tr>
+          <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（浪漫紫）、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+黑金）、avocado（v.5.10-fix.2+牛油果）、autumn（v.5.10-fix.2+秋天）、orangeJuice（v.5.10-fix.2+橙汁）
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>themeConfig</td>
+          <td>Object</td>
+          <td>{}</td>
+          <td>主题配置，会和所选择的主题进行合并，可用字段可参考：<a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>scaleRatio</td>
+          <td>Number</td>
+          <td>0.1</td>
+          <td>放大缩小的增量比例</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>maxTag</td>
+          <td>Number</td>
+          <td>5</td>
+          <td>节点里最多显示的标签数量，多余的会被丢弃</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>exportPadding</td>
+          <td>Number</td>
+          <td>20</td>
+          <td>导出图片时的内边距</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>imgTextMargin</td>
+          <td>Number</td>
+          <td>5</td>
+          <td>节点里图片和文字的间距</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>textContentMargin</td>
+          <td>Number</td>
+          <td>2</td>
+          <td>节点里各种文字信息的间距，如图标和文字的间距</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>selectTranslateStep</td>
+          <td>Number</td>
+          <td>3</td>
+          <td>多选节点时鼠标移动到边缘时的画布移动偏移量</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>selectTranslateLimit</td>
+          <td>Number</td>
+          <td>20</td>
+          <td>多选节点时鼠标移动距边缘多少距离时开始偏移</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customNoteContentShow（v0.1.6+）</td>
+          <td>Object</td>
+          <td>null</td>
+          <td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) =&gt; {// 你的显示节点备注逻辑 }, hide: () =&gt; {//
+            你的隐藏节点备注逻辑 }}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>readonly（v0.1.7+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>是否是只读模式</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableFreeDrag（v0.2.4+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>是否开启节点自由拖拽</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>watermarkConfig（v0.2.4+）</td>
+          <td>Object</td>
+          <td></td>
+          <td>水印配置，详细配置请参考下方表格【水印配置】</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>textAutoWrapWidth（v0.3.4+）</td>
+          <td>Number</td>
+          <td>500</td>
+          <td>节点内每行文本达到该宽度后自动换行</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customHandleMousewheel（v0.4.3+）</td>
+          <td>Function</td>
+          <td>null</td>
+          <td>自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mousewheelAction（v0.4.3+）</td>
+          <td>String</td>
+          <td>zoom</td>
+          <td>鼠标滚轮的行为，<code>zoom</code>（放大缩小）、<code>move</code>（上下移动）。如果<code>customHandleMousewheel</code>传了自定义函数，这个属性不生效
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mousewheelMoveStep（v0.4.3+）</td>
+          <td>Number</td>
+          <td>100</td>
+          <td>当<code>mousewheelAction</code>设为<code>move</code>时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位<code>px</code></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mousewheelZoomActionReverse（v0.6.5+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
+          <td>String</td>
+          <td>二级节点</td>
+          <td>默认插入的二级节点的文字</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td>
+          <td>String</td>
+          <td>分支主题</td>
+          <td>默认插入的二级以下节点的文字</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>expandBtnStyle（v0.5.0+）</td>
+          <td>Object</td>
+          <td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
+          <td>展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式）</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>expandBtnIcon（v0.5.0+）</td>
+          <td>Object</td>
+          <td>{ open: '', close: '' }</td>
+          <td>自定义展开收起按钮的图标，可以传图标的svg字符串</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>expandBtnNumHandler（v0.7.0+）</td>
+          <td>Function</td>
+          <td></td>
+          <td>用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>isShowExpandNum（v0.7.0+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>节点收起时是否显示收起的数量</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+）（v0.6.7+已去除该特性）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>是否开启节点动画过渡</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+已去除该特性）</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>
+        <tr>
+          <td>exportPaddingX（v0.5.5+）</td>
+          <td>Number</td>
+          <td>10</td>
+          <td>导出png、svg、pdf时的图形水平内边距</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>exportPaddingY（v0.5.5+）</td>
+          <td>Number</td>
+          <td>10</td>
+          <td>导出png、svg、pdf时的图形垂直内边距</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>nodeTextEditZIndex（v0.5.5+）</td>
+          <td>Number</td>
+          <td>3000</td>
+          <td>节点文本编辑框元素的z-index</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>nodeNoteTooltipZIndex（v0.5.5+）</td>
+          <td>Number</td>
+          <td>3000</td>
+          <td>节点备注浮层元素的z-index</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>是否在点击了画布外的区域时结束节点文本的编辑状态</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>maxHistoryCount（v0.5.6+）</td>
+          <td>Number</td>
+          <td>1000</td>
+          <td>最大历史记录数</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>alwaysShowExpandBtn（v0.5.8+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>iconList（v0.5.8+）</td>
+          <td>Array</td>
+          <td>[]</td>
+          <td>扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>maxNodeCacheCount（v0.5.10+）</td>
+          <td>Number</td>
+          <td>1000</td>
+          <td>节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>defaultAssociativeLineText（v0.5.11+）</td>
+          <td>String</td>
+          <td>关联</td>
+          <td>关联线默认文字</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>fitPadding（v0.6.0+）</td>
+          <td>Number</td>
+          <td>50</td>
+          <td>思维导图适应画布大小时的内边距，单位：px</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableCtrlKeyNodeSelection（v0.6.0+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>是否开启按住ctrl键多选节点的功能</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>设置为左键多选节点，右键拖动画布</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>beforeTextEdit（v0.6.0+）</td>
+          <td>Function/null</td>
+          <td>null</td>
+          <td>节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>isUseCustomNodeContent（v0.6.3+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>是否自定义节点内容</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customCreateNodeContent（v0.6.3+）</td>
+          <td>Function/null</td>
+          <td>null</td>
+          <td>
+            如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customInnerElsAppendTo（v0.6.12+）</td>
+          <td>null/HTMLElement</td>
+          <td>null</td>
+          <td>指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>nodeDragPlaceholderMaxSize（v0.6.12+）</td>
+          <td>Number</td>
+          <td>20</td>
+          <td>拖拽元素时，指示元素新位置的块的最大高度</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+版本已去除该特性）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>是否允许创建一个隐藏的输入框，该输入框会在节点激活时聚焦，用于粘贴数据和自动进入文本编辑状态</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>richTextEditFakeInPlace（v0.6.13+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>customHandleClipboardText（v0.6.14+）</td>
+          <td>Function</td>
+          <td>null</td>
+          <td>
+            自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：1.返回一个纯文本，那么会直接以该文本创建一个子节点；2.返回一个节点对象，格式如下：{
+            simpleMindMap: true, data: { data: { text: '' }, children: [] }
+            }，代表是simple-mind-map格式的数据，节点数据同simple-mind-map节点数据格式，如果你的处理逻辑存在异步逻辑，也可以返回一个promise</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>errorHandler（v0.6.15+）</td>
+          <td>Function</td>
+          <td></td>
+          <td>自定义错误处理函数，目前只会抛出一些异步逻辑出错的情况。可以传递一个函数，会接收两个参数，第一个为错误的类型，第二个为错误对象</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>disableMouseWheelZoom（v0.6.15+）</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>resetCss（v0.6.16+）</td>
+          <td>String</td>
+          <td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
+          <td>设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>enableDblclickReset（v0.6.17+）</td>
+          <td>Boolean</td>
+          <td>true（v0.7.0+改为false）</td>
+          <td>开启鼠标双击复位思维导图位置及缩放</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>minExportImgCanvasScale（v0.7.0+）</td>
+          <td>Number</td>
+          <td>2</td>
+          <td>导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hoverRectColor（v0.7.0+）</td>
+          <td>String</td>
+          <td>rgb(94, 200, 248)</td>
+          <td>节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hoverRectPadding（v0.7.0+）</td>
+          <td>Number</td>
+          <td>2</td>
+          <td>节点鼠标hover和激活时显示的矩形边框距节点内容的距离</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>selectTextOnEnterEditText（v0.7.0+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>deleteNodeActive（v0.7.1+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>是否开启删除节点后自动激活节点相邻节点或父节点的功能</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>拖拽节点时鼠标移动到画布边缘是否开启画布自动移动</td>
+          <td></td>
+        </tr>
+
+        <tr>
+          <td>fit</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>初次加载是否适应视图</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>数据结构</h3>
+    <p>基本的数据结构如下：</p>
+    <pre class="hljs"><code>{
   <span class="hljs-attr">data</span>: {
     <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true</span>
     <span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 节点的文本是否是富文本模式</span>
@@ -520,91 +543,95 @@
   ]
 }
 </code></pre>
-<p>如果你要添加自定义的字段，可以添加到<code>data</code>、<code>children</code>同级，如果你要添加到<code>data</code>对象里，那么请使用<code>_</code>开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。</p>
-<h3>水印配置</h3>
-<table>
-<thead>
-<tr>
-<th>字段名称</th>
-<th>类型</th>
-<th>默认值</th>
-<th>描述</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>text</td>
-<td>String</td>
-<td>''</td>
-<td>水印文字，如果为空字符串则不显示水印</td>
-</tr>
-<tr>
-<td>lineSpacing</td>
-<td>Number</td>
-<td>100</td>
-<td>水印每行之间的间距</td>
-</tr>
-<tr>
-<td>textSpacing</td>
-<td>Number</td>
-<td>100</td>
-<td>同一行水印之间的间距</td>
-</tr>
-<tr>
-<td>angle</td>
-<td>Number</td>
-<td>30</td>
-<td>水印的倾斜角度，范围：[0, 90]</td>
-</tr>
-<tr>
-<td>textStyle</td>
-<td>Object</td>
-<td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
-<td>水印文字样式</td>
-</tr>
-</tbody>
-</table>
-<h3>图标配置</h3>
-<table>
-<thead>
-<tr>
-<th>字段名称</th>
-<th>类型</th>
-<th>默认值</th>
-<th>描述</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>name</td>
-<td>String</td>
-<td></td>
-<td>图标分组的名称</td>
-</tr>
-<tr>
-<td>type</td>
-<td>String</td>
-<td></td>
-<td>图标分组的值</td>
-</tr>
-<tr>
-<td>list</td>
-<td>Array</td>
-<td></td>
-<td>分组下的图标列表，数组的每一项为一个对象，<code>{ name: '', icon: '' }</code>，<code>name</code>代表图标的名称，<code>icon</code>代表图标，可以是<code>svg</code>图标，比如<code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>，也可以是图片<code>url</code>，或者是<code>base64</code>图标，比如<code>data:image/png;base64,...</code></td>
-</tr>
-</tbody>
-</table>
-<h2>静态方法</h2>
-<h3>defineTheme(name, config)</h3>
-<blockquote>
-<p>v0.2.23+</p>
-</blockquote>
-<p>定义新主题。</p>
-<p><code>name</code>：新主题名称</p>
-<p><code>config</code>：主题数据</p>
-<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">&#x27;simple-mind-map&#x27;</span>
+    <p>
+      如果你要添加自定义的字段，可以添加到<code>data</code>、<code>children</code>同级，如果你要添加到<code>data</code>对象里，那么请使用<code>_</code>开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。
+    </p>
+    <h3>水印配置</h3>
+    <table>
+      <thead>
+        <tr>
+          <th>字段名称</th>
+          <th>类型</th>
+          <th>默认值</th>
+          <th>描述</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>text</td>
+          <td>String</td>
+          <td>''</td>
+          <td>水印文字，如果为空字符串则不显示水印</td>
+        </tr>
+        <tr>
+          <td>lineSpacing</td>
+          <td>Number</td>
+          <td>100</td>
+          <td>水印每行之间的间距</td>
+        </tr>
+        <tr>
+          <td>textSpacing</td>
+          <td>Number</td>
+          <td>100</td>
+          <td>同一行水印之间的间距</td>
+        </tr>
+        <tr>
+          <td>angle</td>
+          <td>Number</td>
+          <td>30</td>
+          <td>水印的倾斜角度，范围：[0, 90]</td>
+        </tr>
+        <tr>
+          <td>textStyle</td>
+          <td>Object</td>
+          <td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
+          <td>水印文字样式</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>图标配置</h3>
+    <table>
+      <thead>
+        <tr>
+          <th>字段名称</th>
+          <th>类型</th>
+          <th>默认值</th>
+          <th>描述</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>name</td>
+          <td>String</td>
+          <td></td>
+          <td>图标分组的名称</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>String</td>
+          <td></td>
+          <td>图标分组的值</td>
+        </tr>
+        <tr>
+          <td>list</td>
+          <td>Array</td>
+          <td></td>
+          <td>
+            分组下的图标列表，数组的每一项为一个对象，<code>{ name: '', icon: '' }</code>，<code>name</code>代表图标的名称，<code>icon</code>代表图标，可以是<code>svg</code>图标，比如<code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>，也可以是图片<code>url</code>，或者是<code>base64</code>图标，比如<code>data:image/png;base64,...</code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h2>静态方法</h2>
+    <h3>defineTheme(name, config)</h3>
+    <blockquote>
+      <p>v0.2.23+</p>
+    </blockquote>
+    <p>定义新主题。</p>
+    <p><code>name</code>：新主题名称</p>
+    <p><code>config</code>：主题数据</p>
+    <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">&#x27;simple-mind-map&#x27;</span>
 <span class="hljs-comment">// 注册新主题</span>
 MindMap.defineTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>, {})
 
@@ -616,41 +643,43 @@ MindMap.defineTheme(<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>主题的所有配置可以参考<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>
-<h3>usePlugin(plugin, opt = {})</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<ul>
-<li><code>opt</code>：v0.4.0+，插件参数。如果某个插件支持自定义选项的话可以通过这个参数传入。</li>
-</ul>
-<p>注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。</p>
-<p>注意：插件需要在实例化<code>MindMap</code>前注册。</p>
-<h3>hasPlugin(plugin)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>获取是否注册了某个插件，返回的是插件在注册插件列表里的索引，为<code>-1</code>则代表插件没有注册。</p>
-<h2>静态属性</h2>
-<h3>pluginList</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<p>当前注册的所有插件列表。</p>
-<h2>实例方法</h2>
-<h3>destroy()</h3>
-<blockquote>
-<p>v0.6.0+</p>
-</blockquote>
-<p>销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。</p>
-<h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<p><code>paddingX</code>：水平内边距</p>
-<p><code>paddingY</code>：垂直内边距</p>
-<p>获取<code>svg</code>数据，返回一个对象，详细结构如下：</p>
-<pre class="hljs"><code>{
+    <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>
+    <h3>usePlugin(plugin, opt = {})</h3>
+    <blockquote>
+      <p>v0.3.0+</p>
+    </blockquote>
+    <ul>
+      <li><code>opt</code>：v0.4.0+，插件参数。如果某个插件支持自定义选项的话可以通过这个参数传入。</li>
+    </ul>
+    <p>注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。</p>
+    <p>注意：插件需要在实例化<code>MindMap</code>前注册。</p>
+    <h3>hasPlugin(plugin)</h3>
+    <blockquote>
+      <p>v0.4.0+</p>
+    </blockquote>
+    <p>获取是否注册了某个插件，返回的是插件在注册插件列表里的索引，为<code>-1</code>则代表插件没有注册。</p>
+    <h2>静态属性</h2>
+    <h3>pluginList</h3>
+    <blockquote>
+      <p>v0.3.0+</p>
+    </blockquote>
+    <p>当前注册的所有插件列表。</p>
+    <h2>实例方法</h2>
+    <h3>destroy()</h3>
+    <blockquote>
+      <p>v0.6.0+</p>
+    </blockquote>
+    <p>销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。</p>
+    <h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
+    <blockquote>
+      <p>v0.3.0+</p>
+    </blockquote>
+    <p><code>paddingX</code>：水平内边距</p>
+    <p><code>paddingY</code>：垂直内边距</p>
+    <p>获取<code>svg</code>数据，返回一个对象，详细结构如下：</p>
+    <pre class="hljs"><code>{
   svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
   svgHTML, <span class="hljs-comment">// String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内</span>
   <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object，思维导图图形未缩放时的位置尺寸等信息</span>
@@ -660,489 +689,511 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
   scaleY, <span class="hljs-comment">// Number，思维导图图形的垂直缩放值</span>
 }
 </code></pre>
-<h3>render(callback)</h3>
-<ul>
-<li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
-</ul>
-<p>触发整体渲染，会进行节点复用，性能较<code>reRender</code>会更好一点，如果只是节点位置变化了可以调用该方法进行渲染</p>
-<h3>reRender(callback)</h3>
-<ul>
-<li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
-</ul>
-<p>整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用</p>
-<h3>resize()</h3>
-<p>容器尺寸变化后，需要调用该方法进行适应</p>
-<h3>setMode(mode)</h3>
-<blockquote>
-<p>v0.1.7+</p>
-</blockquote>
-<p>切换模式为只读或编辑。</p>
-<p><code>mode</code>：readonly、edit</p>
-<h3>on(event, fn)</h3>
-<p>监听事件，事件列表：</p>
-<table>
-<thead>
-<tr>
-<th>事件名称</th>
-<th>描述</th>
-<th>回调参数</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>data_change</td>
-<td>渲染树数据变化，可以监听该方法获取最新数据</td>
-<td>data（当前渲染树数据）</td>
-</tr>
-<tr>
-<td>view_data_change（v0.1.1+）</td>
-<td>视图变化数据，比如拖动或缩放时会触发</td>
-<td>data（当前视图状态数据）</td>
-</tr>
-<tr>
-<td>back_forward</td>
-<td>前进或回退</td>
-<td>activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度）</td>
-</tr>
-<tr>
-<td>draw_click</td>
-<td><em>画布的单击事件</em></td>
-<td>e（事件对象）</td>
-</tr>
-<tr>
-<td>svg_mousedown</td>
-<td>svg画布的鼠标按下事件</td>
-<td>e（事件对象）</td>
-</tr>
-<tr>
-<td>mousedown</td>
-<td>el元素的鼠标按下事件</td>
-<td>e（事件对象）、this（Event事件类实例）</td>
-</tr>
-<tr>
-<td>mousemove</td>
-<td>el元素的鼠标移动事件</td>
-<td>e（事件对象）、this（Event事件类实例）</td>
-</tr>
-<tr>
-<td>drag</td>
-<td>如果是按住左键拖动的话会触发拖动事件</td>
-<td>e（事件对象）、this（Event事件类实例）</td>
-</tr>
-<tr>
-<td>mouseup</td>
-<td>el元素的鼠标松开事件</td>
-<td>e（事件对象）、this（Event事件类实例）</td>
-</tr>
-<tr>
-<td>mousewheel</td>
-<td>鼠标滚动事件</td>
-<td>e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件）</td>
-</tr>
-<tr>
-<td>contextmenu</td>
-<td>svg画布的鼠标右键菜单事件</td>
-<td>e（事件对象）</td>
-</tr>
-<tr>
-<td>node_click</td>
-<td>节点的单击事件</td>
-<td>this（节点实例）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_mousedown</td>
-<td>节点的鼠标按下事件</td>
-<td>this（节点实例）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_mouseup</td>
-<td>节点的鼠标松开事件</td>
-<td>this（节点实例）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_dblclick</td>
-<td>节点的双击事件</td>
-<td>this（节点实例）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_contextmenu</td>
-<td>节点的右键菜单事件</td>
-<td>e（事件对象）、this（节点实例）</td>
-</tr>
-<tr>
-<td>node_mouseenter（v0.4.1+）</td>
-<td>节点的鼠标移入事件</td>
-<td>this（节点实例）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_mouseleave（v0.4.1+）</td>
-<td>节点的鼠标移出事件</td>
-<td>this（节点实例）、e（事件对象）</td>
-</tr>
-<tr>
-<td>before_node_active</td>
-<td>节点激活前事件</td>
-<td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
-</tr>
-<tr>
-<td>node_active</td>
-<td>节点激活事件</td>
-<td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
-</tr>
-<tr>
-<td>expand_btn_click</td>
-<td>节点展开或收缩事件</td>
-<td>this（节点实例）</td>
-</tr>
-<tr>
-<td>before_show_text_edit</td>
-<td>节点文本编辑框即将打开事件</td>
-<td></td>
-</tr>
-<tr>
-<td>hide_text_edit</td>
-<td>节点文本编辑框关闭事件</td>
-<td>textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表）</td>
-</tr>
-<tr>
-<td>scale</td>
-<td>放大缩小事件</td>
-<td>scale（缩放比例）</td>
-</tr>
-<tr>
-<td>node_img_dblclick（v0.2.15+）</td>
-<td>节点内图片的双击事件</td>
-<td>this（节点实例）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_img_mouseenter（v0.6.5+）</td>
-<td>节点内图片的鼠标移入事件</td>
-<td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_img_mouseleave（v0.6.5+）</td>
-<td>节点内图片的鼠标移出事件</td>
-<td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_img_mousemove（v0.6.5+）</td>
-<td>节点内图片的鼠标移动事件</td>
-<td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
-</tr>
-<tr>
-<td>node_tree_render_end（v0.2.16+）</td>
-<td>节点树渲染完毕事件</td>
-<td></td>
-</tr>
-<tr>
-<td>rich_text_selection_change（v0.4.0+）</td>
-<td>当注册了<code>RichText</code>插件时可用。当节点编辑时，文本选区发生改变时触发</td>
-<td>hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息）</td>
-</tr>
-<tr>
-<td>transforming-dom-to-images（v0.4.0+）</td>
-<td>当注册了<code>RichText</code>插件时可用。当<code>svg</code>中存在<code>DOM</code>节点时，导出为图片时会将<code>DOM</code>节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点</td>
-<td>index（当前转换到的节点索引）、len（一共需要转换的节点数量）</td>
-</tr>
-<tr>
-<td>node_dragging（v0.4.5+）</td>
-<td>当某个节点被拖拽时触发</td>
-<td>node（当前被拖拽的节点）</td>
-</tr>
-<tr>
-<td>node_dragend（v0.4.5+）</td>
-<td>节点被拖拽结束时触发</td>
-<td>{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，本次节点移动到的节点uid，比如本次移动到了节点A上，那么overlapNodeUid就是节点A的uid，如果移动到了B节点的前面，那么nextNodeUid就是节点B的uid，你可以通过mindMap.renderer.findNodeByUid(uid)方法来获取节点实例）</td>
-</tr>
-<tr>
-<td>associative_line_click（v0.4.5+）</td>
-<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>
-<tr>
-<td>node_icon_click（v0.6.10+）</td>
-<td>点击节点内的图标时触发</td>
-<td>this（节点实例）、item（点击的图标名称）、e（事件对象）</td>
-</tr>
-<tr>
-<td>view_theme_change（v0.6.12+）</td>
-<td>调用了setTheme方法设置主题后触发</td>
-<td>theme（设置的新主题名称）</td>
-</tr>
-</tbody>
-</table>
-<h3>emit(event, ...args)</h3>
-<p>触发事件，可以是上面表格里的事件，也可以是自定义事件</p>
-<h3>off(event, fn)</h3>
-<p>解绑事件</p>
-<h3>setTheme(theme)</h3>
-<p>切换主题，可选主题见上面的选项表格</p>
-<h3>getTheme()</h3>
-<p>获取当前主题</p>
-<h3>setThemeConfig(config)</h3>
-<p>设置主题配置，<code>config</code>同上面选项表格里的选项<code>themeConfig</code></p>
-<h3>getCustomThemeConfig()</h3>
-<p>获取自定义主题配置</p>
-<h3>getThemeConfig(prop)</h3>
-<p>获取某个主题配置属性值</p>
-<h3>getConfig(<em>prop</em>)</h3>
-<blockquote>
-<p>0.2.24+</p>
-</blockquote>
-<p><code>prop</code>：获取指定配置的值，不传则返回整个配置</p>
-<p>获取配置，即<code>new MindMap(opt)</code>的<code>opt</code></p>
-<h3>updateConfig(<em>opt</em> = {})</h3>
-<blockquote>
-<p>0.2.24+</p>
-</blockquote>
-<p><code>opt</code>：要更新的配置</p>
-<p>更新配置，即更新<code>new MindMap(opt)</code>的<code>opt</code>，可以只更新部分数据，比如：</p>
-<pre class="hljs"><code>mindMap.updateConfig({
+    <h3>render(callback)</h3>
+    <ul>
+      <li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
+    </ul>
+    <p>触发整体渲染，会进行节点复用，性能较<code>reRender</code>会更好一点，如果只是节点位置变化了可以调用该方法进行渲染</p>
+    <h3>reRender(callback)</h3>
+    <ul>
+      <li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
+    </ul>
+    <p>整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用</p>
+    <h3>resize()</h3>
+    <p>容器尺寸变化后，需要调用该方法进行适应</p>
+    <h3>setMode(mode)</h3>
+    <blockquote>
+      <p>v0.1.7+</p>
+    </blockquote>
+    <p>切换模式为只读或编辑。</p>
+    <p><code>mode</code>：readonly、edit</p>
+    <h3>on(event, fn)</h3>
+    <p>监听事件，事件列表：</p>
+    <table>
+      <thead>
+        <tr>
+          <th>事件名称</th>
+          <th>描述</th>
+          <th>回调参数</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>data_change</td>
+          <td>渲染树数据变化，可以监听该方法获取最新数据</td>
+          <td>data（当前渲染树数据）</td>
+        </tr>
+        <tr>
+          <td>view_data_change（v0.1.1+）</td>
+          <td>视图变化数据，比如拖动或缩放时会触发</td>
+          <td>data（当前视图状态数据）</td>
+        </tr>
+        <tr>
+          <td>back_forward</td>
+          <td>前进或回退</td>
+          <td>activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度）</td>
+        </tr>
+        <tr>
+          <td>draw_click</td>
+          <td><em>画布的单击事件</em></td>
+          <td>e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>svg_mousedown</td>
+          <td>svg画布的鼠标按下事件</td>
+          <td>e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>mousedown</td>
+          <td>el元素的鼠标按下事件</td>
+          <td>e（事件对象）、this（Event事件类实例）</td>
+        </tr>
+        <tr>
+          <td>mousemove</td>
+          <td>el元素的鼠标移动事件</td>
+          <td>e（事件对象）、this（Event事件类实例）</td>
+        </tr>
+        <tr>
+          <td>drag</td>
+          <td>如果是按住左键拖动的话会触发拖动事件</td>
+          <td>e（事件对象）、this（Event事件类实例）</td>
+        </tr>
+        <tr>
+          <td>mouseup</td>
+          <td>el元素的鼠标松开事件</td>
+          <td>e（事件对象）、this（Event事件类实例）</td>
+        </tr>
+        <tr>
+          <td>mousewheel</td>
+          <td>鼠标滚动事件</td>
+          <td>e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件）</td>
+        </tr>
+        <tr>
+          <td>contextmenu</td>
+          <td>svg画布的鼠标右键菜单事件</td>
+          <td>e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_click</td>
+          <td>节点的单击事件</td>
+          <td>this（节点实例）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_mousedown</td>
+          <td>节点的鼠标按下事件</td>
+          <td>this（节点实例）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_mouseup</td>
+          <td>节点的鼠标松开事件</td>
+          <td>this（节点实例）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_dblclick</td>
+          <td>节点的双击事件</td>
+          <td>this（节点实例）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_contextmenu</td>
+          <td>节点的右键菜单事件</td>
+          <td>e（事件对象）、this（节点实例）</td>
+        </tr>
+        <tr>
+          <td>node_mouseenter（v0.4.1+）</td>
+          <td>节点的鼠标移入事件</td>
+          <td>this（节点实例）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_mouseleave（v0.4.1+）</td>
+          <td>节点的鼠标移出事件</td>
+          <td>this（节点实例）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>before_node_active</td>
+          <td>节点激活前事件</td>
+          <td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
+        </tr>
+        <tr>
+          <td>node_active</td>
+          <td>节点激活事件</td>
+          <td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
+        </tr>
+        <tr>
+          <td>expand_btn_click</td>
+          <td>节点展开或收缩事件</td>
+          <td>this（节点实例）</td>
+        </tr>
+        <tr>
+          <td>before_show_text_edit</td>
+          <td>节点文本编辑框即将打开事件</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hide_text_edit</td>
+          <td>节点文本编辑框关闭事件</td>
+          <td>textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表）</td>
+        </tr>
+        <tr>
+          <td>scale</td>
+          <td>放大缩小事件</td>
+          <td>scale（缩放比例）</td>
+        </tr>
+        <tr>
+          <td>node_img_dblclick（v0.2.15+）</td>
+          <td>节点内图片的双击事件</td>
+          <td>this（节点实例）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_img_mouseenter（v0.6.5+）</td>
+          <td>节点内图片的鼠标移入事件</td>
+          <td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_img_mouseleave（v0.6.5+）</td>
+          <td>节点内图片的鼠标移出事件</td>
+          <td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_img_mousemove（v0.6.5+）</td>
+          <td>节点内图片的鼠标移动事件</td>
+          <td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>node_tree_render_end（v0.2.16+）</td>
+          <td>节点树渲染完毕事件</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>rich_text_selection_change（v0.4.0+）</td>
+          <td>当注册了<code>RichText</code>插件时可用。当节点编辑时，文本选区发生改变时触发</td>
+          <td>hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息）</td>
+        </tr>
+        <tr>
+          <td>transforming-dom-to-images（v0.4.0+）</td>
+          <td>
+            当注册了<code>RichText</code>插件时可用。当<code>svg</code>中存在<code>DOM</code>节点时，导出为图片时会将<code>DOM</code>节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点
+          </td>
+          <td>index（当前转换到的节点索引）、len（一共需要转换的节点数量）</td>
+        </tr>
+        <tr>
+          <td>node_dragging（v0.4.5+）</td>
+          <td>当某个节点被拖拽时触发</td>
+          <td>node（当前被拖拽的节点）</td>
+        </tr>
+        <tr>
+          <td>node_dragend（v0.4.5+）</td>
+          <td>节点被拖拽结束时触发</td>
+          <td>{ overlapNodeUid, prevNodeUid, nextNodeUid
+            }（v0.6.12+，本次节点移动到的节点uid，比如本次移动到了节点A上，那么overlapNodeUid就是节点A的uid，如果移动到了B节点的前面，那么nextNodeUid就是节点B的uid，你可以通过mindMap.renderer.findNodeByUid(uid)方法来获取节点实例）
+          </td>
+        </tr>
+        <tr>
+          <td>associative_line_click（v0.4.5+）</td>
+          <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>
+        <tr>
+          <td>node_icon_click（v0.6.10+）</td>
+          <td>点击节点内的图标时触发</td>
+          <td>this（节点实例）、item（点击的图标名称）、e（事件对象）</td>
+        </tr>
+        <tr>
+          <td>view_theme_change（v0.6.12+）</td>
+          <td>调用了setTheme方法设置主题后触发</td>
+          <td>theme（设置的新主题名称）</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>emit(event, ...args)</h3>
+    <p>触发事件，可以是上面表格里的事件，也可以是自定义事件</p>
+    <h3>off(event, fn)</h3>
+    <p>解绑事件</p>
+    <h3>setTheme(theme)</h3>
+    <p>切换主题，可选主题见上面的选项表格</p>
+    <h3>getTheme()</h3>
+    <p>获取当前主题</p>
+    <h3>setThemeConfig(config)</h3>
+    <p>设置主题配置，<code>config</code>同上面选项表格里的选项<code>themeConfig</code></p>
+    <h3>getCustomThemeConfig()</h3>
+    <p>获取自定义主题配置</p>
+    <h3>getThemeConfig(prop)</h3>
+    <p>获取某个主题配置属性值</p>
+    <h3>getConfig(<em>prop</em>)</h3>
+    <blockquote>
+      <p>0.2.24+</p>
+    </blockquote>
+    <p><code>prop</code>：获取指定配置的值，不传则返回整个配置</p>
+    <p>获取配置，即<code>new MindMap(opt)</code>的<code>opt</code></p>
+    <h3>updateConfig(<em>opt</em> = {})</h3>
+    <blockquote>
+      <p>0.2.24+</p>
+    </blockquote>
+    <p><code>opt</code>：要更新的配置</p>
+    <p>更新配置，即更新<code>new MindMap(opt)</code>的<code>opt</code>，可以只更新部分数据，比如：</p>
+    <pre class="hljs"><code>mindMap.updateConfig({
     <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
 })
 </code></pre>
-<p>该方法只做更新配置的事情，没有其他副作用，比如触发画布重新渲染之类的</p>
-<h3>getLayout()</h3>
-<p>获取当前的布局结构</p>
-<h3>setLayout(layout)</h3>
-<p>设置布局结构，可选值见上面选项表格的<code>layout</code>字段</p>
-<h3>execCommand(name, ...args)</h3>
-<p>执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：</p>
-<table>
-<thead>
-<tr>
-<th>命令名称</th>
-<th>描述</th>
-<th>参数</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>SELECT_ALL</td>
-<td>全选</td>
-<td></td>
-</tr>
-<tr>
-<td>BACK</td>
-<td>回退指定的步数</td>
-<td>step（要回退的步数，默认为1）</td>
-</tr>
-<tr>
-<td>FORWARD</td>
-<td>前进指定的步数</td>
-<td>step（要前进的步数，默认为1）</td>
-</tr>
-<tr>
-<td>INSERT_NODE</td>
-<td>插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效</td>
-<td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、 appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
-</tr>
-<tr>
-<td>INSERT_CHILD_NODE</td>
-<td>插入子节点，操作节点为当前激活的节点或指定节点</td>
-<td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、 appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
-</tr>
-<tr>
-<td>UP_NODE</td>
-<td>上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效</td>
-<td></td>
-</tr>
-<tr>
-<td>DOWN_NODE</td>
-<td>操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效</td>
-<td></td>
-</tr>
-<tr>
-<td>REMOVE_NODE</td>
-<td>删除节点，操作节点为当前激活的节点或指定节点</td>
-<td>appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）</td>
-</tr>
-<tr>
-<td>PASTE_NODE</td>
-<td>粘贴节点到节点，操作节点为当前激活的节点</td>
-<td>data（要粘贴的节点数据，一般通过<code>renderer.copyNode()</code>方法和<code>renderer.cutNode()</code>方法获取）</td>
-</tr>
-<tr>
-<td>CUT_NODE</td>
-<td>剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效</td>
-<td>callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回)</td>
-</tr>
-<tr>
-<td>SET_NODE_STYLE</td>
-<td>修改节点单个样式</td>
-<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
-</tr>
-<tr>
-<td>SET_NODE_STYLEs（v0.6.12+）</td>
-<td>修改节点多个样式</td>
-<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
-</tr>
-<tr>
-<td>SET_NODE_ACTIVE</td>
-<td>设置节点是否激活</td>
-<td>node（要设置的节点）、active（布尔值，是否激活）</td>
-</tr>
-<tr>
-<td>CLEAR_ACTIVE_NODE</td>
-<td>清除当前已激活节点的激活状态，操作节点为当前激活的节点</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_EXPAND</td>
-<td>设置节点是否展开</td>
-<td>node（要设置的节点）、expand（布尔值，是否展开）</td>
-</tr>
-<tr>
-<td>EXPAND_ALL</td>
-<td>展开所有节点</td>
-<td></td>
-</tr>
-<tr>
-<td>UNEXPAND_ALL</td>
-<td>收起所有节点</td>
-<td></td>
-</tr>
-<tr>
-<td>UNEXPAND_TO_LEVEL（v0.2.8+）</td>
-<td>展开到指定层级</td>
-<td>level（要展开到的层级，1、2、3...）</td>
-</tr>
-<tr>
-<td>SET_NODE_DATA</td>
-<td>更新节点数据，即更新节点数据对象里<code>data</code>对象的数据</td>
-<td>node（要设置的节点）、data（对象，要更新的数据，如<code>{expand: true}</code>）</td>
-</tr>
-<tr>
-<td>SET_NODE_TEXT</td>
-<td>设置节点文本</td>
-<td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式）</td>
-</tr>
-<tr>
-<td>SET_NODE_IMAGE</td>
-<td>设置节点图片</td>
-<td>node（要设置的节点）、imgData（对象，图片信息，结构为：<code>{url, title, width, height}</code>，图片的宽高必须要传）</td>
-</tr>
-<tr>
-<td>SET_NODE_ICON</td>
-<td>设置节点图标</td>
-<td>node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件里的<code>nodeIconList</code>列表里获取到，图标名称为<code>type_name</code>，如<code>['priority_1']</code>）</td>
-</tr>
-<tr>
-<td>SET_NODE_HYPERLINK</td>
-<td>设置节点超链接</td>
-<td>node（要设置的节点）、link（超链接地址）、title（超链接名称，可选）</td>
-</tr>
-<tr>
-<td>SET_NODE_NOTE</td>
-<td>设置节点备注</td>
-<td>node（要设置的节点）、note（备注文字）</td>
-</tr>
-<tr>
-<td>SET_NODE_TAG</td>
-<td>设置节点标签</td>
-<td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>里获取到）</td>
-</tr>
-<tr>
-<td>INSERT_AFTER（v0.1.5+）</td>
-<td>将节点移动到另一个节点的后面</td>
-<td>node（要移动的节点）、 exist（目标节点）</td>
-</tr>
-<tr>
-<td>INSERT_BEFORE（v0.1.5+）</td>
-<td>将节点移动到另一个节点的前面</td>
-<td>node（要移动的节点）、 exist（目标节点）</td>
-</tr>
-<tr>
-<td>MOVE_NODE_TO（v0.1.5+）</td>
-<td>移动一个节点作为另一个节点的子节点</td>
-<td>node（要移动的节点）、 toNode（目标节点）</td>
-</tr>
-<tr>
-<td>ADD_GENERALIZATION（v0.2.0+）</td>
-<td>添加节点概要</td>
-<td>data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）</td>
-</tr>
-<tr>
-<td>REMOVE_GENERALIZATION（v0.2.0+）</td>
-<td>删除节点概要</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_CUSTOM_POSITION（v0.2.0+）</td>
-<td>设置节点自定义位置</td>
-<td>node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined）</td>
-</tr>
-<tr>
-<td>RESET_LAYOUT（v0.2.0+）</td>
-<td>一键整理布局</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_SHAPE（v0.2.4+）</td>
-<td>设置节点形状</td>
-<td>node（要设置的节点）、shape（形状，全部形状：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>）</td>
-</tr>
-<tr>
-<td>GO_TARGET_NODE（v0.6.7+）</td>
-<td>定位到某个节点，如果该节点被收起，那么会自动展开到该节点</td>
-<td>node（要定位到的节点实例或节点uid）、callback（v0.6.9+，定位完成后的回调函数）</td>
-</tr>
-</tbody>
-</table>
-<h3>setData(data)</h3>
-<p>动态设置思维导图数据，纯节点数据</p>
-<p><code>data</code>：思维导图结构数据</p>
-<h3>setFullData(<em>data</em>)</h3>
-<blockquote>
-<p>v0.2.7+</p>
-</blockquote>
-<p>动态设置思维导图数据，包括节点数据、布局、主题、视图</p>
-<p><code>data</code>：完整数据，结构可参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
-<h3>getData(withConfig)</h3>
-<blockquote>
-<p>v0.2.9+</p>
-</blockquote>
-<p>获取思维导图数据</p>
-<p><code>withConfig</code>：<code>Boolean</code>，默认为<code>false</code>，即获取的数据只包括节点树，如果传<code>true</code>则会包含主题、布局、视图等数据</p>
-<h3>export(type, isDownload, fileName)</h3>
-<blockquote>
-<p>需要先注册<code>Export</code>插件</p>
-</blockquote>
-<p>导出</p>
-<p><code>type</code>：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）</p>
-<p><code>isDownload</code>：是否需要直接触发下载，布尔值，默认为<code>false</code></p>
-<p><code>fileName</code>：（v0.1.6+）导出文件的名称，默认为<code>思维导图</code></p>
-<p>如果是导出为<code>png</code>，那么可以传递第四个参数：</p>
-<p><code>transparent</code>：v0.5.7+, <code>Boolean</code>，默认为<code>false</code>，指定导出图片的背景是否是透明的</p>
-<p>如果是导出为<code>svg</code>，那么可以传递第四个参数：</p>
-<p><code>plusCssText</code>：附加的<code>css</code>样式，如果<code>svg</code>中存在<code>dom</code>节点，想要设置一些针对节点的样式可以通过这个参数传入</p>
-<p>如果是导出为<code>json</code>或<code>smm</code>，那么可以传递第四个参数：</p>
-<p><code>withConfig</code>：<code>Boolean</code>，默认为<code>true</code>，指定导出的数据中是否包含配置数据，否则只导出纯节点树数据</p>
-<h3>toPos(x, y)</h3>
-<blockquote>
-<p>v0.1.5+</p>
-</blockquote>
-<p>将浏览器可视窗口的坐标转换成相对于画布的坐标</p>
-<h3>addPlugin(plugin, opt)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>注册插件，使用<code>MindMap.usePlugin</code>注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的<code>addPlugin</code>方法。</p>
-<h3>removePlugin(plugin)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>移除注册的插件，无论是通过<code>usePlugin</code>还是<code>addPlugin</code>方法注册的插件都可以移除。</p>
+    <p>该方法只做更新配置的事情，没有其他副作用，比如触发画布重新渲染之类的</p>
+    <h3>getLayout()</h3>
+    <p>获取当前的布局结构</p>
+    <h3>setLayout(layout)</h3>
+    <p>设置布局结构，可选值见上面选项表格的<code>layout</code>字段</p>
+    <h3>execCommand(name, ...args)</h3>
+    <p>执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：</p>
+    <table>
+      <thead>
+        <tr>
+          <th>命令名称</th>
+          <th>描述</th>
+          <th>参数</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>SELECT_ALL</td>
+          <td>全选</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>BACK</td>
+          <td>回退指定的步数</td>
+          <td>step（要回退的步数，默认为1）</td>
+        </tr>
+        <tr>
+          <td>FORWARD</td>
+          <td>前进指定的步数</td>
+          <td>step（要前进的步数，默认为1）</td>
+        </tr>
+        <tr>
+          <td>INSERT_NODE</td>
+          <td>插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效</td>
+          <td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、
+            appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、
+            appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
+        </tr>
+        <tr>
+          <td>INSERT_CHILD_NODE</td>
+          <td>插入子节点，操作节点为当前激活的节点或指定节点</td>
+          <td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、
+            appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、
+            appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
+        </tr>
+        <tr>
+          <td>UP_NODE</td>
+          <td>上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>DOWN_NODE</td>
+          <td>操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>REMOVE_NODE</td>
+          <td>删除节点，操作节点为当前激活的节点或指定节点</td>
+          <td>appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）</td>
+        </tr>
+        <tr>
+          <td>PASTE_NODE</td>
+          <td>粘贴节点到节点，操作节点为当前激活的节点</td>
+          <td>data（要粘贴的节点数据，一般通过<code>renderer.copyNode()</code>方法和<code>renderer.cutNode()</code>方法获取）</td>
+        </tr>
+        <tr>
+          <td>CUT_NODE</td>
+          <td>剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效</td>
+          <td>callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回)</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_STYLE</td>
+          <td>修改节点单个样式</td>
+          <td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_STYLEs（v0.6.12+）</td>
+          <td>修改节点多个样式</td>
+          <td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_ACTIVE</td>
+          <td>设置节点是否激活</td>
+          <td>node（要设置的节点）、active（布尔值，是否激活）</td>
+        </tr>
+        <tr>
+          <td>CLEAR_ACTIVE_NODE</td>
+          <td>清除当前已激活节点的激活状态，操作节点为当前激活的节点</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>SET_NODE_EXPAND</td>
+          <td>设置节点是否展开</td>
+          <td>node（要设置的节点）、expand（布尔值，是否展开）</td>
+        </tr>
+        <tr>
+          <td>EXPAND_ALL</td>
+          <td>展开所有节点</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>UNEXPAND_ALL</td>
+          <td>收起所有节点</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>UNEXPAND_TO_LEVEL（v0.2.8+）</td>
+          <td>展开到指定层级</td>
+          <td>level（要展开到的层级，1、2、3...）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_DATA</td>
+          <td>更新节点数据，即更新节点数据对象里<code>data</code>对象的数据</td>
+          <td>node（要设置的节点）、data（对象，要更新的数据，如<code>{expand: true}</code>）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_TEXT</td>
+          <td>设置节点文本</td>
+          <td>
+            node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式）
+          </td>
+        </tr>
+        <tr>
+          <td>SET_NODE_IMAGE</td>
+          <td>设置节点图片</td>
+          <td>node（要设置的节点）、imgData（对象，图片信息，结构为：<code>{url, title, width, height}</code>，图片的宽高必须要传）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_ICON</td>
+          <td>设置节点图标</td>
+          <td>node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在<a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件里的<code>nodeIconList</code>列表里获取到，图标名称为<code>type_name</code>，如<code>['priority_1']</code>）
+          </td>
+        </tr>
+        <tr>
+          <td>SET_NODE_HYPERLINK</td>
+          <td>设置节点超链接</td>
+          <td>node（要设置的节点）、link（超链接地址）、title（超链接名称，可选）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_NOTE</td>
+          <td>设置节点备注</td>
+          <td>node（要设置的节点）、note（备注文字）</td>
+        </tr>
+        <tr>
+          <td>SET_NODE_TAG</td>
+          <td>设置节点标签</td>
+          <td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>里获取到）
+          </td>
+        </tr>
+        <tr>
+          <td>INSERT_AFTER（v0.1.5+）</td>
+          <td>将节点移动到另一个节点的后面</td>
+          <td>node（要移动的节点）、 exist（目标节点）</td>
+        </tr>
+        <tr>
+          <td>INSERT_BEFORE（v0.1.5+）</td>
+          <td>将节点移动到另一个节点的前面</td>
+          <td>node（要移动的节点）、 exist（目标节点）</td>
+        </tr>
+        <tr>
+          <td>MOVE_NODE_TO（v0.1.5+）</td>
+          <td>移动一个节点作为另一个节点的子节点</td>
+          <td>node（要移动的节点）、 toNode（目标节点）</td>
+        </tr>
+        <tr>
+          <td>ADD_GENERALIZATION（v0.2.0+）</td>
+          <td>添加节点概要</td>
+          <td>data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）</td>
+        </tr>
+        <tr>
+          <td>REMOVE_GENERALIZATION（v0.2.0+）</td>
+          <td>删除节点概要</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>SET_NODE_CUSTOM_POSITION（v0.2.0+）</td>
+          <td>设置节点自定义位置</td>
+          <td>node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined）</td>
+        </tr>
+        <tr>
+          <td>RESET_LAYOUT（v0.2.0+）</td>
+          <td>一键整理布局</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>SET_NODE_SHAPE（v0.2.4+）</td>
+          <td>设置节点形状</td>
+          <td>node（要设置的节点）、shape（形状，全部形状：<a
+              href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>）
+          </td>
+        </tr>
+        <tr>
+          <td>GO_TARGET_NODE（v0.6.7+）</td>
+          <td>定位到某个节点，如果该节点被收起，那么会自动展开到该节点</td>
+          <td>node（要定位到的节点实例或节点uid）、callback（v0.6.9+，定位完成后的回调函数）</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>setData(data)</h3>
+    <p>动态设置思维导图数据，纯节点数据</p>
+    <p><code>data</code>：思维导图结构数据</p>
+    <h3>setFullData(<em>data</em>)</h3>
+    <blockquote>
+      <p>v0.2.7+</p>
+    </blockquote>
+    <p>动态设置思维导图数据，包括节点数据、布局、主题、视图</p>
+    <p><code>data</code>：完整数据，结构可参考<a
+        href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a>
+    </p>
+    <h3>getData(withConfig)</h3>
+    <blockquote>
+      <p>v0.2.9+</p>
+    </blockquote>
+    <p>获取思维导图数据</p>
+    <p><code>withConfig</code>：<code>Boolean</code>，默认为<code>false</code>，即获取的数据只包括节点树，如果传<code>true</code>则会包含主题、布局、视图等数据
+    </p>
+    <h3>export(type, isDownload, fileName)</h3>
+    <blockquote>
+      <p>需要先注册<code>Export</code>插件</p>
+    </blockquote>
+    <p>导出</p>
+    <p><code>type</code>：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）</p>
+    <p><code>isDownload</code>：是否需要直接触发下载，布尔值，默认为<code>false</code></p>
+    <p><code>fileName</code>：（v0.1.6+）导出文件的名称，默认为<code>思维导图</code></p>
+    <p>如果是导出为<code>png</code>，那么可以传递第四个参数：</p>
+    <p><code>transparent</code>：v0.5.7+, <code>Boolean</code>，默认为<code>false</code>，指定导出图片的背景是否是透明的</p>
+    <p>如果是导出为<code>svg</code>，那么可以传递第四个参数：</p>
+    <p><code>plusCssText</code>：附加的<code>css</code>样式，如果<code>svg</code>中存在<code>dom</code>节点，想要设置一些针对节点的样式可以通过这个参数传入</p>
+    <p>如果是导出为<code>json</code>或<code>smm</code>，那么可以传递第四个参数：</p>
+    <p><code>withConfig</code>：<code>Boolean</code>，默认为<code>true</code>，指定导出的数据中是否包含配置数据，否则只导出纯节点树数据</p>
+    <h3>toPos(x, y)</h3>
+    <blockquote>
+      <p>v0.1.5+</p>
+    </blockquote>
+    <p>将浏览器可视窗口的坐标转换成相对于画布的坐标</p>
+    <h3>addPlugin(plugin, opt)</h3>
+    <blockquote>
+      <p>v0.4.0+</p>
+    </blockquote>
+    <p>注册插件，使用<code>MindMap.usePlugin</code>注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的<code>addPlugin</code>方法。
+    </p>
+    <h3>removePlugin(plugin)</h3>
+    <blockquote>
+      <p>v0.4.0+</p>
+    </blockquote>
+    <p>移除注册的插件，无论是通过<code>usePlugin</code>还是<code>addPlugin</code>方法注册的插件都可以移除。</p>
 
   </div>
 </template>
@@ -1153,6 +1204,4 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file