diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 77dbf96367f..540e0b9a76a 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -48,7 +48,7 @@
     <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="9.1.0" />
     <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.4" />
     <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
-    <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.0" />
+    <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.1" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfReader" Version="9.0.0" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor
index e9188456204..72b7cd48788 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor
@@ -1,6 +1,10 @@
 @page "/mind-map"
 @inject IStringLocalizer<MindMaps> Localizer
 
+<HeadContent>
+    <script src="./Components/Samples/MindMaps.razor.js"></script>
+</HeadContent>
+
 <h3>@Localizer["MindMapTitle"]</h3>
 
 <h4>@Localizer["MindMapDescription"]</h4>
@@ -11,34 +15,45 @@
     <section ignore>
         <div class="row g-3 form-inline">
             <div class="col-12 col-sm-6">
-                <Select @bind-Value="_options.Layout" ShowLabel="true" DisplayText="@Localizer["MindMapLayout"]"></Select>
+                <Select @bind-Value="_layout" ShowLabel="true" DisplayText="@Localizer["MindMapLayout"]"></Select>
             </div>
             <div class="col-12 col-sm-6">
-                <Select @bind-Value="_options.Theme" ShowLabel="true" DisplayText="@Localizer["MindMapTheme"]"></Select>
+                <Select @bind-Value="_theme" ShowLabel="true" DisplayText="@Localizer["MindMapTheme"]"></Select>
             </div>
         </div>
     </section>
-    <MindMap Options="_options" Data="@Data" OnReceive="@OnReceive" @ref="MindMap"></MindMap>
-    <div class="row g-3 mt-3">
-        <div class="col-12">
-            <Button Text="@Localizer["Sample1ButtonText"]" OnClick="Sample"></Button>
-            <Button Text="@Localizer["Sample2ButtonText"]" OnClick="Sample2"></Button>
-            <Button Text="@Localizer["ExportButtonText"]" OnClick="ExportImage"></Button>
-            <Button Text="@Localizer["ExportJsonButtonText"]" OnClick="ExportJson"></Button>
-            <Button Text="@Localizer["GetFullDataButtonText"]" OnClick="GetFullData"></Button>
-            <Button Text="@Localizer["GetDataButtonText"]" OnClick="GetData"></Button>
-            <Button Text="@Localizer["SetDataButtonText"]" OnClick="SetData"></Button>
-            <Button Text="@Localizer["ResetButtonText"]" OnClick="Reset"></Button>
-            <Button Text="@Localizer["FitButtonText"]" OnClick="Fit"></Button>
-        </div>
-        <div class="col-12">
-            <Textarea @bind-Value="@_result" rows="10"></Textarea>
+    <MindMap Layout="_layout" Theme="_theme" Data="@_data" @ref="MindMap"></MindMap>
+    <section ignore>
+        <div class="row g-3 mt-3">
+            <div class="col-12">
+                <Button Text="@Localizer["Sample1ButtonText"]" OnClick="Sample1"></Button>
+                <Button Text="@Localizer["Sample2ButtonText"]" OnClick="Sample2"></Button>
+                <Button Text="@Localizer["ExportButtonText"]" OnClick="ExportImage"></Button>
+                <Button Text="@Localizer["ExportJsonButtonText"]" OnClick="ExportJson"></Button>
+                <Button Text="@Localizer["GetFullDataButtonText"]" OnClick="GetFullData"></Button>
+                <Button Text="@Localizer["GetDataButtonText"]" OnClick="GetData"></Button>
+                <Button Text="@Localizer["SetDataButtonText"]" OnClick="SetData"></Button>
+                <Button Text="@Localizer["ResetButtonText"]" OnClick="Reset"></Button>
+                <Button Text="@Localizer["FitButtonText"]" OnClick="Fit"></Button>
+                <Button Text="@Localizer["Scale1ButtonText"]" OnClick="() => Scale(-0.1f)"></Button>
+                <Button Text="@Localizer["Scale2ButtonText"]" OnClick="() => Scale(0.1f)"></Button>
+                <Button Text="@Localizer["CustomButtonText"]" OnClick="ClickCustom"></Button>
+            </div>
+            <div class="col-12">
+                <Textarea @bind-Value="@_result" rows="10"></Textarea>
+            </div>
+            <div class="col-12">
+                <div>@((MarkupString)Localizer["MindMapExtensionDesc"].Value)</div>
+            </div>
         </div>
-    </div>
+        <Pre class="mt-3">window.BootstrapBlazor.MindMap = {
+    callbacks: {
+        clickCustom: function (args) {
+            console.log(this, args);
+        }
+    }
+}</Pre>
+    </section>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
-
-<AttributeTable Title="@Localizer["OptionsText"]" Items="@GetOptionsAttributes()"></AttributeTable>
-
-<AttributeTable Title="@Localizer["NodeDataText"]" Items="@GetNodeDataAttributes()"></AttributeTable>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.Data.cs b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.Data.cs
index 4cad9f01b58..c13c3b49ddb 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.Data.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.Data.cs
@@ -10,849 +10,287 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class MindMaps
 {
-    static readonly string SampleData = """
-       {
-           "root":{
-               "data":{
-                   "text":"根节点"
-               },
-               "children":[
-                   {
-                       "data":{
-                           "text":"二级节点1",
-                           "expand":true
-                       },
-                       "children":[
-                           {
-                               "data":{
-                                   "text":"分支主题"
-                               },
-                               "children":[
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       },
-                                       "children":[
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               },
-                                               "children":[
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       },
-                                                       "children":[
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               },
-                                                               "children":[
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       }
-                                                                   },
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       },
-                                                                       "children":[
-                                                                           {
-                                                                               "data":{
-                                                                                   "text":"分支主题"
-                                                                               }
-                                                                           },
-                                                                           {
-                                                                               "data":{
-                                                                                   "text":"分支主题"
-                                                                               }
-                                                                           },
-                                                                           {
-                                                                               "data":{
-                                                                                   "text":"分支主题"
-                                                                               }
-                                                                           },
-                                                                           {
-                                                                               "data":{
-                                                                                   "text":"分支主题"
-                                                                               }
-                                                                           }
-                                                                       ]
-                                                                   },
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       }
-                                                                   },
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       }
-                                                                   }
-                                                               ]
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           }
-                                                       ]
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   }
-                                               ]
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   }
-                               ]
-                           }
-                       ]
-                   },
-                   {
-                       "data":{
-                           "text":"二级节点2",
-                           "expand":false
-                       },
-                       "children":[
-                           {
-                               "data":{
-                                   "text":"分支主题"
-                               }
-                           },
-                           {
-                               "data":{
-                                   "text":"分支主题"
-                               },
-                               "children":[
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   }
-                               ]
-                           },
-                           {
-                               "data":{
-                                   "text":"分支主题"
-                               }
-                           },
-                           {
-                               "data":{
-                                   "text":"分支主题"
-                               }
-                           }
-                       ]
-                   },
-                   {
-                       "data":{
-                           "text":"二级节点3",
-                           "expand":true
-                       },
-                       "children":[
-                           {
-                               "data":{
-                                   "text":"分支主题"
-                               },
-                               "children":[
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       },
-                                       "children":[
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   }
-                               ]
-                           }
-                       ]
-                   },
-                   {
-                       "data":{
-                           "text":"二级节点4",
-                           "expand":false
-                       },
-                       "children":[
-                           {
-                               "data":{
-                                   "text":"分支主题"
-                               },
-                               "children":[
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       },
-                                       "children":[
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               },
-                                               "children":[
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   }
-                                               ]
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       }
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       },
-                                       "children":[
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               },
-                                               "children":[
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       },
-                                                       "children":[
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           }
-                                                       ]
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       },
-                                                       "children":[
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               },
-                                                               "children":[
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       }
-                                                                   },
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       }
-                                                                   },
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       }
-                                                                   },
-                                                                   {
-                                                                       "data":{
-                                                                           "text":"分支主题"
-                                                                       }
-                                                                   }
-                                                               ]
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           }
-                                                       ]
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   }
-                                               ]
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data":{
-                                           "text":"分支主题"
-                                       },
-                                       "children":[
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               }
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               },
-                                               "children":[
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       },
-                                                       "children":[
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           },
-                                                           {
-                                                               "data":{
-                                                                   "text":"分支主题"
-                                                               }
-                                                           }
-                                                       ]
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   }
-                                               ]
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               },
-                                               "children":[
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   }
-                                               ]
-                                           },
-                                           {
-                                               "data":{
-                                                   "text":"分支主题"
-                                               },
-                                               "children":[
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   },
-                                                   {
-                                                       "data":{
-                                                           "text":"分支主题"
-                                                       }
-                                                   }
-                                               ]
-                                           }
-                                       ]
-                                   }
-                               ]
-                           }
-                       ]
-                   }
-               ]
-           }
-       }
-       """;
+    const string SampleData1 = "{\"layout\":\"logicalStructure\",\"root\":{\"data\":{\"text\":\"<p><span>根节点</span></p>\",\"expand\":true,\"richText\":true,\"isActive\":false,\"uid\":\"c3e83e33-fdbd-4ed7-be0a-1f2ad8f1c97d\"},\"children\":[{\"data\":{\"text\":\"<p><span>二级节点</span></p>\",\"generalization\":{\"text\":\"<p><span style=\\\"color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none;\\\">概要</span></p>\",\"richText\":true,\"expand\":true,\"isActive\":false},\"richText\":true,\"expand\":true,\"isActive\":false,\"uid\":\"5f7a54d5-1122-4107-8200-568865b9da96\"},\"children\":[{\"data\":{\"text\":\"<p><span>分支主题</span></p>\",\"richText\":true,\"expand\":true,\"isActive\":false,\"uid\":\"ee9834bc-3d28-42b0-98b3-d1430a2a9fcf\"},\"children\":[]},{\"data\":{\"text\":\"<p><span>分支主题</span></p>\",\"richText\":true,\"expand\":true,\"isActive\":false,\"uid\":\"2045232b-cf13-4e71-96b7-97c952e33ead\"},\"children\":[]}]}]},\"theme\":{\"template\":\"defaultTheme\",\"config\":{}},\"view\":{\"transform\":{\"scaleX\":1,\"scaleY\":1,\"shear\":0,\"rotate\":0,\"translateX\":-267.0000000000002,\"translateY\":17.5,\"originX\":0,\"originY\":0,\"a\":1,\"b\":0,\"c\":0,\"d\":1,\"e\":-267.0000000000002,\"f\":17.5},\"state\":{\"scale\":1,\"x\":-267.0000000000002,\"y\":17.5,\"sx\":-267.0000000000002,\"sy\":0.9999999999999432}}}";
 
-    static readonly string SampleData2 = """
-       {
-           "root": {
-               "data": {
-                   "text": "一周安排"
-               },
-               "children": [
-                   {
-                       "data": {
-                           "text": "生活"
-                       },
-                       "children": [
-                           {
-                               "data": {
-                                   "text": "锻炼"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "晨跑"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "7:00-8:00"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data": {
-                                           "text": "夜跑"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "20:00-21:00"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   }
-                               ]
-                           },
-                           {
-                               "data": {
-                                   "text": "饮食"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "早餐"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "8:30"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data": {
-                                           "text": "午餐"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "11:30"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data": {
-                                           "text": "晚餐"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "19:00"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   }
-                               ]
-                           },
-                           {
-                               "data": {
-                                   "text": "休息"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "午休"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "12:30-13:00"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data": {
-                                           "text": "晚休"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "23:00-6:30"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   }
-                               ]
-                           }
-                       ]
-                   },
-                   {
-                       "data": {
-                           "text": "工作日\n周一至周五"
-                       },
-                       "children": [
-                           {
-                               "data": {
-                                   "text": "日常工作"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "9:00-18:00"
-                                       },
-                                       "children": []
-                                   }
-                               ]
-                           },
-                           {
-                               "data": {
-                                   "text": "工作总结"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "21:00-22:00"
-                                       },
-                                       "children": []
-                                   }
-                               ]
-                           }
-                       ]
-                   },
-                   {
-                       "data": {
-                           "text": "学习"
-                       },
-                       "children": [
-                           {
-                               "data": {
-                                   "text": "工作日"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "早间新闻"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "8:00-8:30"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data": {
-                                           "text": "阅读"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "21:00-23:00"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   }
-                               ]
-                           },
-                           {
-                               "data": {
-                                   "text": "休息日"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "财务管理"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "9:00-10:30"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data": {
-                                           "text": "职场技能"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "14:00-15:30"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   },
-                                   {
-                                       "data": {
-                                           "text": "其他书籍"
-                                       },
-                                       "children": [
-                                           {
-                                               "data": {
-                                                   "text": "16:00-18:00"
-                                               },
-                                               "children": []
-                                           }
-                                       ]
-                                   }
-                               ]
-                           }
-                       ]
-                   },
-                   {
-                       "data": {
-                           "text": "休闲娱乐"
-                       },
-                       "children": [
-                           {
-                               "data": {
-                                   "text": "看电影"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "1~2部"
-                                       },
-                                       "children": []
-                                   }
-                               ]
-                           },
-                           {
-                               "data": {
-                                   "text": "逛街"
-                               },
-                               "children": [
-                                   {
-                                       "data": {
-                                           "text": "1~2次"
-                                       },
-                                       "children": []
-                                   }
-                               ]
-                           }
-                       ]
-                   }
-               ]
-           }
-       }
-       """;
+    const string SampleData2 =
+    """
+        {
+        "data": {
+            "text": "一周安排"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "生活"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "锻炼"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "晨跑"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "7:00-8:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "夜跑"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "20:00-21:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "饮食"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "早餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "8:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "午餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "11:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "晚餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "19:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "休息"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "午休"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "12:30-13:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "晚休"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "23:00-6:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "工作日\n周一至周五"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "日常工作"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "9:00-18:00"
+                                },
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "工作总结"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "21:00-22:00"
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "学习"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "工作日"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "早间新闻"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "8:00-8:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "阅读"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "21:00-23:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "休息日"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "财务管理"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "9:00-10:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "职场技能"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "14:00-15:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "其他书籍"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "16:00-18:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "休闲娱乐"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "看电影"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "1~2部"
+                                },
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "逛街"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "1~2次"
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+    """;
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.cs
index 84f823a33e4..22554b644fd 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.cs
@@ -14,7 +14,9 @@ public partial class MindMaps
     [NotNull]
     private MessageService? MessageService { get; set; }
 
-    private readonly MindMapOption _options = new();
+    private EnumMindMapLayout _layout = EnumMindMapLayout.LogicalStructure;
+
+    private EnumMindMapTheme _theme = EnumMindMapTheme.DefaultTheme;
 
     private string? _result;
 
@@ -24,77 +26,7 @@ public partial class MindMaps
     /// <summary>
     /// 初始化数据
     /// </summary>
-    public MindMapNode Data { get; set; } = new MindMapNode
-    {
-        Data = new NodeData
-        {
-            Text = "根节点",
-            Generalization = new Generalization
-            {
-                Text = "概要的内容"
-            }
-        },
-        Children =
-        [
-            new MindMapNode
-            {
-                Data = new NodeData
-                {
-                    Text = "二级节点1",
-                },
-                Children =
-                [
-                    new MindMapNode
-                    {
-                        Data = new NodeData
-                        {
-                            Text = "分支主题1",
-                        },
-                    },
-                    new MindMapNode
-                    {
-                        Data = new NodeData
-                        {
-                            Text = "分支主题2",
-                        },
-                    },
-                    new MindMapNode
-                    {
-                        Data = new NodeData
-                        {
-                            Text = "分支主题3",
-                        },
-                    }
-                ]
-            },
-            new MindMapNode
-            {
-                Data = new NodeData
-                {
-                    Text = "二级节点2",
-                },
-            },
-            new MindMapNode
-            {
-                Data = new NodeData
-                {
-                    Text = "二级节点3",
-                },
-            }
-        ]
-    };
-
-    private Task OnReceive(string message)
-    {
-        _result = message;
-        return Task.CompletedTask;
-    }
-
-    private Task OnError(string message)
-    {
-        _result = message;
-        return Task.CompletedTask;
-    }
+    public string _data = SampleData1;
 
     async Task ExportImage()
     {
@@ -138,13 +70,22 @@ async Task SetData()
         }
     }
 
+    Task ClickCustom() => MindMap.Execute("clickCustom", "args1");
+
     Task Reset() => MindMap.Reset();
 
     Task Fit() => MindMap.Fit();
 
-    async Task Sample()
+    private float _scale = 1.0f;
+    async Task Scale(float step)
     {
-        _result = SampleData;
+        _scale += step;
+        await MindMap.Scale(_scale);
+    }
+
+    async Task Sample1()
+    {
+        _result = SampleData1;
         await SetData();
     }
 
@@ -169,38 +110,6 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = " — "
         },
         new()
-        {
-            Name = "ShowUI",
-            Description = Localizer["ShowUI"],
-            Type = "bool",
-            ValueList = " — ",
-            DefaultValue = "true"
-        },
-        new()
-        {
-            Name = "StyleCss",
-            Description = Localizer["StyleCss"],
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "OnReceive",
-            Description = Localizer["OnReceive"],
-            Type = "Func<string?, Task>",
-            ValueList = " — ",
-            DefaultValue = " — "
-        },
-        new()
-        {
-            Name = "OnError",
-            Description = Localizer["OnError"],
-            Type = "Func<string, Task>",
-            ValueList = " — ",
-            DefaultValue = " — "
-        },
-        new()
         {
             Name = "Export",
             Description = Localizer["Export"],
@@ -231,134 +140,6 @@ private AttributeItem[] GetAttributes() =>
             Type = "Task",
             ValueList = " — ",
             DefaultValue = " — "
-        },
-        new()
-        {
-            Name = nameof(MindMap.Options),
-            Description = Localizer[nameof(MindMap.Options)],
-            Type = "MindMapOption",
-            ValueList = " — ",
-            DefaultValue = " — "
-        }
-    ];
-
-    /// <summary>
-    /// Options
-    /// </summary>
-    /// <returns></returns>
-    private List<AttributeItem> GetOptionsAttributes() =>
-    [
-        new()
-        {
-            Name = nameof(MindMapOption.Layout),
-            Description = Localizer[nameof(MindMapOption.Layout)],
-            Type = "Enum",
-            ValueList = "逻辑结构图 / 思维导图 / 组织结构图 / 目录组织图 / 时间轴 / 时间轴2 / 鱼骨图 / 竖向时间轴",
-            DefaultValue = "逻辑结构图"
-        },
-        new()
-        {
-            Name = nameof(MindMapOption.Theme),
-            Description = Localizer[nameof(MindMapOption.Theme)],
-            Type = "Enum",
-            ValueList = "默认 / 经典 / 黑色 / 天蓝 / ... ",
-            DefaultValue = "默认"
-        }
-    ];
-
-    /// <summary>
-    /// NodeData
-    /// </summary>
-    /// <returns></returns>
-    private List<AttributeItem> GetNodeDataAttributes() =>
-    [
-        new()
-        {
-            Name = "Text",
-            Description = Localizer["NodeTextText"],
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "Image",
-            Description = Localizer["NodeImageText"],
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "ImageTitle",
-            Description = Localizer["NodeImageTitleText"],
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "ImageSize",
-            Description = Localizer["NodeImageSizeText"],
-            Type = "ImageSize",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "Icon",
-            Description = Localizer["NodeIconText"],
-            Type = "List<string>",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "Tag",
-            Description = Localizer["NodeTagText"],
-            Type = "List<string>",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "Hyperlink",
-            Description = Localizer["NodeHyperlinkText"],
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "HyperlinkTitle",
-            Description = Localizer["NodeHyperlinkTitleText"],
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "Note",
-            Description = Localizer["NodeNoteText"],
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "Generalization",
-            Description = Localizer["NodeGeneralizationText"],
-            Type = "Generalization",
-            ValueList = " — ",
-            DefaultValue = "empty"
-        },
-        new()
-        {
-            Name = "Expand",
-            Description = Localizer["NodeExpandText"],
-            Type = "bool",
-            ValueList = " — ",
-            DefaultValue = "false"
         }
     ];
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.js b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.js
new file mode 100644
index 00000000000..99b940ae7dc
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor.js
@@ -0,0 +1,11 @@
+if (window.BootstrapBlazor === void 0) {
+    window.BootstrapBlazor = {};
+}
+
+window.BootstrapBlazor.MindMap = {
+    callbacks: {
+        clickCustom: function (args) {
+            console.log(this, args);
+        }
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 04e45431e17..0743e256a99 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -6319,33 +6319,17 @@
     "SetDataButtonText": "SetData",
     "ResetButtonText": "Reset",
     "FitButtonText": "Fit",
-    "NodeDataText": "NodeData",
+    "Scale1ButtonText": "ZoomOut",
+    "Scale2ButtonText": "ZoomIn",
+    "CustomButtonText": "Custom",
     "Data": "Data",
-    "ShowUI": "Show default UI",
-    "StyleCss": "Custom CSS",
-    "OnReceive": "Data received callback method",
-    "OnError": "Error callback method",
     "Export": "Download as file",
     "GetData": "Get data",
     "SetData": "Import data",
     "Reset": "Reset",
-    "NodeTextText": "Node text",
-    "NodeImageText": "Image",
-    "NodeImageTitleText": "Image text",
-    "NodeImageSizeText": "Image Size",
-    "NodeIconText": "Icon",
-    "NodeTagText": "Tag",
-    "NodeHyperlinkText": "Link",
-    "NodeHyperlinkTitleText": "Link Text",
-    "NodeNoteText": "Note Content",
-    "NodeGeneralizationText": "Generalization",
-    "NodeExpandText": "Node is expanded",
     "SetTheme": "switch themes",
     "SetLayout": "switch layout",
-    "Options": "Options",
-    "OptionsText": "Options",
-    "Layout": "Layout",
-    "Theme": "Theme"
+    "MindMapExtensionDesc": "<p>Because <code>MindMap</code> encapsulates many <b>api</b> methods, the component library cannot fully encapsulate them, so extension methods are provided. For example, if you need a combination button to use the component, you can call your own <code>Javascript</code> through your own code to control <code>MindMap</code></p><ul><li>The custom button calls the component instance method <code>MindMap.Execute(\"clickCustom\", \"args1\")</code>, assuming the parameter is <code>args1</code></li><li>Your own <code>Javascript</code> is responsible for handling the <code>clickCustom</code> event</li><li><code>this</code> in the <code>clickCustom</code> method is the current <code>MindMap</code> instance, and you can call any of its methods to develop your own business</li></ul><p>The complete example is as follows:</p>"
   },
   "BootstrapBlazor.Server.Components.Samples.Mermaids": {
     "MermaidTitle": "Mermaid",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 38371cafec1..3e306fce7c5 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -6319,33 +6319,17 @@
     "SetDataButtonText": "SetData",
     "ResetButtonText": "复位",
     "FitButtonText": "自适应",
-    "NodeDataText": "节点数据",
+    "Scale1ButtonText": "缩小",
+    "Scale2ButtonText": "放大",
+    "CustomButtonText": "自定义",
     "Data": "初始数据",
-    "ShowUI": "显示内置UI",
-    "StyleCss": "自定义CSS",
-    "OnReceive": "收到数据回调方法",
-    "OnError": "错误回调方法",
     "Export": "下载为文件",
     "GetData": "获取数据",
     "SetData": "导入数据",
     "Reset": "复位",
-    "NodeTextText": "节点文本",
-    "NodeImageText": "图片",
-    "NodeImageTitleText": "图片文本",
-    "NodeImageSizeText": "图片尺寸",
-    "NodeIconText": "图标",
-    "NodeTagText": "标签",
-    "NodeHyperlinkText": "链接",
-    "NodeHyperlinkTitleText": "链接文本",
-    "NodeNoteText": "备注内容",
-    "NodeGeneralizationText": "概要",
-    "NodeExpandText": "节点是否展开",
     "SetTheme": "切换主题",
     "SetLayout": "切换布局",
-    "Options": "配置选项",
-    "OptionsText": "配置选项",
-    "Layout": "布局",
-    "Theme": "主题"
+    "MindMapExtensionDesc": "<p>由于 <code>MindMap</code> 封装的 <b>api</b> 方法比较多，组件库无法完全封装，所以提供了扩展方法。例如使用组件需要一个组合按钮，可以通过自己的代码调用自己的 <code>Javascript</code> 来控制 <code>MindMap</code></p><ul><li>自定义按钮调用组件实例方法 <code>MindMap.Execute(\"clickCustom\", \"args1\")</code>，假设参数为 <code>args1</code></li><li>自己实现 <code>Javascript</code> 负责处理 <code>clickCustom</code> 事件</li><li><code>clickCustom</code> 方法内 <code>this</code> 即为 <code>MindMap</code> 当前实例，可以调用其任意方法进行自己业务开发</li></ul><p>完整示例如下：</p>"
   },
   "BootstrapBlazor.Server.Components.Samples.Mermaids": {
     "MermaidTitle": "Mermaid 构图工具",