---
code: "SCH-22"
id: "c-sch-mindmap2"
tab: "schemas"
kind: "schema"
title: "Mind Map · 마인드맵 (방사형)"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "tree"
dataShape: "1-cell diagram with 중심+방사+분기 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["tree", "중심+방사+분기", "1cells", "Mind Map", "브레인스토밍", "발산사고"]
gallery: "https://graph.heal7.com/#SCH-22"
js: "/sku/SCH-22.js"
---

# [SCH-22] Mind Map · 마인드맵 (방사형)

> AI 붙여넣기 카드. 갤러리 런타임(`main.js`)이 아니라 이 파일을 가져와라.

## 언제 가져가나
중심 주제에서 자유 발산 — 정형화 전 단계의 발상/기록.

**응용** 브레인스토밍, 강의 노트, 책 요약, 프로젝트 분해.

## 데이터 모양
- family: `tree`
- dataShape: 1-cell diagram with 중심+방사+분기 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: tree, 중심+방사+분기, 1cells, Mind Map, 브레인스토밍, 발산사고

- schema.type: `tree`
- schema.cells: `1`
- schema.axis: `중심+방사+분기`


## 의존
svg · load `low` · library `SVG`

## 붙여넣는 법
1. 라이브러리 없음. svg viewBox 0 0 400 240
2. 아래 body 를 svg 안에 넣는다
3. 색 변수(`${gold}` 등)는 T 토큰으로 치환한다

```js
const T = {
  "bg": "transparent",
  "fg": "#ece8f5",
  "sub": "#a59bbd",
  "grid": "rgba(255,255,255,.08)",
  "gold": "#e8c069",
  "royal": "#6b8cff",
  "rose": "#e07a9f",
  "teal": "#6dd2c4",
  "plum": "#b487e8"
};
const gold = T.gold, royal = T.royal, rose = T.rose, teal = T.teal, plum = T.plum, fg = T.fg, sub = T.sub;
const stroke = 'rgba(255,255,255,.18)';
const fill1 = 'rgba(232,192,105,.10)';
const fill2 = 'rgba(107,140,255,.10)';
const host = document.querySelector('#chart');
const body = `
    <ellipse cx="200" cy="120" rx="50" ry="28" fill="rgba(232,192,105,.22)" stroke="${gold}" stroke-width="2"/>
    <text x="200" y="124" text-anchor="middle" fill="${gold}" font-size="13" font-weight="700">중심 주제</text>
    ${[
      [80, 40, 'A 분야', royal, [[40,15],[40,55]]],
      [320,40, 'B 분야', plum,  [[40,15],[40,55]]],
      [80,200, 'C 분야', rose,  [[40,15],[40,55]]],
      [320,200,'D 분야', teal,  [[40,15],[40,55]]]
    ].map(([cx,cy,lab,c,subs])=>`
      <line x1="200" y1="120" x2="${cx}" y2="${cy}" stroke="${c}" stroke-width="2"/>
      <rect x="${cx-40}" y="${cy-15}" width="80" height="30" rx="8" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
      <text x="${cx}" y="${cy+5}" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">${lab}</text>
      ${subs.map(([dx,dy])=>{
        const sx = cx + (cx<200?-dx:dx), sy = cy + (cy<120?-dy:dy);
        return `<line x1="${cx}" y1="${cy}" x2="${sx}" y2="${sy}" stroke="${c}" stroke-width="1" opacity="0.5"/>
                <circle cx="${sx}" cy="${sy}" r="4" fill="${c}"/>`;
      }).join('')}
    `).join('')}
  `;
host.innerHTML = '<svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style="overflow:visible">' + (typeof body === 'string' ? body : '') + '</svg>';
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 3911-4470
- gallery: https://graph.heal7.com/#SCH-22
- raw js: https://graph.heal7.com/sku/SCH-22.js

```js
`
    <ellipse cx="200" cy="120" rx="50" ry="28" fill="rgba(232,192,105,.22)" stroke="${gold}" stroke-width="2"/>
    <text x="200" y="124" text-anchor="middle" fill="${gold}" font-size="13" font-weight="700">중심 주제</text>
    ${[
      [80, 40, 'A 분야', royal, [[40,15],[40,55]]],
      [320,40, 'B 분야', plum,  [[40,15],[40,55]]],
      [80,200, 'C 분야', rose,  [[40,15],[40,55]]],
      [320,200,'D 분야', teal,  [[40,15],[40,55]]]
    ].map(([cx,cy,lab,c,subs])=>`
      <line x1="200" y1="120" x2="${cx}" y2="${cy}" stroke="${c}" stroke-width="2"/>
      <rect x="${cx-40}" y="${cy-15}" width="80" height="30" rx="8" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
      <text x="${cx}" y="${cy+5}" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">${lab}</text>
      ${subs.map(([dx,dy])=>{
        const sx = cx + (cx<200?-dx:dx), sy = cy + (cy<120?-dy:dy);
        return `<line x1="${cx}" y1="${cy}" x2="${sx}" y2="${sy}" stroke="${c}" stroke-width="1" opacity="0.5"/>
                <circle cx="${sx}" cy="${sy}" r="4" fill="${c}"/>`;
      }).join('')}
    `).join('')}
  `
```

## 시나리오
- 브레인스토밍 — 아이디어 발산 후 수렴
- 강의 노트 — 핵심 + 가지 키워드
- 책/논문 요약 — 챕터 구조 + 키워드
- 프로젝트 분해 — 1차 WBS

## 관련 SKU
`c-sch-hub`, `c-sch-fishbone`