1. 项目概述：当Vue遇见思维导图

最近在做一个内部知识库项目，需要集成一个轻量、可定制且能无缝融入Vue技术栈的思维导图组件。市面上成熟的方案不少，但要么过于庞大，要么定制性差，要么就是授权协议让人头疼。在Github上翻找时，我发现了simpleMindMap.js这个项目。顾名思义，它追求的就是“简单”——一个纯前端、零依赖的思维导图库。而我的技术栈是Vue 3 + TypeScript，这就引出了一个很自然的想法：能不能把它封装成一个Vue组件，让它用起来像el-input一样顺手？经过一番折腾，不仅做成了，还踩了不少坑，积累了一些在Vue中集成这类“非Vue原生”绘图库的通用经验。今天就来聊聊simpleMindMap.js的核心，以及如何将它优雅地封装成一个生产可用的Vue组件，让你在项目中快速拥有一个功能完备的Web思维导图。

2. 核心思路与架构设计

2.1 为什么选择 simpleMindMap.js？

在决定封装之前，评估底层库是关键。simpleMindMap.js吸引我的点很明确：

1. 纯Canvas绘制，性能有保障：它不依赖SVG或DOM节点来渲染图形，而是直接操作Canvas。对于节点可能成百上千的复杂脑图，Canvas在渲染性能和内存占用上通常比操作大量DOM更有优势，尤其是在频繁更新视图（如拖拽、缩放）时，能有效避免重排和重绘带来的卡顿。
2. 零外部依赖，体积小巧：库本身不依赖任何其他框架（如React、jQuery），打包后的核心文件体积可以控制得很小。这对于追求首屏加载速度的现代Web应用来说是个优点。
3. 功能核心且可扩展：它提供了思维导图最核心的功能：节点增删改查、拖拽移动、缩放画布、样式主题定制、导入导出（JSON、图片）。虽然不像XMind、MindMaster那样功能庞杂，但作为嵌入式组件，这些功能已经覆盖了90%的使用场景。更重要的是，它的源码结构清晰，提供了丰富的配置项和事件钩子，为二次开发和封装留足了空间。
4. 宽松的开源协议：采用MIT协议，意味着可以在商业项目中自由使用、修改和分发，没有后顾之忧。

当然，它也有缺点，比如默认的UI比较简陋，一些高级布局（如鱼骨图、组织结构图）需要自己实现。但这恰恰是封装的价值所在——我们可以用Vue强大的声明式UI和响应式系统，为它打造一个更友好、更易用的外壳。

2.2 Vue组件化封装的核心挑战

将这样一个基于命令式API（直接调用new MindMap(...)，然后通过实例方法操作）的库，封装成声明式的Vue组件，主要面临几个挑战：

1. 生命周期管理：需要在合适的Vue生命周期（onMounted）中初始化MindMap实例，并在组件销毁（onUnmounted）时正确清理，防止内存泄漏。
2. 数据同步：如何将Vue组件props中的思维导图数据（一个树形结构的JSON）与MindMap实例内部的数据状态同步？是单向绑定还是双向绑定？
3. 事件通信：如何将MindMap实例触发的丰富事件（如节点选择、编辑、删除）暴露给父组件，以便进行业务逻辑处理？
4. 实例暴露：有时父组件需要直接调用MindMap实例的方法（如获取当前导图数据、切换主题、导出图片）。如何安全地将实例引用暴露出去？
5. UI集成：simpleMindMap.js只负责绘制画布。工具栏、右键菜单、样式面板等UI控件，需要我们用Vue组件重新实现，并与画布实例进行交互。

2.3 我们的封装方案设计

基于以上挑战，我设计的封装方案遵循“高内聚、低耦合”的原则：

• 核心组件 (SimpleMindMap.vue)：一个<div>容器，内部创建一个<canvas>元素。它的唯一职责是管理MindMap实例的生命周期，并作为画布渲染的载体。它接收核心数据data和配置options作为props，并对外暴露实例方法和高层事件。
• 数据流：单向为主，可控的双向：采用类似v-model的模式。父组件通过v-model:data传递完整的导图数据。子组件内部，当用户通过UI操作（如工具栏按钮）修改导图时，通过调用实例方法修改数据，然后触发一个update:data事件，将新的数据抛给父组件。父组件可以决定是否更新自己的数据源，从而实现可控的“双向”绑定。对于简单的样式配置，可以采用单向的props。
• 事件透传：在MindMap实例初始化后，监听其所有关键事件（node_click,node_dblclick,data_change等），并在这些事件触发时，使用Vue的emit方法，以相同的参数向上抛出自定义事件。这样父组件就可以用@node-click这样的方式监听画布内的交互。
• 实例引用暴露：通过Vue 3的defineExpose方法，将MindMap实例的引用暴露给父组件。父组件通过模板ref获取到组件实例后，即可调用其上的公共方法（如getData()）来访问底层实例。
• UI组件分离：工具栏(Toolbar.vue)、右键菜单(ContextMenu.vue)、样式编辑器(StylePanel.vue)等作为独立的、无状态的“哑组件”开发。它们不直接持有MindMap实例，而是通过接收来自父组件（通常是使用SimpleMindMap.vue的页面或容器组件）传递的实例引用或封装好的操作方法来进行交互。

这样的设计使得核心画布组件非常纯粹且稳定，UI组件可以灵活组合或替换，整个架构易于维护和测试。

3. 核心实现细节与关键技术点

3.1 初始化与实例管理

这是封装中最基础也最重要的一环。我们需要在Vue组件挂载后，在DOM容器内创建MindMap实例。

<!-- SimpleMindMap.vue 部分代码 --> <template> <div ref="containerRef" class="mind-map-container"></div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'; import MindMap from 'simple-mind-map'; // 假设已安装或通过CDN引入 import type { MindMapData, MindMapOptions } from './types'; // 自定义类型定义 const props = defineProps<{ modelValue: MindMapData; // 对应 v-model options?: Partial<MindMapOptions>; }>(); const emit = defineEmits<{ 'update:modelValue': [data: MindMapData]; 'node-click': [node: any]; 'node-dblclick': [node: any]; // ... 其他事件 }>(); const containerRef = ref<HTMLElement>(); let mindMapInstance: any = null; onMounted(() => { // 确保DOM已渲染 nextTick(() => { if (!containerRef.value) return; // 初始化配置，合并默认值和传入的props const initOptions: MindMapOptions = { el: containerRef.value, data: props.modelValue, // 禁用一些内置UI，因为我们用Vue自己实现 isEnableCtrlKeyDown: false, // 禁用Ctrl+滚轮缩放，我们用工具栏按钮 // ... 其他默认配置 ...props.options, }; mindMapInstance = new MindMap(initOptions); // 绑定事件监听 bindEvents(); // 将实例方法暴露给父组件 exposeInstance(); }); }); onUnmounted(() => { // 关键：销毁实例，释放Canvas和内存 if (mindMapInstance) { mindMapInstance.destroy(); mindMapInstance = null; } }); // 绑定simpleMindMap.js原生事件 function bindEvents() { if (!mindMapInstance) return; // 监听数据变化，同步到父组件 mindMapInstance.on('data_change', (data: MindMapData) => { emit('update:modelValue', data); }); // 监听节点点击 mindMapInstance.on('node_click', (node: any) => { emit('node-click', node); }); // ... 绑定其他必要事件 } // 暴露实例方法给父组件 function exposeInstance() { defineExpose({ getInstance: () => mindMapInstance, getData: () => mindMapInstance?.getData(), export: (type: 'png' | 'svg' | 'json') => mindMapInstance?.export(type), // ... 封装其他常用方法 }); } </script>

注意：simpleMindMap.js的构造函数可能需要完整的DOM元素。务必在onMounted或nextTick中确保容器元素已存在。销毁实例(destroy)是防止内存泄漏的必要步骤，特别是在单页应用(SPA)中组件被频繁切换时。

3.2 响应式数据同步与性能优化

数据同步是核心交互。我们使用watch来监听props中数据的变化，并同步到MindMap实例。

// 在 setup 中 watch( () => props.modelValue, (newData) => { if (mindMapInstance && !isDataEqual(mindMapInstance.getData(), newData)) { // 防止循环触发，判断数据是否真的改变了 mindMapInstance.setData(newData); // 可选：渲染后执行一些操作，如居中显示 nextTick(() => { mindMapInstance?.render(); }); } }, { deep: true } // 深度监听，因为导图数据是嵌套对象 ); // 简单的深比较函数（生产环境建议使用lodash.isEqual） function isDataEqual(a: any, b: any): boolean { return JSON.stringify(a) === JSON.stringify(b); }

这里有一个重要的性能考量：深度监听(deep: true)和频繁的JSON.stringify在数据量大时可能成为性能瓶颈。对于复杂的导图，可以考虑以下优化策略：

1. 使用自定义比较函数：只比较关键字段（如data根节点的children长度或某个版本号version），而不是全量比较。
2. 防抖更新：如果数据源是实时协同编辑的，可以为setData操作添加防抖，避免高频更新导致界面卡顿。
3. 增量更新：如果底层库支持（simpleMindMap.js部分支持），可以只更新变化的节点，而不是全量设置数据。这需要更精细的数据变化侦测。

3.3 自定义Vue工具栏与实例交互

工具栏组件不直接创建或管理MindMap实例，它通过props接收一个“操作执行器”。

<!-- Toolbar.vue --> <template> <div class="mind-map-toolbar"> <button @click="handleAddNode">添加子节点</button> <button @click="handleDeleteNode">删除节点</button> <button @click="handleZoomIn">放大</button> <button @click="handleZoomOut">缩小</button> <select v-model="selectedTheme" @change="handleChangeTheme"> <option value="default">默认</option> <option value="dark">暗黑</option> <!-- ... --> </select> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const props = defineProps<{ // 接收一个包含各种操作方法的对象 operator?: { addNode: (nodeId?: string) => void; deleteNode: (nodeId?: string) => void; zoomIn: () => void; zoomOut: () => void; changeTheme: (theme: string) => void; }; }>(); const selectedTheme = ref('default'); function handleAddNode() { // 这里需要知道当前选中的节点ID。可以通过父组件传递，或者通过MindMap实例的getActiveNodeId方法获取。 // 假设我们从父组件拿到了activeNodeId const activeNodeId = getActiveNodeIdFromParent(); // 这是一个示意函数 props.operator?.addNode(activeNodeId); } // ... 其他处理方法 </script>

在父组件或容器组件中，我们需要创建这个operator对象，其内部实际调用暴露出来的mindMapInstance方法。

<!-- 使用页面的父组件 --> <template> <div> <Toolbar :operator="toolbarOperator" /> <SimpleMindMap ref="mindMapRef" v-model:data="mindMapData" @node-click="handleNodeClick" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import SimpleMindMap from './components/SimpleMindMap.vue'; import Toolbar from './components/Toolbar.vue'; const mindMapRef = ref(); const mindMapData = ref({/* 初始数据 */}); const activeNodeId = ref<string>(); const toolbarOperator = { addNode: (parentNodeId?: string) => { const instance = mindMapRef.value?.getInstance(); if (instance) { // 调用simpleMindMap.js的API instance.addNode(parentNodeId || activeNodeId.value || 'root'); // 更新数据会自动通过v-model同步 } }, zoomIn: () => { mindMapRef.value?.getInstance()?.zoom(0.1); // 放大10% }, changeTheme: (themeName: string) => { // 切换主题可能涉及修改配置并重新渲染 const instance = mindMapRef.value?.getInstance(); if (instance) { instance.setTheme(themeName); // 假设有setTheme方法 } }, // ... 其他方法 }; function handleNodeClick(node: any) { activeNodeId.value = node.data.id; } </script>

这种模式将UI逻辑与核心实例操作解耦，使得工具栏组件可复用、可测试。

4. 功能增强与高级特性实现

4.1 实现节点自定义渲染

simpleMindMap.js默认的节点样式可能不符合你的产品设计。幸运的是，它通常支持通过配置覆盖节点的绘制方法。我们可以利用这一点，在Vue组件初始化时注入自定义的渲染逻辑。

// 在初始化配置中 const initOptions: MindMapOptions = { // ... 其他配置 customCreateNode: (ctx: CanvasRenderingContext2D, node: any) => { // ctx是Canvas上下文，node是节点数据 // 这里可以完全自定义绘制逻辑 const { width, height } = node; const { x, y } = node.leftTop; // 节点左上角坐标 // 1. 绘制圆角矩形背景 ctx.fillStyle = node.style.backgroundColor || '#fff'; roundRect(ctx, x, y, width, height, 5); ctx.fill(); // 2. 绘制边框 ctx.strokeStyle = node.style.borderColor || '#ccc'; ctx.lineWidth = 1; roundRect(ctx, x, y, width, height, 5); ctx.stroke(); // 3. 绘制文字（需要考虑换行、省略号等） ctx.fillStyle = node.style.color || '#333'; ctx.font = `${node.style.fontSize || 14}px Arial`; ctx.textBaseline = 'middle'; // 简单的单行文本绘制 ctx.fillText(node.data.text, x + 10, y + height / 2); // 4. 如果有图标，可以在这里绘制 if (node.data.icon) { const img = new Image(); img.src = node.data.icon; img.onload = () => { ctx.drawImage(img, x + 5, y + 5, 16, 16); // 注意：这里需要触发一次重绘，因为图片加载是异步的 mindMapInstance?.render(); }; } }, }; // 绘制圆角矩形的辅助函数 function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) { if (w < 2 * r) r = w / 2; if (h < 2 * r) r = h / 2; ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); }

实操心得：自定义渲染虽然强大，但需要扎实的Canvas 2D API知识。尤其要注意文本测量(ctx.measureText)、多行文本、图片异步加载和重绘触发。建议先实现一个最小可行版本，再逐步增加复杂度。性能上，避免在每次渲染时创建新的Image对象，可以缓存起来。

4.2 集成右键菜单与业务逻辑

simpleMindMap.js提供了节点右键点击事件。我们可以据此显示一个自定义的Vue右键菜单组件。

<!-- ContextMenu.vue --> <template> <div v-if="visible" :style="menuStyle" class="custom-context-menu"> <ul> <li @click="handleMenuClick('edit')">编辑</li> <li @click="handleMenuClick('delete')">删除</li> <li @click="handleMenuClick('addChild')">添加子节点</li> <li @click="handleMenuClick('copy')">复制</li> <li @click="handleMenuClick('paste')">粘贴</li> </ul> </div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted } from 'vue'; const props = defineProps<{ visible: boolean; x: number; y: number; nodeData: any; }>(); const emit = defineEmits(['menu-click']); const menuStyle = ref({}); // 根据传入的坐标设置菜单位置，并防止超出视口 onMounted(() => { const menuWidth = 120; const menuHeight = 180; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let left = props.x; let top = props.y; if (left + menuWidth > viewportWidth) { left = viewportWidth - menuWidth; } if (top + menuHeight > viewportHeight) { top = viewportHeight - menuHeight; } menuStyle.value = { left: `${left}px`, top: `${top}px`, position: 'fixed', 'z-index': 9999, }; }); function handleMenuClick(action: string) { emit('menu-click', { action, node: props.nodeData }); // 点击后菜单应隐藏，这个状态由父组件控制 } // 点击菜单外部关闭菜单的逻辑，通常由父组件处理 </script>

在父组件中监听node_contextmenu事件，并控制菜单的显示与隐藏。

// 在父组件或容器组件中 const contextMenuVisible = ref(false); const contextMenuPosition = ref({ x: 0, y: 0 }); const contextMenuNode = ref<any>(null); // 在MindMap组件上监听事件 <SimpleMindMap ... @node-contextmenu="handleNodeContextMenu" /> function handleNodeContextMenu({ node, event }: { node: any; event: MouseEvent }) { event.preventDefault(); // 阻止浏览器默认右键菜单 contextMenuNode.value = node; contextMenuPosition.value = { x: event.clientX, y: event.clientY }; contextMenuVisible.value = true; } // 监听全局点击，点击非菜单区域时关闭菜单 function handleGlobalClick(event: MouseEvent) { const menuEl = document.querySelector('.custom-context-menu'); if (menuEl && !menuEl.contains(event.target as Node)) { contextMenuVisible.value = false; } } onMounted(() => document.addEventListener('click', handleGlobalClick)); onUnmounted(() => document.removeEventListener('click', handleGlobalClick));

4.3 导入导出与数据持久化

simpleMindMap.js内置了export方法，可以导出为JSON、PNG或SVG。我们需要在Vue组件中封装这些功能，并提供友好的UI。

// 在暴露的实例方法中 defineExpose({ // ... exportAsJSON: (): MindMapData => { return mindMapInstance?.getData(true); // 获取完整数据，包括主题、布局等配置 }, exportAsPNG: async (): Promise<Blob | null> => { if (!mindMapInstance) return null; // 注意：export方法可能是异步的，或者返回一个DataURL const dataUrl = mindMapInstance.export('png'); // 将DataURL转换为Blob const res = await fetch(dataUrl); return await res.blob(); }, importFromJSON: (data: MindMapData) => { if (mindMapInstance) { mindMapInstance.setData(data); emit('update:modelValue', data); // 通知父组件数据已更新 } }, });

在UI层，可以提供一个文件上传按钮用于导入JSON，一个下载按钮用于触发导出。

<!-- 在工具栏或独立组件中 --> <template> <div> <input type="file" accept=".json" @change="handleFileImport" ref="fileInput" style="display: none;" /> <button @click="triggerFileImport">导入JSON</button> <button @click="handleExportJSON">导出JSON</button> <button @click="handleExportPNG">导出PNG</button> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const fileInput = ref<HTMLInputElement>(); function triggerFileImport() { fileInput.value?.click(); } async function handleFileImport(e: Event) { const file = (e.target as HTMLInputElement).files?.[0]; if (!file || !props.operator) return; const text = await file.text(); try { const jsonData = JSON.parse(text); props.operator.importData(jsonData); // 调用父组件传递的方法 } catch (err) { console.error('导入JSON失败:', err); // 可以在这里添加用户提示，如使用Element Plus的ElMessage // ElMessage.error('文件格式错误'); } // 清空input，以便再次选择同一文件 if (fileInput.value) fileInput.value.value = ''; } function handleExportJSON() { const jsonStr = JSON.stringify(props.operator?.exportData(), null, 2); // 格式化输出 const blob = new Blob([jsonStr], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `mindmap-${Date.now()}.json`; a.click(); URL.revokeObjectURL(url); } async function handleExportPNG() { const blob = await props.operator?.exportPNG(); if (blob) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `mindmap-${Date.now()}.png`; a.click(); URL.revokeObjectURL(url); } } </script>

5. 常见问题、性能优化与部署实践

5.1 开发与调试中的常见坑点

1. Canvas渲染模糊：在高DPI屏幕（如Retina屏）上，Canvas默认渲染可能会模糊。这是因为Canvas的CSS像素与设备像素比(devicePixelRatio)不匹配。需要在初始化时对Canvas进行缩放。

   // 在初始化MindMap之前，可以手动设置容器的宽高，或者库内部可能已经处理。 // 如果发现模糊，可以检查库的源码或配置项，看是否有支持高清屏的选项。 // 一个通用的处理思路是： const dpr = window.devicePixelRatio || 1; const canvas = containerRef.value.querySelector('canvas'); if (canvas) { const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; const ctx = canvas.getContext('2d'); ctx?.scale(dpr, dpr); } // 注意：simpleMindMap.js可能内部创建和管理Canvas，需要查看其文档或源码确认如何介入。

2. 节点事件不触发：如果自定义渲染完全覆盖了节点区域，但没有正确设置节点的点击检测区域，可能导致点击、右键事件失效。simpleMindMap.js内部通常有自己的一套事件检测逻辑（如基于节点坐标和大小进行数学计算）。如果你的自定义渲染改变了节点的视觉大小或形状，需要确保传递给库的节点数据（width,height,leftTop等）是准确的，或者库提供了自定义命中检测的方法。

3. 内存泄漏：除了在onUnmounted中调用destroy，还需注意事件监听器的清理。确保在销毁实例前，移除所有通过mindMapInstance.on绑定的事件监听器（如果库提供了off方法）。另外，自定义渲染中创建的Image对象等也需要妥善管理。

4. Vue响应式数据与库内部数据不同步：这是最棘手的问题之一。根本原因是simpleMindMap.js内部维护了自己的数据状态。我们的v-model同步是基于data_change事件的。但如果某些操作（如直接调用某个未触发data_change事件的实例方法）修改了内部数据，就会导致状态不一致。解决方案：封装任何实例方法时，如果该方法会修改数据，最后都应手动触发一次数据同步，例如在方法末尾调用emit('update:modelValue', mindMapInstance.getData())。

5.2 性能优化建议

1. 虚拟滚动/渲染：对于超大型思维导图（节点数>1000），即使使用Canvas，一次性渲染所有节点也可能导致卡顿。可以考虑实现视口裁剪，只渲染可视区域内的节点。这需要修改simpleMindMap.js的渲染逻辑，难度较高。一个更简单的折中方案是，在数据层面进行“懒加载”，初始只加载根节点和第一级子节点，点击展开时再加载下级数据。

2. 操作防抖与节流：对连续触发的操作进行优化。例如，拖拽画布、连续缩放时，可以节流render方法的调用频率。

3. 离屏Canvas缓存：对于样式复杂的静态节点（如图标、特定背景），可以在离屏Canvas中预先绘制好，主渲染时直接drawImage，避免重复执行绘制命令。

4. 减少深度监听：如前所述，优化对modelValue的watch，避免不必要的全量数据比较和设置。

5.3 打包与部署注意事项

1. 类型定义：simpleMindMap.js可能是纯JavaScript库。为了在TypeScript项目中获得良好的类型提示，可以为其编写类型声明文件(.d.ts)。可以放在项目根目录的types文件夹下，或使用declare module语法。

   // types/simple-mind-map.d.ts declare module 'simple-mind-map' { export interface MindMapData { // ... 定义数据结构 } export interface MindMapOptions { // ... 定义配置项 } export default class MindMap { constructor(options: MindMapOptions); on(event: string, handler: Function): void; off(event: string, handler: Function): void; setData(data: MindMapData): void; getData(): MindMapData; render(): void; destroy(): void; // ... 其他方法 } }

2. 按需引入与Tree Shaking：如果库支持ES模块化，确保你的打包工具（如Vite、Webpack）能进行Tree Shaking，只打包用到的部分。

3. CDN引入备选方案：如果不想打包进项目，可以通过<script>标签引入CDN资源，并通过window.SimpleMindMap全局变量使用。这时在Vue组件中，需要在onMounted生命周期内确保全局变量已存在。

4. 样式隔离：你的Vue组件样式应使用Scoped CSS或CSS Modules，避免与页面其他样式冲突。特别是工具栏、右键菜单等组件的定位(z-index)、盒模型需要仔细控制。

5.4 扩展思路

封装好基础组件后，你可以基于此构建更强大的功能：

• 协同编辑：结合WebSocket，将data_change事件广播给其他用户，并处理冲突解决（如OT或CRDT算法）。
• 历史撤销/重做：在组件内部维护一个状态历史栈，每次数据变化时压栈，提供undo/redo方法。
• 多主题与样式配置器：开发一个可视化的样式面板，允许用户动态修改节点颜色、字体、连线样式等，并实时预览。
• 插件系统：设计一个插件机制，允许其他开发者为你封装的Vue组件开发功能插件（如高级布局算法、Markdown节点、附件管理）。

将simpleMindMap.js封装成Vue组件的过程，本质上是一个将命令式绘图库融入声明式框架的典型实践。关键在于理清生命周期、设计清晰的数据流和事件通信机制。一旦这个基础打好，剩下的功能扩展就是按图索骥，水到渠成。希望这篇长文能为你提供一条清晰的路径，让你在Vue项目中也能轻松驾驭强大的思维导图功能。