心智圖

插件信息

Board 的心智圖支援是選用功能。若產品需要在 Board 畫布中使用心智圖節點與互動功能,請加入這項支援。

註冊心智圖支援

TypeScript
import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'import BoardsMindUIZhTW from '@univerjs-pro/boards-mind-ui/locale/zh-TW'import '@univerjs-pro/boards-mind/facade'import '@univerjs-pro/boards-mind-ui/lib/index.css'univer.registerPlugin(UniverBoardsMindPlugin)univer.registerPlugin(UniverBoardsMindUIPlugin)

行動裝置支援

先設定行動版編輯器。在本頁外掛模式的初始化程式碼中,將下列桌面版註冊替換為同一套件匯出的行動版外掛,並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入,請勿同時註冊兩個版本。

套件桌面版註冊行動版註冊
@univerjs-pro/boards-mind-uiUniverBoardsMindUIPluginUniverBoardsMindMobileUIPlugin

套件職責

  • @univerjs-pro/boards-mind 將心智圖元素整合至 Board 模型。
  • @univerjs-pro/boards-mind-ui 加入心智圖的編輯、渲染與 UI 互動功能,並為瀏覽器編輯器提供 @univerjs-pro/boards-mind-ui/locale/* 和 @univerjs-pro/boards-mind-ui/lib/index.css。

執行環境選擇

在瀏覽器編輯器中,請同時使用這兩個套件。若要在伺服器端處理快照,請將模型套件與 UniverBoardsPlugin 一併註冊,不必註冊 UI 套件。

開啟含有心智圖元素的快照前,請先註冊心智圖支援。

Facade API

使用結構化 Facade 操作思維導圖,不要獨立修改底層形狀與連接線。

TypeScript
const board = univerAPI.getActiveBoard()if (!board) throw new Error('No active Board')const mindMap = board.insertMindMap({  left: 180,  top: 180,  root: {    text: 'Release',    children: [      { text: 'Product', children: [{ text: 'Scope' }, { text: 'UX' }] },      { text: 'Engineering', children: [{ text: 'API' }, { text: 'QA' }] },      { text: 'Launch', children: [{ text: 'Docs' }] },    ],  },})if (!mindMap) throw new Error('Cannot insert mind map')const qa = mindMap.getNodes().find(node => node.getText() === 'QA')qa?.addChild({ text: 'Automation' })

FBoard 提供 insertMindMap、getMindMap 與 getMindMaps。導圖物件支援節點與後代查詢、布局、邊界、reflow、setLayout、setBranchLineType 與刪除;節點支援文字、子節點及同級節點插入、變更父節點、提升層級、分離、排序、樣式與折疊。

在指定區域內自動布局

reflow() 在 Board 座標矩形內原子地布局並置中導圖,保留節點與文字大小。預設會以允許的最小間距重試;仍無法容納時保持 Board 不變,傳回 bounds-too-small 與 requiredBounds。

TypeScript
const result = mindMap.reflow({  bounds: { left: 80, top: 80, width: 1_000, height: 600 },  padding: 24,})if (!result.success) {  console.warn(result.reason, result.requiredBounds)}

目標矩形只控制位置,不會變更容器父級、裁剪或縮放它。成功的布局作為一筆復原記錄提交。

你覺得這篇文檔如何?

© 2026 DreamNum Co., Ltd.