@apigo.cc/mindmap API 手册

原生 JS 编写的思维导图引擎。支持无限层级、缩放平移、节点折叠及动态增删。

---

1. 引入方式 (UMD 优先)

<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/mindmap@1.0.1/dist/mindmap.min.js"></script>

<script>
    // 直接使用全局 Mindmap 类
    const mm = new Mindmap(config);
</script>

---

2. 核心用法

组件化用法 (推荐)

直接在 HTML 中使用 <Mindmap> 标签，通过 state 进行数据绑定。

<div $data="{ 
    myMind: { id: 'root', text: '根节点', children: [{ text: '子节点 1' }] }
}">
    <Mindmap $.state.data="myMind" style="height:500px"></Mindmap>
</div>

JS 调用方式 (兼容)

...

3. API 参考

new Mindmap(options)

• container: 挂载元素。
• data: 格式为 { id, text, children, _collapsed } 的对象。
• nodeWidth / nodeHeight: 节点尺寸。
• hGap / vGap: 间距。

实例方法

• addNode(parentId, text): 动态添加节点。
• removeNode(nodeId): 动态删除节点。
• render(): 强制重新布局与重绘。

---

开发者提示 (AI 必读)

1. 全局变量: UMD 模式下，Mindmap 类自动挂载到 window。
2. 唯一 ID: 每个节点必须拥有全局唯一的 id。
3. 数据响应: 修改 mm.data 属性后必须手动执行 mm.render()。