Doc: update

2026-02-21 10:27:44 +08:00 · 2024-01-22 19:53:38 +08:00 · 2024-01-22 19:53:38 +08:00 · 70c6a26de0
commit 70c6a26de0
parent 8241bcbbb4
16 changed files with 482 additions and 3 deletions
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.9.4",
+  "version": "0.9.5",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/web/src/assets/img/docs/手绘风格.png
+++ b/web/src/assets/img/docs/手绘风格.png
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@ -38,6 +38,7 @@ let APIList = [
  'scrollbar',
  'formula',
  'cooperate',
+  'handDrawnLikeStyle',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@ -1,5 +1,27 @@
 # Changelog

+## 0.9.5
+
+Fix:
+
+> 1.Fix the issue of missing inter zone summaries when expanding and folding nodes.
+>
+> 2.Fix the issue where the position of the newly created associated line is always on the right side of the node without changing according to its relative position.
+
+New:
+
+> 1.Add configuration for the initial positions of the two endpoints when creating associated lines.
+>
+> 2.Add a configuration that prohibits adjusting the endpoint position of associated lines.
+>
+> 3.Add a hand drawn style plugin.
+
+Demo:
+
+> 1.Optimize interface adaptation on mobile devices.
+>
+> 2.Supports enabling hand drawn styles.
+
 ## 0.9.4

 Fix:
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@ -1,6 +1,23 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.5</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of missing inter zone summaries when expanding and folding nodes.</p>
+<p>2.Fix the issue where the position of the newly created associated line is always on the right side of the node without changing according to its relative position.</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Add configuration for the initial positions of the two endpoints when creating associated lines.</p>
+<p>2.Add a configuration that prohibits adjusting the endpoint position of associated lines.</p>
+<p>3.Add a hand drawn style plugin.</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Optimize interface adaptation on mobile devices.</p>
+<p>2.Supports enabling hand drawn styles.</p>
+</blockquote>
 <h2>0.9.4</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@ -106,8 +106,11 @@ const mindMap = new MindMap({
 | createNewNodeBehavior（v0.9.1+）     | String | default  | Behavior when creating a new node. default（By default, newly created nodes will be activated and enter editing mode. If multiple new nodes are created simultaneously, they will only be activated and will not enter editing mode）、notActive（Do not activate newly created nodes）、activeOnly（Only activate newly created nodes and do not enter editing mode）  |         |
 | defaultNodeImage（v0.9.1-fix.2+）     | String |   | Image address, the default image displayed when node image loading fails  |         |
 | handleNodePasteImg（v0.9.2+）     | null or Function | null  | The processing method for pasting images from the clipboard on a node is to convert them into data:URL data and insert them into the node by default. You can use this method to upload image data to the server and save the URL of the image. An asynchronous method can be passed to receive image data of Blob type, and the specified structure needs to be returned: { url, size: {width, height} }  |         |
-| isLimitMindMapInCanvas（v0.9.2+）     | Boolean |  false | Whether to limit the mind map within the canvas. For example, when dragging to the right, the leftmost part of the mind map graphic will not be able to continue dragging to the right when it reaches the center of the canvas, and the same applies to other things |
-| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+）     | Boolean |  true | When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work |
+| isLimitMindMapInCanvas（v0.9.2+）     | Boolean |  false | Whether to limit the mind map within the canvas. For example, when dragging to the right, the leftmost part of the mind map graphic will not be able to continue dragging to the right when it reaches the center of the canvas, and the same applies to other things |         |
+| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+）     | Boolean |  true | When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work |         |
+| associativeLineInitPointsPosition（v0.9.5+）     | null / { from, to } | { from: '', to: '' }  | By default, the position of the two endpoints of a newly created association line is calculated based on the relative position of the center points of the two nodes. If you want to fix the position, you can configure it through this option. If neither from nor to is transmitted, they will be automatically calculated. If only one is transmitted, the other will be automatically calculated. from and to optional values
+：left、top、bottom、right |         |
+| enableAdjustAssociativeLinePoints（v0.9.5+）     | Boolean | true  | Is it allowed to adjust the position of the two endpoints of the associated line |

 ### Data structure

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@ -616,6 +616,27 @@
 <td>When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work</td>
 <td></td>
 </tr>
+<tr>
+<td>associativeLineInitPointsPosition（v0.9.5+）</td>
+<td>null / { from, to }</td>
+<td>{ from: '', to: '' }</td>
+<td>By default, the position of the two endpoints of a newly created association line is calculated based on the relative position of the center points of the two nodes. If you want to fix the position, you can configure it through this option. If neither from nor to is transmitted, they will be automatically calculated. If only one is transmitted, the other will be automatically calculated. from and to optional values</td>
+<td></td>
+</tr>
+<tr>
+<td>：left、top、bottom、right</td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+</tr>
+<tr>
+<td>enableAdjustAssociativeLinePoints（v0.9.5+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Is it allowed to adjust the position of the two endpoints of the associated line</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Data structure</h3>
--- a/web/src/pages/Doc/en/handDrawnLikeStyle/index.md
+++ b/web/src/pages/Doc/en/handDrawnLikeStyle/index.md
@ -0,0 +1,102 @@
+# HandDrawnLikeStyle chargeable plugin
+
+> Regarding fees
+>
+> Mind map is an open-source project under the MIT protocol. In theory, as long as the copyright statement of mind map is retained, there is no charge for commercial use, and this protocol will not be changed in the future. Moreover, neither the online version nor the client will consider charging. However, in order to ensure the sustainable development of the project, revenue will be obtained through various means, such as existing sponsorship methods. The second approach is to use paid plugins, with the basic principle that basic functions, core functions, and necessary functions are not charged, while optional additional functions may be charged.
+>
+> Finally, the fee is only applicable to developers. If it is only the online version or client version of the mind map, users do not need to pay, and all functions can be used for free.
+
+HandDrawnLikeStyle is the first paid plugin that provides a hand drawn style, where the connections and shapes of nodes become hand drawn, just like the following:
+
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+
+You can also try to turn on the hand drawn style in the online version through the settings of 【 Basic Style 】 - 【 Enable Hand drawn Style 】.
+
+The internal implementation is through the [rough](https://github.com/rough-stuff/rough) library, so if you have the energy, you can also implement this plugin based on this library yourself.
+
+## Charge
+
+At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address, and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.
+
+Price:
+
+1.￥ 19.9, Only includes the packaged files, which are in two formats: .cjs.min.js and .esm.min.js.
+
+2.￥ 29.9, including unpackaged source code and packaged files.
+
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+
+## Register
+
+1.Referencing packaged files:
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'handDrawnLikeStyle.cjs.min.js'
+// or import HandDrawnLikeStyle from 'handDrawnLikeStyle.esm.min.js'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+2.Referencing Unpackaged Source Code
+
+You can first enter the plugin directory to execute:
+
+```bash
+npm link
+```
+
+Then enter your project root directory to execute:
+
+```bash
+npm link simple-mind-map-plugin-handdrawnlikestyle
+```
+
+Then you can directly import it for use:
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'simple-mind-map-plugin-handdrawnlikestyle'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.handDrawnLikeStyle`.
+
+After registering the plugin, there is no need to perform other methods and the hand drawn style can take effect.
+
+If you are using the mindMap.addPlugin method to dynamically register a component, you need to call the method of re rendering once:
+
+```js
+mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+```
+
+## Methods
+
+You may not be familiar with the following methods.
+
+### createPath(svgPathStr)
+
+- `svgPathStr`：SVG Path string
+
+Create a hand drawn style path node and return the path node of SVG.
+
+### createPolygon(points)
+
+- `points`：Points array
+
+```js
+points：[
+    [x1, y1],
+    ...
+]
+```
+
+Create a hand drawn polygon node and return the Path node of SVG.
+
+### transformPath(svgPathStr)
+
+Convert SVG Path strings to hand drawn SVG Path strings.
--- a/web/src/pages/Doc/en/handDrawnLikeStyle/index.vue
+++ b/web/src/pages/Doc/en/handDrawnLikeStyle/index.vue
@ -0,0 +1,78 @@
+<template>
+  <div>
+    <h1>HandDrawnLikeStyle chargeable plugin</h1>
+<blockquote>
+<p>Regarding fees</p>
+<p>Mind map is an open-source project under the MIT protocol. In theory, as long as the copyright statement of mind map is retained, there is no charge for commercial use, and this protocol will not be changed in the future. Moreover, neither the online version nor the client will consider charging. However, in order to ensure the sustainable development of the project, revenue will be obtained through various means, such as existing sponsorship methods. The second approach is to use paid plugins, with the basic principle that basic functions, core functions, and necessary functions are not charged, while optional additional functions may be charged.</p>
+<p>Finally, the fee is only applicable to developers. If it is only the online version or client version of the mind map, users do not need to pay, and all functions can be used for free.</p>
+</blockquote>
+<p>HandDrawnLikeStyle is the first paid plugin that provides a hand drawn style, where the connections and shapes of nodes become hand drawn, just like the following:</p>
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+<p>You can also try to turn on the hand drawn style in the online version through the settings of 【 Basic Style 】 - 【 Enable Hand drawn Style 】.</p>
+<p>The internal implementation is through the <a href="https://github.com/rough-stuff/rough">rough</a> library, so if you have the energy, you can also implement this plugin based on this library yourself.</p>
+<h2>Charge</h2>
+<p>At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address, and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.</p>
+<p>Price:</p>
+<p>1.￥ 19.9, Only includes the packaged files, which are in two formats: .cjs.min.js and .esm.min.js.</p>
+<p>2.￥ 29.9, including unpackaged source code and packaged files.</p>
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<h2>Register</h2>
+<p>1.Referencing packaged files:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;handDrawnLikeStyle.cjs.min.js&#x27;</span>
+<span class="hljs-comment">// or import HandDrawnLikeStyle from &#x27;handDrawnLikeStyle.esm.min.js&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>2.Referencing Unpackaged Source Code</p>
+<p>You can first enter the plugin directory to execute:</p>
+<pre class="hljs"><code>npm link
+</code></pre>
+<p>Then enter your project root directory to execute:</p>
+<pre class="hljs"><code>npm link simple-mind-map-plugin-handdrawnlikestyle
+</code></pre>
+<p>Then you can directly import it for use:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map-plugin-handdrawnlikestyle&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.handDrawnLikeStyle</code>.</p>
+<p>After registering the plugin, there is no need to perform other methods and the hand drawn style can take effect.</p>
+<p>If you are using the mindMap.addPlugin method to dynamically register a component, you need to call the method of re rendering once:</p>
+<pre class="hljs"><code>mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+</code></pre>
+<h2>Methods</h2>
+<p>You may not be familiar with the following methods.</p>
+<h3>createPath(svgPathStr)</h3>
+<ul>
+<li><code>svgPathStr</code>：SVG Path string</li>
+</ul>
+<p>Create a hand drawn style path node and return the path node of SVG.</p>
+<h3>createPolygon(points)</h3>
+<ul>
+<li><code>points</code>：Points array</li>
+</ul>
+<pre class="hljs"><code>points：[
+    [x1, y1],
+    ...
+]
+</code></pre>
+<p>Create a hand drawn polygon node and return the Path node of SVG.</p>
+<h3>transformPath(svgPathStr)</h3>
+<p>Convert SVG Path strings to hand drawn SVG Path strings.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@ -60,6 +60,7 @@ export default [
      { path: 'scrollbar', title: 'Scrollbar插件' },
      { path: 'formula', title: 'Formula插件' },
      { path: 'cooperate', title: 'Cooperate插件' },
+      { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' },
      { path: 'help1', title: '概要/关联线' },
      { path: 'help2', title: '客户端' },
      { path: 'help3', title: '打开预览在线文件' },
@ -101,6 +102,7 @@ export default [
      { path: 'scrollbar', title: 'Scrollbar plugin' },
      { path: 'formula', title: 'Formula plugin' },
      { path: 'cooperate', title: 'Cooperate 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,27 @@
 # Changelog

+## 0.9.5
+
+修复：
+
+> 1.修复展开收起节点时区间概要会丢失的问题。
+>
+> 2.修复新创建的关联线位置始终在节点的右侧没有根据相对位置变化的问题。
+
+新增：
+
+> 1.增加设置关联线创建时两个端点初始位置的配置。
+>
+> 2.增加禁止调整关联线端点位置的配置。
+>
+> 3.新增手绘风格插件。
+
+Demo：
+
+> 1.优化界面在移动端的适配。
+>
+> 2.支持开启手绘风格。
+
 ## 0.9.4

 修复：
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@ -1,6 +1,23 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.5</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复展开收起节点时区间概要会丢失的问题。</p>
+<p>2.修复新创建的关联线位置始终在节点的右侧没有根据相对位置变化的问题。</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.增加设置关联线创建时两个端点初始位置的配置。</p>
+<p>2.增加禁止调整关联线端点位置的配置。</p>
+<p>3.新增手绘风格插件。</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.优化界面在移动端的适配。</p>
+<p>2.支持开启手绘风格。</p>
+</blockquote>
 <h2>0.9.4</h2>
 <p>修复：</p>
 <blockquote>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@ -108,6 +108,8 @@ const mindMap = new MindMap({
 | handleNodePasteImg（v0.9.2+）     | null 或 Function | null  | 在节点上粘贴剪贴板中的图片的处理方法，默认是转换为data:url数据插入到节点中，你可以通过该方法来将图片数据上传到服务器，实现保存图片的url。可以传递一个异步方法，接收Blob类型的图片数据，需要返回指定结构：{ url, size: {width, height} }  |
 | isLimitMindMapInCanvas（v0.9.2+）     | Boolean |  false | 是否将思维导图限制在画布内。比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理 |
 | isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+）     | Boolean |  true | 当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas配置不再起作用 |
+| associativeLineInitPointsPosition（v0.9.5+）     | null / { from, to } | { from: '', to: '' }  | 默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个选项来配置。from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算。from和to可选值：left、top、bottom、right |
+| enableAdjustAssociativeLinePoints（v0.9.5+）     | Boolean | true  | 是否允许调整关联线两个端点的位置 |

 ### 数据结构

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@ -531,6 +531,18 @@
 <td>true</td>
 <td>当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas配置不再起作用</td>
 </tr>
+<tr>
+<td>associativeLineInitPointsPosition（v0.9.5+）</td>
+<td>null / { from, to }</td>
+<td>{ from: '', to: '' }</td>
+<td>默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个选项来配置。from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算。from和to可选值：left、top、bottom、right</td>
+</tr>
+<tr>
+<td>enableAdjustAssociativeLinePoints（v0.9.5+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否允许调整关联线两个端点的位置</td>
+</tr>
 </tbody>
 </table>
 <h3>数据结构</h3>
--- a/web/src/pages/Doc/zh/handDrawnLikeStyle/index.md
+++ b/web/src/pages/Doc/zh/handDrawnLikeStyle/index.md
@ -0,0 +1,102 @@
+# HandDrawnLikeStyle 收费插件
+
+> 关于收费
+>
+> mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。
+>
+> 最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。
+
+HandDrawnLikeStyle 是第一个收费插件，功能是提供手绘风格的样式，也就是节点的连线、形状会变成手绘的样式，就像下面这样：
+
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+
+你也可以在在线版中通过【基础样式】-【是否开启手绘风格】设置来开启手绘风格样式进行尝试。
+
+内部实现是通过[rough](https://github.com/rough-stuff/rough)库，所以如果你有精力，也可以自己基于这个库来实现这个插件。
+
+## 收费
+
+现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
+
+价格：
+
+1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。
+
+2.￥ 29.9，包含未打包的源码和打包后的文件。
+
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+
+## 注册
+
+1.引用打包后的文件：
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'handDrawnLikeStyle.cjs.min.js'
+// 或 import HandDrawnLikeStyle from 'handDrawnLikeStyle.esm.min.js'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+2.引用未打包的源码
+
+可以先进入到插件目录执行：
+
+```bash
+npm link
+```
+
+然后进入到你的项目根目录执行：
+
+```bash
+npm link simple-mind-map-plugin-handdrawnlikestyle
+```
+
+然后就可以直接导入进行使用：
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'simple-mind-map-plugin-handdrawnlikestyle'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.handDrawnLikeStyle`获取到该实例。
+
+注册该插件后，无需执行其他方法，手绘风格即可生效。
+
+如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：
+
+```js
+mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+```
+
+## 方法
+
+以下方法你应该不太会用到。
+
+### createPath(svgPathStr)
+
+- `svgPathStr`：SVG Path字符串
+
+创建一个手绘风格的路径节点，返回SVG的Path节点。
+
+### createPolygon(points)
+
+- `points`：点位数组。
+
+```js
+points：[
+    [x1, y1],
+    ...
+]
+```
+
+创建一个手绘风格的多边形节点，返回SVG的Path节点。
+
+### transformPath(svgPathStr)
+
+将SVG Path字符串转换成手绘风格的SVG Path字符串。
--- a/web/src/pages/Doc/zh/handDrawnLikeStyle/index.vue
+++ b/web/src/pages/Doc/zh/handDrawnLikeStyle/index.vue
@ -0,0 +1,78 @@
+<template>
+  <div>
+    <h1>HandDrawnLikeStyle 收费插件</h1>
+<blockquote>
+<p>关于收费</p>
+<p>mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。</p>
+<p>最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。</p>
+</blockquote>
+<p>HandDrawnLikeStyle 是第一个收费插件，功能是提供手绘风格的样式，也就是节点的连线、形状会变成手绘的样式，就像下面这样：</p>
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+<p>你也可以在在线版中通过【基础样式】-【是否开启手绘风格】设置来开启手绘风格样式进行尝试。</p>
+<p>内部实现是通过<a href="https://github.com/rough-stuff/rough">rough</a>库，所以如果你有精力，也可以自己基于这个库来实现这个插件。</p>
+<h2>收费</h2>
+<p>现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。</p>
+<p>价格：</p>
+<p>1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。</p>
+<p>2.￥ 29.9，包含未打包的源码和打包后的文件。</p>
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<h2>注册</h2>
+<p>1.引用打包后的文件：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;handDrawnLikeStyle.cjs.min.js&#x27;</span>
+<span class="hljs-comment">// 或 import HandDrawnLikeStyle from &#x27;handDrawnLikeStyle.esm.min.js&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>2.引用未打包的源码</p>
+<p>可以先进入到插件目录执行：</p>
+<pre class="hljs"><code>npm link
+</code></pre>
+<p>然后进入到你的项目根目录执行：</p>
+<pre class="hljs"><code>npm link simple-mind-map-plugin-handdrawnlikestyle
+</code></pre>
+<p>然后就可以直接导入进行使用：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map-plugin-handdrawnlikestyle&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.handDrawnLikeStyle</code>获取到该实例。</p>
+<p>注册该插件后，无需执行其他方法，手绘风格即可生效。</p>
+<p>如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：</p>
+<pre class="hljs"><code>mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+</code></pre>
+<h2>方法</h2>
+<p>以下方法你应该不太会用到。</p>
+<h3>createPath(svgPathStr)</h3>
+<ul>
+<li><code>svgPathStr</code>：SVG Path字符串</li>
+</ul>
+<p>创建一个手绘风格的路径节点，返回SVG的Path节点。</p>
+<h3>createPolygon(points)</h3>
+<ul>
+<li><code>points</code>：点位数组。</li>
+</ul>
+<pre class="hljs"><code>points：[
+    [x1, y1],
+    ...
+]
+</code></pre>
+<p>创建一个手绘风格的多边形节点，返回SVG的Path节点。</p>
+<h3>transformPath(svgPathStr)</h3>
+<p>将SVG Path字符串转换成手绘风格的SVG Path字符串。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>