# 心智圖

- Human documentation: [https://docs.univer.ai/zh-TW/guides/boards/features/mind-maps](https://docs.univer.ai/zh-TW/guides/boards/features/mind-maps)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/boards/features/mind-maps.md](https://docs.univer.ai/zh-TW/guides/boards/features/mind-maps.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [boards/features/mind-maps.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/features/mind-maps.zh-TW.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/boards-mind",
      "facade": "@univerjs-pro/boards-mind/facade"
    },
    {
      "client": "@univerjs-pro/boards-mind-ui",
      "locale": "@univerjs-pro/boards-mind-ui/locale/zh-TW",
      "style": "@univerjs-pro/boards-mind-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

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

## 註冊心智圖支援

```ts
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)
```

## 行動裝置支援

先設定[行動版編輯器](https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation.md#mobile-support)。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在**開啟文件前**完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。

| 套件                             | 桌面版註冊                      | 行動版註冊                            |
| ------------------------------ | -------------------------- | -------------------------------- |
| `@univerjs-pro/boards-mind-ui` | `UniverBoardsMindUIPlugin` | `UniverBoardsMindMobileUIPlugin` |

## 套件職責

* `@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 操作思維導圖，不要獨立修改底層形狀與連接線。

```ts
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`。

```ts
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)
}
```

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