Doc: update

2026-02-17 14:04:47 +08:00 · 2024-04-19 14:18:24 +08:00
parent 73a61f81f8
commit 23d38d9301
39 changed files with 826 additions and 32 deletions
--- a/web/src/assets/avatar/木星二号.jpg
+++ b/web/src/assets/avatar/木星二号.jpg
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -40,6 +40,7 @@ let APIList = [
  'cooperate',
  'rainbowLines',
  'handDrawnLikeStyle',
+  'demonstrate',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,45 @@
 # Changelog

+## 0.9.11
+
+Fix
+
+> 1.Fix the issue where clicking on the summary will trigger the data_change_detail event;
+>
+> 2.Fix the issue where the custom style command for removing all nodes with one click does not support summaries that are not arrays;
+>
+> 3.Fix the issue where summary nodes created in rich text mode are not rich text;
+>
+> 4.Fix the issue where the rich text plugin did not process node summaries when converting node data;
+>
+> 5.Fix the issue where the highlighted box of the corresponding node will be displayed incorrectly when pressing enter to end in summary node text editing;
+>
+> 6.Fix the issue of node width and height loss after text editing when creating multiple instances simultaneously;
+>
+> 7.Fix the issue where the expand/collapse button does not disappear after deleting all child nodes of the currently activated node;
+>
+> 8.Fix the issue where the canvas automatically moves and cannot stop when dragging nodes to the edge;
+
+New:
+
+> 1.Support default focus and entering editing mode when inserting summaries;
+>
+> 2.Support holding down the Command and Win keys to select multiple nodes;
+>
+> 3.Support exporting a node as an image;
+>
+> 4.Add demonstration plugin;
+
+Demo:
+
+> 1.Add the Export as Image button in the right-click menu of the node;
+>
+> 2.Optimize the issue of incomplete menu display when clicking the right mouse button at the window edge;
+>
+> 3.Add demonstration mode;
+>
+> 4.When copying Zhixi data, create summary data in array form;
+
 ## 0.9.10

 Fix:
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,32 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.11</h2>
+<p>Fix</p>
+<blockquote>
+<p>1.Fix the issue where clicking on the summary will trigger the data_change_detail event;</p>
+<p>2.Fix the issue where the custom style command for removing all nodes with one click does not support summaries that are not arrays;</p>
+<p>3.Fix the issue where summary nodes created in rich text mode are not rich text;</p>
+<p>4.Fix the issue where the rich text plugin did not process node summaries when converting node data;</p>
+<p>5.Fix the issue where the highlighted box of the corresponding node will be displayed incorrectly when pressing enter to end in summary node text editing;</p>
+<p>6.Fix the issue of node width and height loss after text editing when creating multiple instances simultaneously;</p>
+<p>7.Fix the issue where the expand/collapse button does not disappear after deleting all child nodes of the currently activated node;</p>
+<p>8.Fix the issue where the canvas automatically moves and cannot stop when dragging nodes to the edge;</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Support default focus and entering editing mode when inserting summaries;</p>
+<p>2.Support holding down the Command and Win keys to select multiple nodes;</p>
+<p>3.Support exporting a node as an image;</p>
+<p>4.Add demonstration plugin;</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Add the Export as Image button in the right-click menu of the node;</p>
+<p>2.Optimize the issue of incomplete menu display when clicking the right mouse button at the window edge;</p>
+<p>3.Add demonstration mode;</p>
+<p>4.When copying Zhixi data, create summary data in array form;</p>
+</blockquote>
 <h2>0.9.10</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/command/index.md
+++ b/web/src/pages/Doc/en/command/index.md
@@ -7,6 +7,18 @@ to an operation that needs to add a copy to the history stack data. The

 ## Methods

+### pause()
+
+> v0.9.11+
+
+Pause collecting historical data.
+
+### recovery()
+
+> v0.9.11+
+
+Restore the collection of historical data.
+
 ### add(name, fn)

 Add a command.
--- a/web/src/pages/Doc/en/command/index.vue
+++ b/web/src/pages/Doc/en/command/index.vue
@@ -6,6 +6,16 @@ includes many built-in commands and can also be added manually. A command refers
 to an operation that needs to add a copy to the history stack data. The
 <code>mindMap.command</code> instance can be obtained through this.&quot;</p>
 <h2>Methods</h2>
+<h3>pause()</h3>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>Pause collecting historical data.</p>
+<h3>recovery()</h3>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>Restore the collection of historical data.</p>
 <h3>add(name, fn)</h3>
 <p>Add a command.</p>
 <p><code>name</code>: Command name</p>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -118,6 +118,7 @@ const mindMap = new MindMap({
 | rainbowLinesConfig（v0.9.9+）     | Object | { open: false, colorsList: [] }  | Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } |         |
 | addContentToHeader（v0.9.9+）     | Function、null | null  | Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below |         |
 | addContentToFooter（v0.9.9+）     | Function、null | null  | The basic definition is the same as addContentToHeader, adding custom content at the end |         |
+| demonstrateConfig（v0.9.11+）     | Object、null | null  | Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration. For complete configuration, please refer to the 【Demonstration Plugin Configuration】 section below |         |

 ### Data structure

@@ -216,6 +217,17 @@ new MindMap({
 })
 ```

+### Demonstration Plugin Configuration
+
+| Field Name  | Type   | Default Value                               | Description                          |
+| ----------- | ------ | ------------------------------------------- | ------------------------------------ |
+| boxShadowColor | String | rgba(0, 0, 0, 0.8)  | The color of the area around the highlighted box |
+| borderRadius   | String | 5px                 | The size of the rounded corners of the highlighted box |
+| transition     | String | all 0.3s ease-out   | Transition properties of highlight box animation and CSS transition properties |
+| zIndex         | Number | 9999                | The hierarchy of highlighted box elements |
+| padding        | Number | 20                  | The inner margin of the highlighted box |
+| margin         | Number | 50                  | The outer margin of the highlighted box |
+
 ## Static methods

 ### defineTheme(name, config)
@@ -377,7 +389,7 @@ Clear `lineDraw`、`associativeLineDraw`、`nodeDraw`、`otherDraw` containers.

 Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.

-### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })
+### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter, node })

 > v0.3.0+

@@ -391,6 +403,8 @@ Destroy mind maps. It will remove registered plugins, remove listening events, a

 `addContentToFooter`：v0.9.9+, Function, You can return the custom content to be added to the tail, as detailed in the configuration in 【Instantiation options】

+`node`: v0.9.11+, Node instance, if passed, only export the content of that node
+
 Get the `svg` data and return an object. The detailed structure is as follows:

 ```js
@@ -402,6 +416,7 @@ Get the `svg` data and return an object. The detailed structure is as follows:
  origHeight, // Number, canvas height
  scaleX, // Number, horizontal zoom value of mind map graphics
  scaleY, // Number, vertical zoom value of mind map graphics
+  clipData// v0.9.11+，If node is passed, that is, the content of the specified node is exported, then this field will be returned, Represents the position coordinate data of the node region cropped from the complete image
 }
 ```

@@ -489,6 +504,8 @@ Listen to an event. Event list:
 | node_cooperate_avatar_click（v0.9.9+）    | Triggered when the mouse clicks on a person's avatar during collaborative editing  |  userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)      |
 | node_cooperate_avatar_mouseenter（v0.9.9+）    |  Triggered when the mouse moves over a person's avatar during collaborative editing |  userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)    |
 | node_cooperate_avatar_mouseleave（v0.9.9+）    |  Triggered when removing personnel avatars with the mouse during collaborative editing |  userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)   |
+| exit_demonstrate（v0.9.11+）    | Triggered when exiting demonstration mode  |     |
+| demonstrate_jump（v0.9.11+）    | Trigger when switching steps in demonstration mode  |  currentStepIndex（The index of the steps currently played, counting from 0）、stepLength（Total number of playback steps）   |

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

@@ -580,7 +597,7 @@ redo. All commands are as follows:
 | CLEAR_ACTIVE_NODE                  | Clear the active state of the currently active node(s), the active node will be the operation node |                                                              |
 | SET_NODE_EXPAND                    | Set whether the node is expanded                             | node (the node to set), expand (boolean, whether to expand)  |
 | EXPAND_ALL                         | Expand all nodes                                             |                                                              |
-| UNEXPAND_ALL                       | Collapse all nodes                                           |                                                              |
+| UNEXPAND_ALL                       | Collapse all nodes  | isSetRootNodeCenter（v0.9.11+，default is true，Will the root node be moved to the center after retracting all nodes）  |
 | UNEXPAND_TO_LEVEL (v0.2.8+)        | Expand to a specified level                                  | level (the level to expand to, 1, 2, 3...)                   |
 | SET_NODE_DATA                      | Update node data, that is, update the data in the data object of the node data object. Note that this command will not trigger view updates | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) |
 | SET_NODE_TEXT                      | Set node text                                                | 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 `true`）、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） |
@@ -593,7 +610,7 @@ redo. All commands are as follows:
 | INSERT_AFTER (v0.1.5+)             | Move Node to After Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node)                     |
 | INSERT_BEFORE (v0.1.5+)            | Move Node to Before Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node)                     |
 | MOVE_NODE_TO (v0.1.5+)             | Move a node as a child of another node       | node (the node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), toNode (the target node)            |
-| ADD_GENERALIZATION (v0.2.0+)       | Add a node summary                                           | data (the data for the summary, in object format, all numerical fields of the node are supported, default is `{text: 'summary'}`) |
+| ADD_GENERALIZATION (v0.2.0+)       | Add a node summary                                           | data (the data for the summary, in object format, all numerical fields of the node are supported, default is `{text: 'summary'}`)、openEdit（v0.9.11+，Default is true，Whether to enter text editing status by default） |
 | REMOVE_GENERALIZATION (v0.2.0+)    | Remove a node summary                                        |                                                              |
 | SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node                             | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) |
 | RESET_LAYOUT (v0.2.0+)             | Arrange layout with one click                                |                                                              |
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -686,6 +686,13 @@
 <td>The basic definition is the same as addContentToHeader, adding custom content at the end</td>
 <td></td>
 </tr>
+<tr>
+<td>demonstrateConfig（v0.9.11+）</td>
+<td>Object、null</td>
+<td>null</td>
+<td>Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration. For complete configuration, please refer to the 【Demonstration Plugin Configuration】 section below</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Data structure</h3>
@@ -834,6 +841,55 @@
  }
 })
 </code></pre>
+<h3>Demonstration Plugin Configuration</h3>
+<table>
+<thead>
+<tr>
+<th>Field Name</th>
+<th>Type</th>
+<th>Default Value</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>boxShadowColor</td>
+<td>String</td>
+<td>rgba(0, 0, 0, 0.8)</td>
+<td>The color of the area around the highlighted box</td>
+</tr>
+<tr>
+<td>borderRadius</td>
+<td>String</td>
+<td>5px</td>
+<td>The size of the rounded corners of the highlighted box</td>
+</tr>
+<tr>
+<td>transition</td>
+<td>String</td>
+<td>all 0.3s ease-out</td>
+<td>Transition properties of highlight box animation and CSS transition properties</td>
+</tr>
+<tr>
+<td>zIndex</td>
+<td>Number</td>
+<td>9999</td>
+<td>The hierarchy of highlighted box elements</td>
+</tr>
+<tr>
+<td>padding</td>
+<td>Number</td>
+<td>20</td>
+<td>The inner margin of the highlighted box</td>
+</tr>
+<tr>
+<td>margin</td>
+<td>Number</td>
+<td>50</td>
+<td>The outer margin of the highlighted box</td>
+</tr>
+</tbody>
+</table>
 <h2>Static methods</h2>
 <h3>defineTheme(name, config)</h3>
 <blockquote>
@@ -947,7 +1003,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 <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, ignoreWatermark = false, addContentToHeader, addContentToFooter })</h3>
+<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter, node })</h3>
 <blockquote>
 <p>v0.3.0+</p>
 </blockquote>
@@ -956,6 +1012,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 <p><code>ignoreWatermark</code>：v0.8.0+, Do not draw watermarks. If you do not need to draw watermarks, you can pass 'true' because drawing watermarks is very slow</p>
 <p><code>addContentToHeader</code>：v0.9.9+, Function, You can return the custom content to be added to the header, as detailed in the configuration in 【Instantiation options】</p>
 <p><code>addContentToFooter</code>：v0.9.9+, Function, You can return the custom content to be added to the tail, as detailed in the configuration in 【Instantiation options】</p>
+<p><code>node</code>: v0.9.11+, Node instance, if passed, only export the content of that node</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>
@@ -965,6 +1022,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
  origHeight, <span class="hljs-comment">// Number, canvas height</span>
  scaleX, <span class="hljs-comment">// Number, horizontal zoom value of mind map graphics</span>
  scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
+  clipData<span class="hljs-comment">// v0.9.11+，If node is passed, that is, the content of the specified node is exported, then this field will be returned, Represents the position coordinate data of the node region cropped from the complete image</span>
 }
 </code></pre>
 <h3>render(callback)</h3>
@@ -1258,6 +1316,16 @@ poor performance and should be used sparingly.</p>
 <td>Triggered when removing personnel avatars with the mouse during collaborative editing</td>
 <td>userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)</td>
 </tr>
+<tr>
+<td>exit_demonstrate（v0.9.11+）</td>
+<td>Triggered when exiting demonstration mode</td>
+<td></td>
+</tr>
+<tr>
+<td>demonstrate_jump（v0.9.11+）</td>
+<td>Trigger when switching steps in demonstration mode</td>
+<td>currentStepIndex（The index of the steps currently played, counting from 0）、stepLength（Total number of playback steps）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
@@ -1396,7 +1464,7 @@ redo. All commands are as follows:</p>
 <tr>
 <td>UNEXPAND_ALL</td>
 <td>Collapse all nodes</td>
-<td></td>
+<td>isSetRootNodeCenter（v0.9.11+，default is true，Will the root node be moved to the center after retracting all nodes）</td>
 </tr>
 <tr>
 <td>UNEXPAND_TO_LEVEL (v0.2.8+)</td>
@@ -1461,7 +1529,7 @@ redo. All commands are as follows:</p>
 <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>
+<td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is <code>{text: 'summary'}</code>)、openEdit（v0.9.11+，Default is true，Whether to enter text editing status by default）</td>
 </tr>
 <tr>
 <td>REMOVE_GENERALIZATION (v0.2.0+)</td>
--- a/web/src/pages/Doc/en/cooperate/index.md
+++ b/web/src/pages/Doc/en/cooperate/index.md
@@ -80,6 +80,14 @@ MindMap.usePlugin(Cooperate)

 After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.cooperate`.

+### Config
+
+This plugin supports some configurations that can be passed in when instantiating a mind map. The supported configurations are as follows:
+
+`beforeCooperateUpdate`
+
+Please refer to the 【Instantiation options】 section in the 【Constructor】 section for details.
+
 ## Methods

 ### getDoc()
--- a/web/src/pages/Doc/en/cooperate/index.vue
+++ b/web/src/pages/Doc/en/cooperate/index.vue
@@ -60,6 +60,10 @@ npm run wsServe
 MindMap.usePlugin(Cooperate)
 </code></pre>
 <p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.cooperate</code>.</p>
+<h3>Config</h3>
+<p>This plugin supports some configurations that can be passed in when instantiating a mind map. The supported configurations are as follows:</p>
+<p><code>beforeCooperateUpdate</code></p>
+<p>Please refer to the 【Instantiation options】 section in the 【Constructor】 section for details.</p>
 <h2>Methods</h2>
 <h3>getDoc()</h3>
 <p>Obtain Yjs doc instance.</p>
--- a/web/src/pages/Doc/en/demonstrate/index.md
+++ b/web/src/pages/Doc/en/demonstrate/index.md
@@ -0,0 +1,71 @@
+# Demonstrate plugin
+
+> v0.9.11+
+
+The `Demonstrate` plugin provides demonstration functionality.
+
+When entering demonstration mode, the container elements will be automatically displayed in full screen, and then default to the root node. You can switch between the previous and next steps by pressing the left and right arrow keys on the keyboard, and exit demonstration mode by pressing the 'Esc' key.
+
+After entering demonstration mode, all shortcut keys on the mind map will be unavailable, and the mouse will not be able to operate the mind map.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Demonstrate from 'simple-mind-map/src/plugins/Demonstrate.js'
+
+MindMap.usePlugin(Demonstrate)
+```
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.demonstrate`.
+
+### Config
+
+This plugin provides some configuration items for configuration, which can be configured through the instantiation option 'demonstrateConfig'. Please refer to the 【Instantiation options】 section in the 【Constructor】 section for details.
+
+### Event
+
+The plugin will dispatch the following events:
+
+`exit_demonstrate`：Triggered when exiting the demonstration.
+
+`demonstrate_jump`：Triggered when jumping.
+
+Please refer to the 'on' function in the 【Instance methods】 section of the 【Constructor】 chapter for details.
+
+## Props
+
+### stepList
+
+List of all steps demonstrated. Available when the 'enter' method is called.
+
+### currentStepIndex
+
+The index of the steps currently played, counting from 0.
+
+### config
+
+The current configuration of the plugin.
+
+## Methods
+
+### enter()
+
+Entering demonstration mode will automatically display the container elements in full screen.
+
+### exit()
+
+Exit demonstration mode, which can also be exited by pressing the 'Esc' key.
+
+### prev()
+
+Previous step.
+
+### next()
+
+Next step.
+
+### jump(index)
+
+- `index`：Number，To jump to a certain step, count from 0.
+
+Jump to a certain step.
--- a/web/src/pages/Doc/en/demonstrate/index.vue
+++ b/web/src/pages/Doc/en/demonstrate/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h1>Demonstrate plugin</h1>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>The <code>Demonstrate</code> plugin provides demonstration functionality.</p>
+<p>When entering demonstration mode, the container elements will be automatically displayed in full screen, and then default to the root node. You can switch between the previous and next steps by pressing the left and right arrow keys on the keyboard, and exit demonstration mode by pressing the 'Esc' key.</p>
+<p>After entering demonstration mode, all shortcut keys on the mind map will be unavailable, and the mouse will not be able to operate the mind map.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Demonstrate <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Demonstrate.js&#x27;</span>
+
+MindMap.usePlugin(Demonstrate)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.demonstrate</code>.</p>
+<h3>Config</h3>
+<p>This plugin provides some configuration items for configuration, which can be configured through the instantiation option 'demonstrateConfig'. Please refer to the 【Instantiation options】 section in the 【Constructor】 section for details.</p>
+<h3>Event</h3>
+<p>The plugin will dispatch the following events:</p>
+<p><code>exit_demonstrate</code>：Triggered when exiting the demonstration.</p>
+<p><code>demonstrate_jump</code>：Triggered when jumping.</p>
+<p>Please refer to the 'on' function in the 【Instance methods】 section of the 【Constructor】 chapter for details.</p>
+<h2>Props</h2>
+<h3>stepList</h3>
+<p>List of all steps demonstrated. Available when the 'enter' method is called.</p>
+<h3>currentStepIndex</h3>
+<p>The index of the steps currently played, counting from 0.</p>
+<h3>config</h3>
+<p>The current configuration of the plugin.</p>
+<h2>Methods</h2>
+<h3>enter()</h3>
+<p>Entering demonstration mode will automatically display the container elements in full screen.</p>
+<h3>exit()</h3>
+<p>Exit demonstration mode, which can also be exited by pressing the 'Esc' key.</p>
+<h3>prev()</h3>
+<p>Previous step.</p>
+<h3>next()</h3>
+<p>Next step.</p>
+<h3>jump(index)</h3>
+<ul>
+<li><code>index</code>：Number，To jump to a certain step, count from 0.</li>
+</ul>
+<p>Jump to a certain step.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -38,7 +38,9 @@ a.download = 'xxx'
 a.click()
 ```

-### png(name, transparent = false, checkRotate, compress)
+### png(name, transparent = false, node = null)
+
+> Versions below v0.9.2 are：png(name, transparent = false, checkRotate, compress)

 > Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)

@@ -52,6 +54,8 @@ a.click()

 - `compress`：v0.8.1+, (v0.9.2+obsolete)，null | { width, height }, The parameter for compressing images. In some cases, the length and width of the exported image may be very large. If you want to reduce it, you can use this parameter to control it. Only one width or height can be provided, and it will be scaled proportionally

+- `node`：v0.9.11+，Node instances, if passed, will only export the content of that node;
+
 Exports as `png`.

 ### svg(name, plusCssText)
@@ -115,14 +119,17 @@ Return `json` data.

 Export as `markdown` file.

-### getSvgData()
+### getSvgData(node)
+
+`node`: v0.9.11+, Node instance, if passed, will return a 'clipData' object, representing the position coordinate data of the node region cropped from the complete image;

 Gets `svg` data, an async method that returns an object:

 ```js
 {
-  node // svg node
-  str // svg string
+  node, // svg node
+  str, // svg string
+  clipData
 }
 ```

--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@@ -27,7 +27,10 @@ a.href = <span class="hljs-string">&#x27;xxx.png&#x27;</span><span class="hljs-c
 a.download = <span class="hljs-string">&#x27;xxx&#x27;</span>
 a.click()
 </code></pre>
-<h3>png(name, transparent = false, checkRotate, compress)</h3>
+<h3>png(name, transparent = false, node = null)</h3>
+<blockquote>
+<p>Versions below v0.9.2 are：png(name, transparent = false, checkRotate, compress)</p>
+</blockquote>
 <blockquote>
 <p>Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
 </blockquote>
@@ -47,6 +50,9 @@ a.click()
 <li>
 <p><code>compress</code>：v0.8.1+, (v0.9.2+obsolete)，null | { width, height }, The parameter for compressing images. In some cases, the length and width of the exported image may be very large. If you want to reduce it, you can use this parameter to control it. Only one width or height can be provided, and it will be scaled proportionally</p>
 </li>
+<li>
+<p><code>node</code>：v0.9.11+，Node instances, if passed, will only export the content of that node;</p>
+</li>
 </ul>
 <p>Exports as <code>png</code>.</p>
 <h3>svg(name, plusCssText)</h3>
@@ -112,11 +118,13 @@ MindMap.usePlugin(ExportPDF)
 <p>v0.4.7+</p>
 </blockquote>
 <p>Export as <code>markdown</code> file.</p>
-<h3>getSvgData()</h3>
+<h3>getSvgData(node)</h3>
+<p><code>node</code>: v0.9.11+, Node instance, if passed, will return a 'clipData' object, representing the position coordinate data of the node region cropped from the complete image;</p>
 <p>Gets <code>svg</code> data, an async method that returns an object:</p>
 <pre class="hljs"><code>{
-  node <span class="hljs-comment">// svg node</span>
-  str <span class="hljs-comment">// svg string</span>
+  node, <span class="hljs-comment">// svg node</span>
+  str, <span class="hljs-comment">// svg string</span>
+  clipData
 }
 </code></pre>
 <h3>xmind(name)</h3>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -361,4 +361,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
        <img src="../../../../assets/avatar/在下青铜五.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>在下青铜五</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/木星二号.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>木星二号</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -315,6 +315,10 @@ full screen, support mini map</li>
        <img src="../../../../assets/avatar/在下青铜五.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>在下青铜五</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/木星二号.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>木星二号</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -56,6 +56,12 @@ Whether the node is currently being dragged

 ## Methods

+### deactivate()
+
+> 0.9.11+
+
+Deactivate the node.
+
 ### getAncestorNodes()

 > v0.9.9+
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -31,6 +31,11 @@
 </blockquote>
 <p>Whether the node is currently being dragged</p>
 <h2>Methods</h2>
+<h3>deactivate()</h3>
+<blockquote>
+<p>0.9.11+</p>
+</blockquote>
+<p>Deactivate the node.</p>
 <h3>getAncestorNodes()</h3>
 <blockquote>
 <p>v0.9.9+</p>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -479,6 +479,33 @@ Convert flat objects into a tree structure. Reverse operation of the transformTr

 Remove the node of the specified selector from the specified HTML string, and then return the processed HTML string.

+#### getOnfullscreEnevt()
+
+> v0.9.11+
+
+Detect full screen events available in the current browser. You can use it this way:
+
+```js
+const fullscrrenEvent = getOnfullscreEnevt()
+
+// Monitor full screen events
+document.addEventListener(fullscrrenEvent, () => {
+  // Determine whether the current state is full screen based on whether document.fullscreenElement is null
+})
+```
+
+#### fullScreen(element)
+
+> v0.9.11+
+
+Put the specified DOM element into full screen mode.
+
+#### exitFullScreen()
+
+> v0.9.11+
+
+Exit full screen mode.
+
 ## Simulate CSS background in Canvas

 Import:
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -402,6 +402,28 @@ and copying the <code>data</code> of the data object, example:</p>
 </li>
 </ul>
 <p>Remove the node of the specified selector from the specified HTML string, and then return the processed HTML string.</p>
+<h4>getOnfullscreEnevt()</h4>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>Detect full screen events available in the current browser. You can use it this way:</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> fullscrrenEvent = getOnfullscreEnevt()
+
+<span class="hljs-comment">// Monitor full screen events</span>
+<span class="hljs-built_in">document</span>.addEventListener(fullscrrenEvent, <span class="hljs-function">() =&gt;</span> {
+  <span class="hljs-comment">// Determine whether the current state is full screen based on whether document.fullscreenElement is null</span>
+})
+</code></pre>
+<h4>fullScreen(element)</h4>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>Put the specified DOM element into full screen mode.</p>
+<h4>exitFullScreen()</h4>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>Exit full screen mode.</p>
 <h2>Simulate CSS background in Canvas</h2>
 <p>Import:</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -63,6 +63,7 @@ export default [
      { path: 'formula', title: 'Formula插件' },
      { path: 'cooperate', title: 'Cooperate插件' },
      { path: 'rainbowLines', title: 'RainbowLines插件' },
+      { path: 'demonstrate', title: 'Demonstrate插件' },
      { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' },
      { path: 'help1', title: '概要/关联线' },
      { path: 'help2', title: '客户端' },
@@ -106,6 +107,7 @@ export default [
      { path: 'formula', title: 'Formula plugin' },
      { path: 'cooperate', title: 'Cooperate plugin' },
      { path: 'rainbowLines', title: 'RainbowLines plugin' },
+      { path: 'demonstrate', title: 'Demonstrate plugin' },
      { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle chargeable plugin' },
      { path: 'client', title: 'Client' }
    ]
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,45 @@
 # Changelog

+## 0.9.11
+
+修复：
+
+> 1.修复点击概要会触发data_change_detail事件的问题；
+>
+> 2.修复一键去除所有节点自定义样式命令不支持不为数组的概要的问题；
+>
+> 3.修复富文本模式下创建的概要节点不是富文本的问题；
+>
+> 4.修复富文本插件转换节点数据时没有处理节点概要的问题；
+>
+> 5.修复概要节点文本编辑中按回车结束时，相应的节点高亮框会错位显示的问题；
+>
+> 6.修复同时创建多个实例时，文本编辑后节点宽高丢失的问题；
+>
+> 7.修复删除当前激活的节点的所有子节点后，展开收起按钮没有消失的问题；
+>
+> 8.修复拖拽节点到边缘时画布自动移动无法停止的问题；
+
+新增：
+
+> 1.插入概要时支持默认聚焦和进入编辑状态；
+>
+> 2.支持按住Command键和Win键多选节点；
+>
+> 3.支持导出某个节点为图片；
+>
+> 4.新增演示插件；
+
+Demo：
+
+> 1.节点右键菜单新增导出为图片按钮；
+>
+> 2.优化鼠标在窗口边缘点击右键时菜单显示不全的问题；
+>
+> 3.新增演示模式；
+>
+> 4.复制知犀数据时，概要数据创建为数组形式；
+
 ## 0.9.10

 修复：
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,32 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.11</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复点击概要会触发data_change_detail事件的问题；</p>
+<p>2.修复一键去除所有节点自定义样式命令不支持不为数组的概要的问题；</p>
+<p>3.修复富文本模式下创建的概要节点不是富文本的问题；</p>
+<p>4.修复富文本插件转换节点数据时没有处理节点概要的问题；</p>
+<p>5.修复概要节点文本编辑中按回车结束时，相应的节点高亮框会错位显示的问题；</p>
+<p>6.修复同时创建多个实例时，文本编辑后节点宽高丢失的问题；</p>
+<p>7.修复删除当前激活的节点的所有子节点后，展开收起按钮没有消失的问题；</p>
+<p>8.修复拖拽节点到边缘时画布自动移动无法停止的问题；</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.插入概要时支持默认聚焦和进入编辑状态；</p>
+<p>2.支持按住Command键和Win键多选节点；</p>
+<p>3.支持导出某个节点为图片；</p>
+<p>4.新增演示插件；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.节点右键菜单新增导出为图片按钮；</p>
+<p>2.优化鼠标在窗口边缘点击右键时菜单显示不全的问题；</p>
+<p>3.新增演示模式；</p>
+<p>4.复制知犀数据时，概要数据创建为数组形式；</p>
+</blockquote>
 <h2>0.9.10</h2>
 <p>修复：</p>
 <blockquote>
--- a/web/src/pages/Doc/zh/command/index.md
+++ b/web/src/pages/Doc/zh/command/index.md
@@ -1,9 +1,21 @@
-# Command实例
+# Command 实例

 `command`实例负责命令的添加及执行，内置了很多命令，也可以自行添加，命令指需要在历史堆栈数据里添加副本的操作。可通过`mindMap.command`获取到该实例

 ## 方法

+### pause()
+
+> v0.9.11+
+
+暂停收集历史数据。
+
+### recovery()
+
+> v0.9.11+
+
+恢复收集历史数据。
+
 ### add(name, fn)

 添加命令。
@@ -26,4 +38,4 @@

 ### clearHistory()

-清空历史堆栈数据
+清空历史堆栈数据
--- a/web/src/pages/Doc/zh/command/index.vue
+++ b/web/src/pages/Doc/zh/command/index.vue
@@ -1,8 +1,18 @@
 <template>
  <div>
-    <h1>Command实例</h1>
+    <h1>Command 实例</h1>
 <p><code>command</code>实例负责命令的添加及执行，内置了很多命令，也可以自行添加，命令指需要在历史堆栈数据里添加副本的操作。可通过<code>mindMap.command</code>获取到该实例</p>
 <h2>方法</h2>
+<h3>pause()</h3>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>暂停收集历史数据。</p>
+<h3>recovery()</h3>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>恢复收集历史数据。</p>
 <h3>add(name, fn)</h3>
 <p>添加命令。</p>
 <p><code>name</code>：命令名称</p>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -117,7 +117,7 @@ const mindMap = new MindMap({
 | rainbowLinesConfig（v0.9.9+）     | Object | { open: false, colorsList: [] }  | 彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } |
 | addContentToHeader（v0.9.9+）     | Function、null | null  | 导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 |
 | addContentToFooter（v0.9.9+）     | Function、null | null  | 基本释义同addContentToHeader，在尾部添加自定义内容 |
-
+| demonstrateConfig（v0.9.11+）     | Object、null | null  | 演示插件Demonstrate的配置。不传则使用默认配置，可传递一个对象，如果只配置某个属性，可以只设置该属性，其他没有设置的同样会使用默认配置，完整配置请参考下方【演示插件配置】小节 |

 ### 数据结构

@@ -218,6 +218,17 @@ new MindMap({
 })
 ```

+### 演示插件配置
+
+| 字段名称    | 类型   | 默认值                                      | 描述                                 |
+| ----------- | ------ | ------------------------------------------- | ------------------------------------ |
+| boxShadowColor | String | rgba(0, 0, 0, 0.8)  | 高亮框四周区域的颜色 |
+| borderRadius   | String | 5px                 | 高亮框的圆角大小 |
+| transition     | String | all 0.3s ease-out   | 高亮框动画的过渡属性，CSS的transition属性 |
+| zIndex         | Number | 9999                | 高亮框元素的层级 |
+| padding        | Number | 20                  | 高亮框的内边距 |
+| margin         | Number | 50                  | 高亮框的外边距 |
+
 ## 静态方法

 ### defineTheme(name, config)
@@ -379,7 +390,7 @@ mindMap.setTheme('主题名称')

 销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。

-### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })
+### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter, node })

 > v0.3.0+

@@ -393,6 +404,8 @@ mindMap.setTheme('主题名称')

 `addContentToFooter`：v0.9.9+，Function，可以返回要追加到尾部的自定义内容，详细介绍见【实例化选项】中的该配置

+`node`: v0.9.11+, 节点实例，如果传了，那么仅导出该节点的内容
+
 获取`svg`数据，返回一个对象，详细结构如下：

 ```js
@@ -404,6 +417,7 @@ mindMap.setTheme('主题名称')
  origHeight, // Number，画布高度
  scaleX, // Number，思维导图图形的水平缩放值
  scaleY, // Number，思维导图图形的垂直缩放值
+  clipData// v0.9.11+，如果传了node，即导出指定节点的内容，那么会返回该字段，代表从完整的图片中裁剪出该节点区域的位置坐标数据
 }
 ```

@@ -488,6 +502,8 @@ mindMap.setTheme('主题名称')
 | node_cooperate_avatar_click（v0.9.9+）    | 协同编辑时，鼠标点击人员头像时触发  |  userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)      |
 | node_cooperate_avatar_mouseenter（v0.9.9+）    | 协同编辑时，鼠标移入人员头像时触发  |  userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)     |
 | node_cooperate_avatar_mouseleave（v0.9.9+）    | 协同编辑时，鼠标移除人员头像时触发  |  userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)      |
+| exit_demonstrate（v0.9.11+）    | 退出演示模式时触发  |     |
+| demonstrate_jump（v0.9.11+）    | 演示模式中，切换步骤时触发  |  currentStepIndex（当前播放到的步骤索引，从0开始计数）、stepLength（总的播放步骤数量）   |

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

@@ -577,7 +593,7 @@ mindMap.updateConfig({
 | CLEAR_ACTIVE_NODE                   | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
 | SET_NODE_EXPAND                     | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
 | EXPAND_ALL                          | 展开所有节点                                                 |                                                              |
-| UNEXPAND_ALL                        | 收起所有节点                                                 |                                                              |
+| UNEXPAND_ALL                        | 收起所有节点       | isSetRootNodeCenter（v0.9.11+，默认为true，收起所有节点后是否将根节点移至中心） |
 | UNEXPAND_TO_LEVEL（v0.2.8+）        | 展开到指定层级                                               | level（要展开到的层级，1、2、3...）                          |
 | SET_NODE_DATA                       | 更新节点数据，即更新节点数据对象里`data`对象的数据，注意这个命令不会触发视图的更新           | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
 | SET_NODE_TEXT                       | 设置节点文本                                                 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为`true`）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式） |
@@ -590,7 +606,7 @@ mindMap.updateConfig({
 | INSERT_AFTER（v0.1.5+）             | 将节点移动到另一个节点的后面    | node（要移动的节点，（v0.7.2+支持传递节点数组实现同时移动多个节点））、 exist（目标节点）                     |
 | INSERT_BEFORE（v0.1.5+）            | 将节点移动到另一个节点的前面，（v0.7.2+支持传递节点数组实现同时移动多个节点）   | node（要移动的节点）、 exist（目标节点）                     |
 | MOVE_NODE_TO（v0.1.5+）             | 移动节点作为另一个节点的子节点，（v0.7.2+支持传递节点数组实现同时移动多个节点）   | node（要移动的节点）、 toNode（目标节点）                    |
-| ADD_GENERALIZATION（v0.2.0+）       | 添加节点概要                                                 | data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}） |
+| ADD_GENERALIZATION（v0.2.0+）       | 添加节点概要                                                 | data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）、openEdit（v0.9.11+，默认为true，是否默认进入文本编辑状态） |
 | REMOVE_GENERALIZATION（v0.2.0+）    | 删除节点概要                                                 |                                                              |
 | SET_NODE_CUSTOM_POSITION（v0.2.0+） | 设置节点自定义位置                                           | node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined） |
 | RESET_LAYOUT（v0.2.0+）             | 一键整理布局                                                 |                                                              |
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -585,6 +585,12 @@
 <td>null</td>
 <td>基本释义同addContentToHeader，在尾部添加自定义内容</td>
 </tr>
+<tr>
+<td>demonstrateConfig（v0.9.11+）</td>
+<td>Object、null</td>
+<td>null</td>
+<td>演示插件Demonstrate的配置。不传则使用默认配置，可传递一个对象，如果只配置某个属性，可以只设置该属性，其他没有设置的同样会使用默认配置，完整配置请参考下方【演示插件配置】小节</td>
+</tr>
 </tbody>
 </table>
 <h3>数据结构</h3>
@@ -735,6 +741,55 @@
  }
 })
 </code></pre>
+<h3>演示插件配置</h3>
+<table>
+<thead>
+<tr>
+<th>字段名称</th>
+<th>类型</th>
+<th>默认值</th>
+<th>描述</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>boxShadowColor</td>
+<td>String</td>
+<td>rgba(0, 0, 0, 0.8)</td>
+<td>高亮框四周区域的颜色</td>
+</tr>
+<tr>
+<td>borderRadius</td>
+<td>String</td>
+<td>5px</td>
+<td>高亮框的圆角大小</td>
+</tr>
+<tr>
+<td>transition</td>
+<td>String</td>
+<td>all 0.3s ease-out</td>
+<td>高亮框动画的过渡属性，CSS的transition属性</td>
+</tr>
+<tr>
+<td>zIndex</td>
+<td>Number</td>
+<td>9999</td>
+<td>高亮框元素的层级</td>
+</tr>
+<tr>
+<td>padding</td>
+<td>Number</td>
+<td>20</td>
+<td>高亮框的内边距</td>
+</tr>
+<tr>
+<td>margin</td>
+<td>Number</td>
+<td>50</td>
+<td>高亮框的外边距</td>
+</tr>
+</tbody>
+</table>
 <h2>静态方法</h2>
 <h3>defineTheme(name, config)</h3>
 <blockquote>
@@ -848,7 +903,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <p>v0.6.0+</p>
 </blockquote>
 <p>销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。</p>
-<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })</h3>
+<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter, node })</h3>
 <blockquote>
 <p>v0.3.0+</p>
 </blockquote>
@@ -857,6 +912,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <p><code>ignoreWatermark</code>：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传<code>true</code>，因为绘制水印非常慢</p>
 <p><code>addContentToHeader</code>：v0.9.9+，Function，可以返回要追加到头部的自定义内容，详细介绍见【实例化选项】中的该配置</p>
 <p><code>addContentToFooter</code>：v0.9.9+，Function，可以返回要追加到尾部的自定义内容，详细介绍见【实例化选项】中的该配置</p>
+<p><code>node</code>: v0.9.11+, 节点实例，如果传了，那么仅导出该节点的内容</p>
 <p>获取<code>svg</code>数据，返回一个对象，详细结构如下：</p>
 <pre class="hljs"><code>{
  svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
@@ -866,6 +922,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
  origHeight, <span class="hljs-comment">// Number，画布高度</span>
  scaleX, <span class="hljs-comment">// Number，思维导图图形的水平缩放值</span>
  scaleY, <span class="hljs-comment">// Number，思维导图图形的垂直缩放值</span>
+  clipData<span class="hljs-comment">// v0.9.11+，如果传了node，即导出指定节点的内容，那么会返回该字段，代表从完整的图片中裁剪出该节点区域的位置坐标数据</span>
 }
 </code></pre>
 <h3>render(callback)</h3>
@@ -1152,6 +1209,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>协同编辑时，鼠标移除人员头像时触发</td>
 <td>userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)</td>
 </tr>
+<tr>
+<td>exit_demonstrate（v0.9.11+）</td>
+<td>退出演示模式时触发</td>
+<td></td>
+</tr>
+<tr>
+<td>demonstrate_jump（v0.9.11+）</td>
+<td>演示模式中，切换步骤时触发</td>
+<td>currentStepIndex（当前播放到的步骤索引，从0开始计数）、stepLength（总的播放步骤数量）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
@@ -1292,7 +1359,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <tr>
 <td>UNEXPAND_ALL</td>
 <td>收起所有节点</td>
-<td></td>
+<td>isSetRootNodeCenter（v0.9.11+，默认为true，收起所有节点后是否将根节点移至中心）</td>
 </tr>
 <tr>
 <td>UNEXPAND_TO_LEVEL（v0.2.8+）</td>
@@ -1357,7 +1424,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <tr>
 <td>ADD_GENERALIZATION（v0.2.0+）</td>
 <td>添加节点概要</td>
-<td>data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）</td>
+<td>data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）、openEdit（v0.9.11+，默认为true，是否默认进入文本编辑状态）</td>
 </tr>
 <tr>
 <td>REMOVE_GENERALIZATION（v0.2.0+）</td>
--- a/web/src/pages/Doc/zh/cooperate/index.md
+++ b/web/src/pages/Doc/zh/cooperate/index.md
@@ -80,6 +80,14 @@ MindMap.usePlugin(Cooperate)

 注册完且实例化`MindMap`后可通过`mindMap.cooperate`获取到该实例。

+### 配置
+
+该插件支持一些配置，可在实例化思维导图时传入，支持的配置如下：
+
+`beforeCooperateUpdate`
+
+详细信息见【构造函数】篇章的【实例化选项】小节。
+
 ## 方法

 ### getDoc()
--- a/web/src/pages/Doc/zh/cooperate/index.vue
+++ b/web/src/pages/Doc/zh/cooperate/index.vue
@@ -60,6 +60,10 @@ npm run wsServe
 MindMap.usePlugin(Cooperate)
 </code></pre>
 <p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.cooperate</code>获取到该实例。</p>
+<h3>配置</h3>
+<p>该插件支持一些配置，可在实例化思维导图时传入，支持的配置如下：</p>
+<p><code>beforeCooperateUpdate</code></p>
+<p>详细信息见【构造函数】篇章的【实例化选项】小节。</p>
 <h2>方法</h2>
 <h3>getDoc()</h3>
 <p>获取Yjs doc实例。</p>
--- a/web/src/pages/Doc/zh/demonstrate/index.md
+++ b/web/src/pages/Doc/zh/demonstrate/index.md
@@ -0,0 +1,72 @@
+# Demonstrate 插件
+
+> v0.9.11+
+
+`Demonstrate`插件提供演示功能。
+
+进入演示模式时会自动将容器元素全屏，然后默认聚焦到根节点，可通过键盘方向键的左右来切换上一步和下一步，可通过`Esc`键退出演示模式。
+
+进入演示模式后思维导图所有的快捷键都将无法使用，鼠标也无法操作思维导图。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import Demonstrate from 'simple-mind-map/src/plugins/Demonstrate.js'
+
+MindMap.usePlugin(Demonstrate)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.demonstrate`获取到该实例。
+
+### 配置
+
+该插件提供了一些配置项可供配置，可以通过实例化选项`demonstrateConfig`进行配置。详见【构造函数】篇章的【实例化选项】小节。
+
+### 事件
+
+该插件会派发如下事件：
+
+`exit_demonstrate`：退出演示时触发。
+
+`demonstrate_jump`：跳转时触发。
+
+详见【构造函数】篇章的【实例方法】小节`on`函数。
+
+## 属性
+
+### stepList
+
+演示的所有步骤列表。当调用了`enter`方法后可用。
+
+### currentStepIndex
+
+当前播放到的步骤索引，从0开始计数。
+
+### config
+
+插件当前的配置。
+
+## 方法
+
+### enter()
+
+进入演示模式，会自动将容器元素全屏。
+
+### exit()
+
+退出演示模式，通过`Esc`键也可退出。
+
+### prev()
+
+上一步。
+
+### next()
+
+下一步。
+
+### jump(index)
+
+- `index`：Number，要跳转到的某一步，从0开始计数。
+
+跳转到某一步。
--- a/web/src/pages/Doc/zh/demonstrate/index.vue
+++ b/web/src/pages/Doc/zh/demonstrate/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h1>Demonstrate 插件</h1>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p><code>Demonstrate</code>插件提供演示功能。</p>
+<p>进入演示模式时会自动将容器元素全屏，然后默认聚焦到根节点，可通过键盘方向键的左右来切换上一步和下一步，可通过<code>Esc</code>键退出演示模式。</p>
+<p>进入演示模式后思维导图所有的快捷键都将无法使用，鼠标也无法操作思维导图。</p>
+<h2>注册</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Demonstrate <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Demonstrate.js&#x27;</span>
+
+MindMap.usePlugin(Demonstrate)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.demonstrate</code>获取到该实例。</p>
+<h3>配置</h3>
+<p>该插件提供了一些配置项可供配置，可以通过实例化选项<code>demonstrateConfig</code>进行配置。详见【构造函数】篇章的【实例化选项】小节。</p>
+<h3>事件</h3>
+<p>该插件会派发如下事件：</p>
+<p><code>exit_demonstrate</code>：退出演示时触发。</p>
+<p><code>demonstrate_jump</code>：跳转时触发。</p>
+<p>详见【构造函数】篇章的【实例方法】小节<code>on</code>函数。</p>
+<h2>属性</h2>
+<h3>stepList</h3>
+<p>演示的所有步骤列表。当调用了<code>enter</code>方法后可用。</p>
+<h3>currentStepIndex</h3>
+<p>当前播放到的步骤索引，从0开始计数。</p>
+<h3>config</h3>
+<p>插件当前的配置。</p>
+<h2>方法</h2>
+<h3>enter()</h3>
+<p>进入演示模式，会自动将容器元素全屏。</p>
+<h3>exit()</h3>
+<p>退出演示模式，通过<code>Esc</code>键也可退出。</p>
+<h3>prev()</h3>
+<p>上一步。</p>
+<h3>next()</h3>
+<p>下一步。</p>
+<h3>jump(index)</h3>
+<ul>
+<li><code>index</code>：Number，要跳转到的某一步，从0开始计数。</li>
+</ul>
+<p>跳转到某一步。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@@ -38,7 +38,9 @@ a.download = 'xxx'
 a.click()
 ```

-### png(name, transparent = false, checkRotate, compress)
+### png(name, transparent = false, node = null)
+
+> v0.9.2以下版本为：png(name, transparent = false, checkRotate, compress)

 > v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)

@@ -52,6 +54,8 @@ a.click()

 - `compress`：v0.8.1+，（v0.9.2+已废弃），null | { width, height }, 压缩图片的参数，某些情况下导出的图片长宽可能非常大，如果希望减小，那么可以通过该参数来控制，宽或高只提供一个即可，会按比例缩放

+- `node`：v0.9.11+，节点实例，如果传了，那么会仅导出该节点的内容；
+
 导出为`png`。

 ### svg(name, plusCssText)
@@ -119,14 +123,17 @@ MindMap.usePlugin(ExportPDF)

 导出`markdown`文件。

-### getSvgData()
+### getSvgData(node)
+
+`node`: v0.9.11+, 节点实例，如果传了，那么会返回一个`clipData`对象，代表从完整的图片中裁剪出该节点区域的位置坐标数据；

 获取`svg`数据，异步方法，返回一个对象：

 ```js
 {
-  node// svg节点
-  str// svg字符串
+  node,// svg节点
+  str,// svg字符串
+  clipData
 }
 ```

--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@@ -27,7 +27,10 @@ a.href = <span class="hljs-string">&#x27;xxx.png&#x27;</span><span class="hljs-c
 a.download = <span class="hljs-string">&#x27;xxx&#x27;</span>
 a.click()
 </code></pre>
-<h3>png(name, transparent = false, checkRotate, compress)</h3>
+<h3>png(name, transparent = false, node = null)</h3>
+<blockquote>
+<p>v0.9.2以下版本为：png(name, transparent = false, checkRotate, compress)</p>
+</blockquote>
 <blockquote>
 <p>v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
 </blockquote>
@@ -47,6 +50,9 @@ a.click()
 <li>
 <p><code>compress</code>：v0.8.1+，（v0.9.2+已废弃），null | { width, height }, 压缩图片的参数，某些情况下导出的图片长宽可能非常大，如果希望减小，那么可以通过该参数来控制，宽或高只提供一个即可，会按比例缩放</p>
 </li>
+<li>
+<p><code>node</code>：v0.9.11+，节点实例，如果传了，那么会仅导出该节点的内容；</p>
+</li>
 </ul>
 <p>导出为<code>png</code>。</p>
 <h3>svg(name, plusCssText)</h3>
@@ -114,11 +120,13 @@ MindMap.usePlugin(ExportPDF)
 <p>v0.4.7+</p>
 </blockquote>
 <p>导出<code>markdown</code>文件。</p>
-<h3>getSvgData()</h3>
+<h3>getSvgData(node)</h3>
+<p><code>node</code>: v0.9.11+, 节点实例，如果传了，那么会返回一个<code>clipData</code>对象，代表从完整的图片中裁剪出该节点区域的位置坐标数据；</p>
 <p>获取<code>svg</code>数据，异步方法，返回一个对象：</p>
 <pre class="hljs"><code>{
-  node<span class="hljs-comment">// svg节点</span>
-  str<span class="hljs-comment">// svg字符串</span>
+  node,<span class="hljs-comment">// svg节点</span>
+  str,<span class="hljs-comment">// svg字符串</span>
+  clipData
 }
 </code></pre>
 <h3>xmind(name)</h3>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -354,4 +354,8 @@
        <img src="../../../../assets/avatar/在下青铜五.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>在下青铜五</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/木星二号.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>木星二号</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -309,6 +309,10 @@
        <img src="../../../../assets/avatar/在下青铜五.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>在下青铜五</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/木星二号.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>木星二号</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@@ -56,6 +56,12 @@

 ## 方法

+### deactivate()
+
+> 0.9.11+
+
+取消激活该节点。
+
 ### getAncestorNodes()

 > v0.9.9+
--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@@ -31,6 +31,11 @@
 </blockquote>
 <p>节点是否正在拖拽中</p>
 <h2>方法</h2>
+<h3>deactivate()</h3>
+<blockquote>
+<p>0.9.11+</p>
+</blockquote>
+<p>取消激活该节点。</p>
 <h3>getAncestorNodes()</h3>
 <blockquote>
 <p>v0.9.9+</p>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -484,6 +484,33 @@ copyNodeTree({}, node)

 去除指定 html 字符串中指定选择器的节点，然后返回处理后的 html 字符串。

+#### getOnfullscreEnevt()
+
+> v0.9.11+
+
+检测当前浏览器可用的全屏事件。可以这样使用：
+
+```js
+const fullscrrenEvent = getOnfullscreEnevt()
+
+// 监听全屏事件
+document.addEventListener(fullscrrenEvent, () => {
+  // 根据document.fullscreenElement是否为null判断当前是否处于全屏状态
+})
+```
+
+#### fullScreen(element)
+
+> v0.9.11+
+
+让指定的DOM元素进入全屏状态。
+
+#### exitFullScreen()
+
+> v0.9.11+
+
+退出全屏状态。
+
 ## 在 canvas 中模拟 css 的背景属性

 引入：
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -405,6 +405,28 @@
 </li>
 </ul>
 <p>去除指定 html 字符串中指定选择器的节点，然后返回处理后的 html 字符串。</p>
+<h4>getOnfullscreEnevt()</h4>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>检测当前浏览器可用的全屏事件。可以这样使用：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> fullscrrenEvent = getOnfullscreEnevt()
+
+<span class="hljs-comment">// 监听全屏事件</span>
+<span class="hljs-built_in">document</span>.addEventListener(fullscrrenEvent, <span class="hljs-function">() =&gt;</span> {
+  <span class="hljs-comment">// 根据document.fullscreenElement是否为null判断当前是否处于全屏状态</span>
+})
+</code></pre>
+<h4>fullScreen(element)</h4>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>让指定的DOM元素进入全屏状态。</p>
+<h4>exitFullScreen()</h4>
+<blockquote>
+<p>v0.9.11+</p>
+</blockquote>
+<p>退出全屏状态。</p>
 <h2>在 canvas 中模拟 css 的背景属性</h2>
 <p>引入：</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>