AiMindMap

AiMindMap 是基于 MindElixir 的可编辑思维导图，支持画布内编辑、拖拽换层级、多选、折叠、撤销重做以及 JSON、Markdown、SVG、PNG 导出。它也作为 AiRichContent 的 mindmap 默认渲染器。

Vue2.6 + Lingxi SDK 示例

数据协议

interface AiMindMapNode {
  id?: string
  label?: string
  title?: string
  children?: AiMindMapNode[]
  expanded?: boolean
  style?: Record<string, string | number>
  meta?: Record<string, unknown>
}

缺少 ID 时会按节点路径生成确定性 ID，并在首次更新时写回数据。

API 标准表

Props

属性	类型	默认值	说明
modelValue	AiMindMapValue	-	脑图数据。
markdown	string	''	Markdown outline 输入。
title	string	-	标题。
height	string | number	480	高度。
editable / readonly	boolean	false	编辑与只读控制。
selectedNodeIds	string[]	-	受控选中节点。
historyLimit	number	50	撤销历史上限。
updateDebounce	number	300	更新防抖毫秒数。
options	Record<string, unknown>	-	MindElixir 选项。
labels	AiMindMapLabels	-	文案覆盖。

Events

事件	参数	说明
update:modelValue	AiMindMapData	数据更新。
update:selectedNodeIds	string[]	选中节点更新。
selection:change	{ nodeIds, edgeIds }	选择变化。
node:click / node:add / node:update	node, context	节点操作。
node:delete / node:move	ids	节点删除或移动。
export	type, payload	导出完成。
error	unknown	异常。

Slots

当前无公开 slot。

Exposes

方法	参数	说明
undo() / redo()	-	撤销或重做。
canUndo / canRedo	-	是否可撤销或重做。
fitView()	-	适配视图。
focusNodes(ids)	string[]	聚焦节点。
clearSelection()	-	清空选择。
export(type, options?)	AiMindMapExportType	导出 JSON、Markdown、SVG 或 PNG。

样式入口

import '@zhiyongui/lingxi-ui/ai-mind-map/style.css'

FAQ

只读模式还能选中节点吗？

可以。readonly 禁止编辑，但保留查看和选择能力。