10 分钟给项目接入一个完整的思维导图模块：思维导图 SDK 实践

Tony_Chang_Jade

183人浏览 · 2026-09-01 14:03:30

Tony_Chang_Jade · 2026-09-01 14:03:30 发布

产品又让你加思维导图？我花了一天，搞定了这个方案

上个月产品经理来找我：“用户在后台需要把思路画成树状图，你评估一下工作量。”

我打开 Figma 看了一眼原型——节点拖拽、连线、布局、导出……心里默默估算了一下：图形渲染引擎、布局算法、交互逻辑、跨端兼容、导出功能。

“一个月吧。”我说。

一个月？其实我心里没底。

后来我发现，根本不用一个月。甚至不用一周。

我用一天时间调研，选了一个方案，第二天就集成完了。这篇文章就是那次调研和实践的完整记录。

一、我为什么放弃了自研

刚开始我也想自己写。第一反应是找开源的图形渲染库，然后自己实现布局算法和交互逻辑。

但翻了一圈下来发现：

方案	优点	缺点
Canvas 自绘	完全可控，性能好	开发周期长，工作量巨大
SVG 渲染	交互友好，适合中小规模	大量节点时性能下降明显
第三方 SDK	开箱即用，功能完整	需要调研选型，有学习成本
开源库改造	免费，有基础代码	维护成本高，二次开发困难

最后我选择了一个第三方方案——寻简思维导图 SDK。

二、选型的几个考量点

我列了几个核心标准：

集成方式要简单，不能折腾复杂的构建配置
布局要丰富，不能只有一种样式
要能支持 AI 能力，产品后面有 AI 对话转导图的规划
导出功能要直接能用，不能让我自己写

逐条对比了几个选项后，寻简 SDK 是唯一全部满足的。

三、集成过程：真的就三步

这个 SDK 的集成方式非常简单，总共就三步：

第一步：嵌入一个 iframe

<iframe
    id="mindmap-sdk"
    src="https://web.mindyushu.com/sdk"
    style="width:100%; height:600px; border:none;"
></iframe>

第二步：监听 READY 事件

const iframe = document.getElementById('mindmap-sdk');

window.addEventListener('message', function(event) {
    // 验证来源，防止被恶意消息干扰
    if (event.source !== iframe.contentWindow) return;

    const data = event.data;
    if (data.type === 'READY' && data.value === 'OK') {
        // SDK 已就绪，可以发送数据了
        sendMindMapData();
    }
});

第三步：发送思维导图数据

function sendMindMapData() {
    const sdkData = {
        ApiKey: 'your_api_key_here',
        rootNode: {
            value: { text: '中心主题' },
            children: [
                {
                    value: { text: '分支一' },
                    children: [
                        { value: { text: '子节点 1-1' } },
                        { value: { text: '子节点 1-2' } }
                    ]
                },
                {
                    value: { text: '分支二' },
                    children: [
                        { value: { text: '子节点 2-1' } }
                    ]
                }
            ]
        },
        styleIndex: 5,
        frameworkIndex: 12,
        mindBGColor: 0xffffff,
        showSaveImageButton: true
    };

    iframe.contentWindow.postMessage({
        type: 'MINDMAP',
        data: JSON.stringify(sdkData)
    }, 'https://web.mindyushu.com');
}

⚠️ 注意：data 必须用 JSON.stringify 序列化，否则 SDK 会报错。这是最容易踩的坑，我第一次也忘了。

四、数据结构说明

我整理了一下这个 SDK 的数据结构，供大家参考：

字段	类型	说明
`ApiKey`	string	API 密钥（必填）
`rootNode`	object	思维导图根节点（必填）
`styleIndex`	number	配色方案索引（0~29），默认 3
`frameworkIndex`	number	布局骨架索引（0~33），默认 5
`lineWidth`	number	线条宽度（1~4），默认 2
`mindBGColor`	number	背景色，默认 0xffffff
`showSaveImageButton`	boolean	是否显示保存按钮，默认 true

每个节点的数据结构：

{
    value: {
        text: '节点文字',        // 必填
        textColor: 0x333333,
        textFontSize: 18,
        backgroundColor: 0xEEE3B6,
        borderColor: 0xA6A6A6,
        mindElementShape: 0,
        alignmentType: 0
    },
    children: []  // 子节点数组
}