# 마인드맵

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [boards/features/mind-maps.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/features/mind-maps.ko-KR.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/ko-KR",
      "style": "@univerjs-pro/boards-mind-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

보드의 마인드맵 지원은 선택 사항입니다. 제품에서 보드 캔버스 내부의 마인드맵 노드와 상호작용이 필요할 때 추가하세요.

## 마인드맵 지원 등록하기

```ts
import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'
import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'
import BoardsMindUIKoKR from '@univerjs-pro/boards-mind-ui/locale/ko-KR'
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/ko-KR/guides/boards/getting-started/installation.md#mobile-support)를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 **문서를 열기 전에** 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.

| 패키지                            | 데스크톱 등록                    | 모바일 등록                           |
| ------------------------------ | -------------------------- | -------------------------------- |
| `@univerjs-pro/boards-mind-ui` | `UniverBoardsMindUIPlugin` | `UniverBoardsMindMobileUIPlugin` |

## 패키지 역할

* `@univerjs-pro/boards-mind`는 마인드맵 요소를 보드 모델과 통합합니다.
* `@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)
}
```

사각형은 배치 영역일 뿐이며 컨테이너의 부모, 잘림, 크기를 바꾸지 않습니다. 성공한 배치는 하나의 실행 취소 항목으로 저장됩니다.