# マインドマップ

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

- Source: [boards/features/mind-maps.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/features/mind-maps.ja-JP.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/ja-JP",
      "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 BoardsMindUIJaJP from '@univerjs-pro/boards-mind-ui/locale/ja-JP'
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/ja-JP/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)
}
```

矩形は配置領域です。コンテナの親変更、クリッピング、サイズ変更は行いません。成功した配置は 1 回の元に戻す操作にまとめられます。