更新文档

2026-02-21 18:37:43 +08:00 · 2023-04-02 21:08:55 +08:00 · 2023-04-02 21:08:55 +08:00 · cd3baf411b
commit cd3baf411b
parent 042911371c
21 changed files with 203 additions and 106 deletions
--- a/README.md
+++ b/README.md
@ -15,6 +15,7 @@ Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-ma

 # 特性

+- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
 - [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
 - [x] 内置多种主题，允许高度自定义样式，支持注册新主题
 - [x] 支持快捷键
@ -24,8 +25,8 @@ Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-ma
 - [x] 支持右键和Ctrl+左键两种多选方式
 - [x] 支持节点自由拖拽、拖拽调整
 - [x] 支持多种节点形状
- [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
- [x] 支持小地图
+- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`，支持从`json`、`xmind`、`markdown`导入
+- [x] 支持小地图、支持水印
 - [x] 支持关联线

 # 安装
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@ -2,6 +2,22 @@

 ## 0.5.0

+This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.
+
+New: 1.Support custom expansion and collapse node icons and colors;
+
+optimization: 1.Optimize rendering logic, set the theme, move forward and backward, and other operations no longer require full rendering;
+
+     2.Optimize node drag logic, and fix the problem of being unable to drag between two nodes;
+
+     3.Collapse all nodes adds logic to return to the center point;
+
+     4.Fix the problem of nodes flying and scrambling caused by triggering rendering multiple times in a short time;
+
+     5.Optimize the experience of node editing;
+
+Fix: 1.Fix the issue where the setData method does not trigger history;
+
 modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:

 ```js
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@ -2,6 +2,18 @@
  <div>
    <h1>Changelog</h1>
 <h2>0.5.0</h2>
+<p>This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.</p>
+<p>New: 1.Support custom expansion and collapse node icons and colors;</p>
+<p>optimization: 1.Optimize rendering logic, set the theme, move forward and backward, and other operations no longer require full rendering;</p>
+<pre><code> 2.Optimize node drag logic, and fix the problem of being unable to drag between two nodes;
+
+ 3.Collapse all nodes adds logic to return to the center point;
+
+ 4.Fix the problem of nodes flying and scrambling caused by triggering rendering multiple times in a short time;
+
+ 5.Optimize the experience of node editing;
+</code></pre>
+<p>Fix: 1.Fix the issue where the setData method does not trigger history;</p>
 <p>modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:</p>
 <pre class="hljs"><code>[
  <span class="hljs-string">&#x27;fillColor&#x27;</span>,
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@ -46,6 +46,8 @@ const mindMap = new MindMap({
 | mousewheelMoveStep（v0.4.3+）     | Number  | 100 | When the `mousewheelAction` is set to `move`, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is `px`  |          |
 | defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | Text of the default inserted secondary node               |          |
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | Text for nodes below the second level inserted by default               |          |
+| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | Expand the color of the stow button  |          |
+| expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon  |          |

 ### Watermark config

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@ -182,6 +182,20 @@
 <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' }</td>
+<td>Expand the color of the stow button</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>
 </tbody>
 </table>
 <h3>Watermark config</h3>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@ -1,6 +1,6 @@
 # Introduction

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

 ## Features

@ -16,15 +16,15 @@
 - [x] Supports right-click and Ctrl + left-click to select multiple items
 - [x] Supports free dragging and dragging to adjust nodes
 - [x] Supports various node shapes
- [x] Supports export to json, png, svg, pdf, and import from json, xmind
+- [x] Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown
 - [x] Supports mini map、support watermark
 - [x] Supports associative lines

-## Table of Contents
+## Repository Catalog Introduction

 1.`simple-mind-map`

-This is a mind map tool library that is framework-agnostic and can be used with
+This is a mind map library that is framework-agnostic and can be used with
 frameworks such as Vue and React, or without a framework.

 2.`web`
@ -63,9 +63,11 @@ The folder containing the packaged resources for the `web` folder.

 ## Special Note

-This project is rough and has not been thoroughly tested, its features are not
-yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
-learning and reference purposes and please use it carefully for actual projects.
+This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.
+
+This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself.
+
+If you have suggestions or find bugs, you can submit [issues](https://github.com/wanglin2/mind-map/issues) here.

 The built-in themes and icons in the project come from:

--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@ -1,43 +1,43 @@
 <template>
  <div>
    <h1>Introduction</h1>
-<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework.</p>
+<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.</p>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox36" checked="true"><label for="checkbox36">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
-<li><input type="checkbox" id="checkbox37" checked="true"><label for="checkbox37">Supports four types of structures: logical structure diagrams, mind maps,</label>
+<li><input type="checkbox" id="checkbox216" checked="true"><label for="checkbox216">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
+<li><input type="checkbox" id="checkbox217" checked="true"><label for="checkbox217">Supports four types of structures: logical structure diagrams, mind maps,</label>
 organizational structure diagrams, and directory organization diagrams</li>
-<li><input type="checkbox" id="checkbox38" checked="true"><label for="checkbox38">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
-<li><input type="checkbox" id="checkbox39" checked="true"><label for="checkbox39">Supports shortcuts</label></li>
-<li><input type="checkbox" id="checkbox40" checked="true"><label for="checkbox40">Node content supports images, icons, hyperlinks, notes, tags, and</label>
+<li><input type="checkbox" id="checkbox218" checked="true"><label for="checkbox218">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
+<li><input type="checkbox" id="checkbox219" checked="true"><label for="checkbox219">Supports shortcuts</label></li>
+<li><input type="checkbox" id="checkbox220" checked="true"><label for="checkbox220">Node content supports images, icons, hyperlinks, notes, tags, and</label>
 summaries</li>
-<li><input type="checkbox" id="checkbox41" checked="true"><label for="checkbox41">Supports forward and backward navigation</label></li>
-<li><input type="checkbox" id="checkbox42" checked="true"><label for="checkbox42">Supports dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox43" checked="true"><label for="checkbox43">Supports right-click and Ctrl + left-click to select multiple items</label></li>
-<li><input type="checkbox" id="checkbox44" checked="true"><label for="checkbox44">Supports free dragging and dragging to adjust nodes</label></li>
-<li><input type="checkbox" id="checkbox45" checked="true"><label for="checkbox45">Supports various node shapes</label></li>
-<li><input type="checkbox" id="checkbox46" checked="true"><label for="checkbox46">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
-<li><input type="checkbox" id="checkbox47" checked="true"><label for="checkbox47">Supports mini map、support watermark</label></li>
-<li><input type="checkbox" id="checkbox48" checked="true"><label for="checkbox48">Supports associative lines</label></li>
+<li><input type="checkbox" id="checkbox221" checked="true"><label for="checkbox221">Supports forward and backward navigation</label></li>
+<li><input type="checkbox" id="checkbox222" checked="true"><label for="checkbox222">Supports dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox223" checked="true"><label for="checkbox223">Supports right-click and Ctrl + left-click to select multiple items</label></li>
+<li><input type="checkbox" id="checkbox224" checked="true"><label for="checkbox224">Supports free dragging and dragging to adjust nodes</label></li>
+<li><input type="checkbox" id="checkbox225" checked="true"><label for="checkbox225">Supports various node shapes</label></li>
+<li><input type="checkbox" id="checkbox226" checked="true"><label for="checkbox226">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
+<li><input type="checkbox" id="checkbox227" checked="true"><label for="checkbox227">Supports mini map、support watermark</label></li>
+<li><input type="checkbox" id="checkbox228" checked="true"><label for="checkbox228">Supports associative lines</label></li>
 </ul>
-<h2>Table of Contents</h2>
+<h2>Repository Catalog Introduction</h2>
 <p>1.<code>simple-mind-map</code></p>
-<p>This is a mind map tool library that is framework-agnostic and can be used with
+<p>This is a mind map library that is framework-agnostic and can be used with
 frameworks such as Vue and React, or without a framework.</p>
 <p>2.<code>web</code></p>
 <p>This is an online mind map built using the <code>simple-mind-map</code> library and based
 on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
 <ul>
-<li><input type="checkbox" id="checkbox49" checked="true"><label for="checkbox49">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+<li><input type="checkbox" id="checkbox229" checked="true"><label for="checkbox229">Toolbar, which supports inserting and deleting nodes, and editing node</label>
 images, icons, hyperlinks, notes, tags, and summaries</li>
-<li><input type="checkbox" id="checkbox50" checked="true"><label for="checkbox50">Sidebar, with panels for basic style settings, node style settings,</label>
+<li><input type="checkbox" id="checkbox230" checked="true"><label for="checkbox230">Sidebar, with panels for basic style settings, node style settings,</label>
 outline, theme selection, and structure selection</li>
-<li><input type="checkbox" id="checkbox51" checked="true"><label for="checkbox51">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox231" checked="true"><label for="checkbox231">Import and export functionality; data is saved in the browser's local</label>
 storage by default, but it also supports creating, opening, and editing
 local files on the computer directly</li>
-<li><input type="checkbox" id="checkbox52" checked="true"><label for="checkbox52">Right-click menu, which supports operations such as expanding, collapsing,</label>
+<li><input type="checkbox" id="checkbox232" checked="true"><label for="checkbox232">Right-click menu, which supports operations such as expanding, collapsing,</label>
 and organizing layout</li>
-<li><input type="checkbox" id="checkbox53" checked="true"><label for="checkbox53">Bottom bar, which supports node and word count statistics, switching</label>
+<li><input type="checkbox" id="checkbox233" checked="true"><label for="checkbox233">Bottom bar, which supports node and word count statistics, switching</label>
 between edit and read-only modes, zooming in and out, and switching to
 full screen, support mini map</li>
 </ul>
@ -50,9 +50,9 @@ full screen, support mini map</li>
 <p><a href="https://juejin.cn/post/7199666255883927612">When you press the direction key, how does the TV find the next focus</a></p>
 <p><a href="https://juejin.cn/post/7204854015463538744">How to simulate the background image style of css in canvas</a></p>
 <h2>Special Note</h2>
-<p>This project is rough and has not been thoroughly tested, its features are not
-yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
-learning and reference purposes and please use it carefully for actual projects.</p>
+<p>This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.</p>
+<p>This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself.</p>
+<p>If you have suggestions or find bugs, you can submit <a href="https://github.com/wanglin2/mind-map/issues">issues</a> here.</p>
 <p>The built-in themes and icons in the project come from:</p>
 <p><a href="https://naotu.baidu.com/">Baidu Mind Map</a></p>
 <p><a href="https://www.zhixi.com/">Zhixi Mind Map</a></p>
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@ -56,25 +56,13 @@ Whether the node is currently being dragged

 ## Methods

-### addChildren(node)
-
-Add a child node
-
 ### getSize()

-Calculate the width and height of the node, return a boolean indicating whether
-the width and height have changed
-
-### renderNode()
-
-Render the node to the canvas, will remove the old content node and create a new
-one
+Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed

 ### render()

-Recursively render this node and all its child nodes. The first call will create
-the node content, subsequent calls will only update the node position. To
-re-render the content, set the `initRender` attribute to `true` first.
+Recursively render this node and all its child nodes

 ### updateNodeShape()

@ -84,7 +72,13 @@ Update node shape nodes. For example, when the node status changes, call this me

 ### remove()

-Recursively delete this node and all its child nodes
+Recursive deletion, which is only deleted from the canvas. The node container is still present, and can be reinserted back into the canvas in the future
+
+### destroy()
+
+> v0.5.0+
+
+Destroying a node will not only delete it from the canvas, but also directly empty the original node, which cannot be inserted back into the canvas in the future

 ### renderLine()

--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@ -31,25 +31,22 @@
 </blockquote>
 <p>Whether the node is currently being dragged</p>
 <h2>Methods</h2>
-<h3>addChildren(node)</h3>
-<p>Add a child node</p>
 <h3>getSize()</h3>
-<p>Calculate the width and height of the node, return a boolean indicating whether
-the width and height have changed</p>
-<h3>renderNode()</h3>
-<p>Render the node to the canvas, will remove the old content node and create a new
-one</p>
+<p>Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed</p>
 <h3>render()</h3>
-<p>Recursively render this node and all its child nodes. The first call will create
-the node content, subsequent calls will only update the node position. To
-re-render the content, set the <code>initRender</code> attribute to <code>true</code> first.</p>
+<p>Recursively render this node and all its child nodes</p>
 <h3>updateNodeShape()</h3>
 <blockquote>
 <p>v0.5.0+</p>
 </blockquote>
 <p>Update node shape nodes. For example, when the node status changes, call this method to display or deactivate the style.</p>
 <h3>remove()</h3>
-<p>Recursively delete this node and all its child nodes</p>
+<p>Recursive deletion, which is only deleted from the canvas. The node container is still present, and can be reinserted back into the canvas in the future</p>
+<h3>destroy()</h3>
+<blockquote>
+<p>v0.5.0+</p>
+</blockquote>
+<p>Destroying a node will not only delete it from the canvas, but also directly empty the original node, which cannot be inserted back into the canvas in the future</p>
 <h3>renderLine()</h3>
 <p>Re-render the line from this node to its child nodes</p>
 <h3>removeLine()</h3>
--- a/web/src/pages/Doc/en/start/index.md
+++ b/web/src/pages/Doc/en/start/index.md
@ -81,6 +81,8 @@ npm i simple-mind-map

 ## Usage

+> The `web` directory of this repository provides a complete project based on `Vue2`. If you encounter any doubts about using it, you can refer to the implementation of this project.
+
 ```html
 <div id="mindMapContainer"></div>
 ```
--- a/web/src/pages/Doc/en/start/index.vue
+++ b/web/src/pages/Doc/en/start/index.vue
@ -57,6 +57,9 @@ compile this dependency:</p>
 <p>Other projects should modify the packaging configuration as needed.</p>
 </blockquote>
 <h2>Usage</h2>
+<blockquote>
+<p>The <code>web</code> directory of this repository provides a complete project based on <code>Vue2</code>. If you encounter any doubts about using it, you can refer to the implementation of this project.</p>
+</blockquote>
 <pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</span>;
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@ -2,6 +2,22 @@

 ## 0.5.0

+这个版本主要是代码层面的改动和优化，核心是为了提升渲染性能，减少卡顿问题。
+
+新增：1.支持自定义展开收起节点图标和颜色；
+
+优化：1.优化渲染逻辑，设置主题、前进回退等操作不再全量渲染；
+
+     2.优化节点拖拽逻辑，修复无法拖动到两个节点之间的问题；
+
+     3.收起全部节点操作增加回到中心点的逻辑；
+
+     4.修复短时间多次触发渲染造成节点乱飞和错乱的问题；
+
+     5.优化节点编辑的体验；
+
+修复：1.修复setData方法不触发历史记录的问题；
+
 修改：从0.5.0版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：

 ```js
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@ -2,6 +2,18 @@
  <div>
    <h1>Changelog</h1>
 <h2>0.5.0</h2>
+<p>这个版本主要是代码层面的改动和优化，核心是为了提升渲染性能，减少卡顿问题。</p>
+<p>新增：1.支持自定义展开收起节点图标和颜色；</p>
+<p>优化：1.优化渲染逻辑，设置主题、前进回退等操作不再全量渲染；</p>
+<pre><code> 2.优化节点拖拽逻辑，修复无法拖动到两个节点之间的问题；
+
+ 3.收起全部节点操作增加回到中心点的逻辑；
+
+ 4.修复短时间多次触发渲染造成节点乱飞和错乱的问题；
+
+ 5.优化节点编辑的体验；
+</code></pre>
+<p>修复：1.修复setData方法不触发历史记录的问题；</p>
 <p>修改：从0.5.0版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：</p>
 <pre class="hljs"><code>[
  <span class="hljs-string">&#x27;fillColor&#x27;</span>,
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@ -46,6 +46,8 @@ const mindMap = new MindMap({
 | mousewheelMoveStep（v0.4.3+）     | Number  | 100 | 当`mousewheelAction`设为`move`时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位`px`               |          |
 | defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | 默认插入的二级节点的文字               |          |
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | 默认插入的二级以下节点的文字               |          |
+| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | 展开收起按钮的颜色  |          |
+| expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | 自定义展开收起按钮的图标，可以传图标的svg字符串  |          |

 ### 水印配置

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@ -182,6 +182,20 @@
 <td>默认插入的二级以下节点的文字</td>
 <td></td>
 </tr>
+<tr>
+<td>expandBtnStyle（v0.5.0+）</td>
+<td>Object</td>
+<td>{ color: '#808080', fill: '#fff' }</td>
+<td>展开收起按钮的颜色</td>
+<td></td>
+</tr>
+<tr>
+<td>expandBtnIcon（v0.5.0+）</td>
+<td>Object</td>
+<td>{ open: '', close: '' }</td>
+<td>自定义展开收起按钮的图标，可以传图标的svg字符串</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@ -1,6 +1,6 @@
 # 简介

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

 ## 特性

@ -14,19 +14,19 @@
 - [x] 支持右键和Ctrl+左键两种多选方式
 - [x] 支持节点自由拖拽、拖拽调整
 - [x] 支持多种节点形状
- [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
+- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`，支持从`json`、`xmind`、`markdown`导入
 - [x] 支持小地图、支持水印
 - [x] 支持关联线

-## 目录介绍
+## 仓库目录介绍

 1.`simple-mind-map`

-思维导图工具库，框架无关，`Vue`、`React`等框架或无框架都可以使用。
+思维导图库，框架无关，`Vue`、`React`等框架或无框架都可以使用。

 2.`web`

-使用`simple-mind-map`工具库，基于`vue2.x`、`ElementUI`搭建的在线思维导图。特性：
+使用`simple-mind-map`库，基于`vue2.x`、`ElementUI`搭建的在线思维导图。特性：

 - [x] 工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要
 - [x] 侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板
@ -52,7 +52,11 @@

 ## 特别说明

-本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，尤其当节点数量比较庞大的时候，仅用于学习和参考，请谨慎用于实际项目。
+本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。
+
+本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。
+
+如果有建议或发现了bug，可以在此提交[issues](https://github.com/wanglin2/mind-map/issues)。

 项目内置的主题和图标来自于：

--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@ -1,34 +1,34 @@
 <template>
  <div>
    <h1>简介</h1>
-<p><code>simple-mind-map</code>是一个简单&amp;强大的Web思维导图库，不依赖任何特定框架。</p>
+<p><code>simple-mind-map</code>是一个简单&amp;强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。</p>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox54" checked="true"><label for="checkbox54">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
-<li><input type="checkbox" id="checkbox55" checked="true"><label for="checkbox55">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
-<li><input type="checkbox" id="checkbox56" checked="true"><label for="checkbox56">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox57" checked="true"><label for="checkbox57">支持快捷键</label></li>
-<li><input type="checkbox" id="checkbox58" checked="true"><label for="checkbox58">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox59" checked="true"><label for="checkbox59">支持前进后退</label></li>
-<li><input type="checkbox" id="checkbox60" checked="true"><label for="checkbox60">支持拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox61" checked="true"><label for="checkbox61">支持右键和Ctrl+左键两种多选方式</label></li>
-<li><input type="checkbox" id="checkbox62" checked="true"><label for="checkbox62">支持节点自由拖拽、拖拽调整</label></li>
-<li><input type="checkbox" id="checkbox63" checked="true"><label for="checkbox63">支持多种节点形状</label></li>
-<li><input type="checkbox" id="checkbox64" checked="true"><label for="checkbox64">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>，支持从<code>json</code>、<code>xmind</code>导入</li>
-<li><input type="checkbox" id="checkbox65" checked="true"><label for="checkbox65">支持小地图、支持水印</label></li>
-<li><input type="checkbox" id="checkbox66" checked="true"><label for="checkbox66">支持关联线</label></li>
+<li><input type="checkbox" id="checkbox198" checked="true"><label for="checkbox198">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
+<li><input type="checkbox" id="checkbox199" checked="true"><label for="checkbox199">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
+<li><input type="checkbox" id="checkbox200" checked="true"><label for="checkbox200">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox201" checked="true"><label for="checkbox201">支持快捷键</label></li>
+<li><input type="checkbox" id="checkbox202" checked="true"><label for="checkbox202">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox203" checked="true"><label for="checkbox203">支持前进后退</label></li>
+<li><input type="checkbox" id="checkbox204" checked="true"><label for="checkbox204">支持拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox205" checked="true"><label for="checkbox205">支持右键和Ctrl+左键两种多选方式</label></li>
+<li><input type="checkbox" id="checkbox206" checked="true"><label for="checkbox206">支持节点自由拖拽、拖拽调整</label></li>
+<li><input type="checkbox" id="checkbox207" checked="true"><label for="checkbox207">支持多种节点形状</label></li>
+<li><input type="checkbox" id="checkbox208" checked="true"><label for="checkbox208">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox209" checked="true"><label for="checkbox209">支持小地图、支持水印</label></li>
+<li><input type="checkbox" id="checkbox210" checked="true"><label for="checkbox210">支持关联线</label></li>
 </ul>
-<h2>目录介绍</h2>
+<h2>仓库目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
-<p>思维导图工具库，框架无关，<code>Vue</code>、<code>React</code>等框架或无框架都可以使用。</p>
+<p>思维导图库，框架无关，<code>Vue</code>、<code>React</code>等框架或无框架都可以使用。</p>
 <p>2.<code>web</code></p>
-<p>使用<code>simple-mind-map</code>工具库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
+<p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox67" checked="true"><label for="checkbox67">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox68" checked="true"><label for="checkbox68">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox69" checked="true"><label for="checkbox69">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox70" checked="true"><label for="checkbox70">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox71" checked="true"><label for="checkbox71">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox211" checked="true"><label for="checkbox211">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox212" checked="true"><label for="checkbox212">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox213" checked="true"><label for="checkbox213">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox214" checked="true"><label for="checkbox214">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox215" checked="true"><label for="checkbox215">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@ -39,7 +39,9 @@
 <p><a href="https://juejin.cn/post/7199666255883927612">当你按下方向键，电视是如何寻找下一个焦点的</a></p>
 <p><a href="https://juejin.cn/post/7204854015463538744">如何在canvas中模拟css的背景图片样式</a></p>
 <h2>特别说明</h2>
-<p>本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，尤其当节点数量比较庞大的时候，仅用于学习和参考，请谨慎用于实际项目。</p>
+<p>本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。</p>
+<p>本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。</p>
+<p>如果有建议或发现了bug，可以在此提交<a href="https://github.com/wanglin2/mind-map/issues">issues</a>。</p>
 <p>项目内置的主题和图标来自于：</p>
 <p><a href="https://naotu.baidu.com/">百度脑图</a></p>
 <p><a href="https://www.zhixi.com/">知犀思维导图</a></p>
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@ -56,21 +56,13 @@

 ## 方法

-### addChildren(node)
-
-添加子节点
-
 ### getSize()

-计算节点的宽高，返回一个布尔值，代表是否宽高发生了变化
-
-### renderNode()
-
-渲染节点到画布，会移除旧的内容节点，创建新的
+通过重新创建节点内容更新节点的宽高，返回一个布尔值，代表是否宽高发生了变化

 ### render()

-递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把`initRender`属性设为`true`
+递归渲染该节点及其所有子节点

 ### updateNodeShape()

@ -80,7 +72,13 @@

 ### remove()

-递归删除该节点及其所有子节点
+递归删除，只是从画布删除，节点容器还在，后续还可以重新插回画布
+
+### destroy()
+
+> v0.5.0+
+
+销毁节点，不但会从画布删除，而且原节点直接置空，后续无法再插回画布

 ### renderLine()

--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@ -31,21 +31,22 @@
 </blockquote>
 <p>节点是否正在拖拽中</p>
 <h2>方法</h2>
-<h3>addChildren(node)</h3>
-<p>添加子节点</p>
 <h3>getSize()</h3>
-<p>计算节点的宽高，返回一个布尔值，代表是否宽高发生了变化</p>
-<h3>renderNode()</h3>
-<p>渲染节点到画布，会移除旧的内容节点，创建新的</p>
+<p>通过重新创建节点内容更新节点的宽高，返回一个布尔值，代表是否宽高发生了变化</p>
 <h3>render()</h3>
-<p>递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把<code>initRender</code>属性设为<code>true</code></p>
+<p>递归渲染该节点及其所有子节点</p>
 <h3>updateNodeShape()</h3>
 <blockquote>
 <p>v0.5.0+</p>
 </blockquote>
 <p>更新节点形状节点。比如当节点状态改变后，调用该方法显示或取消激活样式。</p>
 <h3>remove()</h3>
-<p>递归删除该节点及其所有子节点</p>
+<p>递归删除，只是从画布删除，节点容器还在，后续还可以重新插回画布</p>
+<h3>destroy()</h3>
+<blockquote>
+<p>v0.5.0+</p>
+</blockquote>
+<p>销毁节点，不但会从画布删除，而且原节点直接置空，后续无法再插回画布</p>
 <h3>renderLine()</h3>
 <p>重新渲染该节点到其子节点之间的连线</p>
 <h3>removeLine()</h3>
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@ -72,6 +72,8 @@ npm i simple-mind-map

 ## 使用

+> 本仓库的`web`目录提供了一个基于`Vue2`的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
+
 ```html
 <div id="mindMapContainer"></div>
 ```
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@ -47,6 +47,9 @@ npm run build
 <p>其他项目请自行修改打包配置。</p>
 </blockquote>
 <h2>使用</h2>
+<blockquote>
+<p>本仓库的<code>web</code>目录提供了一个基于<code>Vue2</code>的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。</p>
+</blockquote>
 <pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</span>;