obsidian-canvas Checked

**Use case**: Concept breakdown, org charts

**Spacing**: Y: 200px per level

### 5. Side-by-side Comparison (가로 비교)

관련 항목들을 가로로 배치하여 한눈에 비교

┌─────────┐ ┌─────────┐ ┌─────────┐
│  항목1  │ │  항목2  │ │  항목3  │
│ (350px) │ │ (350px) │ │ (350px) │
└─────────┘ └─────────┘ └─────────┘

**Use case**: 옵션 비교, 요약 카드, 관련 개념 나열

**Node width**: 300-350px (좁게)

**X spacing**: 40px between nodes

**X position calculation** (centered at x=0):

• 2 nodes: x = -195, 195
• 3 nodes: x = -390, 0, 390
• 계산식: 첫 노드 x = -(총너비/2) + (노드너비/2)

### 6. Two-Column Comparison (2열 비교)

대조되는 두 관점/옵션을 양쪽에 배치

    LEFT COLUMN          RIGHT COLUMN
    ┌─────────┐          ┌─────────┐
    │ Header  │          │ Header  │
    ├─────────┤          ├─────────┤
    │ Item 1  │          │ Item 1  │
    │ Item 2  │          │ Item 2  │
    │ Item 3  │          │ Item 3  │
    └────┬────┘          └────┬────┘
         └───────┬───────────┘
           ┌─────┴─────┐
           │  Common   │
           │  Ground   │
           └───────────┘

**Use case**: A vs B 비교, 찬반, Before/After, 관점 대조

**Column width**: 500-550px each

**X spacing**: 750px between column centers (left: -375, right: 375)

**Center elements**: x = 0 (양쪽 연결)

Color Scheme

| Color | ID | Use Case |

|-------|-----|----------|

| Red | 1 | AI & Tech |

| Orange | 2 | Work & Projects |

| Yellow | 3 | Current Events |

| Green | 4 | PKM & Learning |

| Purple | 5 | Personal & Meta |

| Blue | 6 | Education & Career |

Node Types & Sizes

### Text Node

• **Default**: 250x60 (single line)
• **Quote**: 280x60 (wider for readability)
• **Multi-line**: 250x(60 + 20*lines)

### File Node

• **Link to note**: 280x90 (includes title + summary)
• **Path format**: Use wiki links in text field

### Group Node

• **Category header**: 200x50
• **Container**: Auto-size based on children

### Width Adaptation (폭 변경 시 콘텐츠 조정)

레이아웃 변경으로 노드 폭이 줄어들 때:

| 폭 변경 | 콘텐츠 조정 |

|--------|------------|

| 550px → 350px | 테이블 열 축소, 긴 문장 분리 |

| 350px → 300px | 불릿 2-3개만, 예시 제거 |

| 300px → 250px | 제목 + 한 줄 요약만 |

**축약 우선순위** (먼저 제거할 것):

1. 부연 설명, 괄호 내용

2. 예시, 참조

3. 테이블 행 (핵심만 유지)

4. 불릿 포인트 수

Auto-Layout Algorithm

### Step 1: Categorize Nodes

Group nodes by topic/category using tags or manual grouping.

### Step 2: Calculate Positions

Based on layout pattern:

• **Radial**: Divide 360° by category count
• **Grid**: Calculate column width, row height
• **Timeline**: Distribute evenly on X-axis
• **Hierarchy**: BFS traversal, level-by-level

### Step 3: Avoid Overlaps

• Minimum spacing: 50px
• Check bounding boxes
• Adjust if collision detected

### Step 4: Create Edges

• Connect center to categories (radial)
• Connect sequential items (timeline)
• Connect parent-child (hierarchy)

Example Templates

### Weekly Reading Canvas

{
  "nodes": [
    {
      "id": "center",
      "type": "text",
      "text": "# Weekly Reading\n## Dec 20-27, 2025",
      "x": 0, "y": 0,
      "width": 200, "height": 80,
      "color": "5"
    },
    {
      "id": "group-ai",
      "type": "text",
      "text": "## AI & Learning",
      "x": -380, "y": -200,
      "width": 180, "height": 50,
      "color": "1"
    }
  ],
  "edges": [
    {
      "id": "edge-center-ai",
      "fromNode": "center",
      "fromSide": "left",
      "toNode": "group-ai",
      "toSide": "right",
      "color": "1"
    }
  ]
}

### Project Timeline Canvas

{
  "nodes": [
    {
      "id": "phase1",
      "type": "text",
      "text": "**Phase 1**\nResearch",
      "x": 0, "y": 0,
      "width": 200, "height": 80,
      "color": "1"
    },
    {
      "id": "phase2",
      "type": "text",
      "text": "**Phase 2**\nDevelopment",
      "x": 300, "y": 0,
      "width": 200, "height": 80,
      "color": "2"
    }
  ],
  "edges": [
    {
      "id": "edge-1-2",
      "fromNode": "phase1",
      "fromSide": "right",
      "toNode": "phase2",
      "toSide": "left"
    }
  ]
}

Best Practices

### Content First, Layout Second

1. List all items to include

2. Group by category/theme

3. Choose layout pattern

4. Generate coordinates

5. Add edges last

### Keep It Scannable

• Max 20 nodes per canvas
• 4-6 categories ideal
• Clear visual hierarchy
• Consistent spacing

### Link to Notes

• Use wiki link format: [[Note Title]]
• Include section links: [[Note#Section]]
• Add emoji for visual cues

### Iterate Layout

• Start with template
• Adjust spacing if crowded
• Test in Obsidian preview
• Refine edge routing

### Part Headers for Long Documents

긴 캔버스는 Part 헤더로 섹션 구분

**언제 사용**:

• 노드 수 15개 이상
• 논리적으로 구분되는 단계/섹션 존재

**Part 헤더 형식**:

{"id":"part1","type":"text","text":"# 📋 Part 1: [섹션명]","x":-275,"y":[y],"width":550,"height":60,"color":"[색상]"}

**Part 간 색상 구분**:

• 각 Part에 다른 색상 할당
• Part 내 노드들은 동일 색상 계열 사용
• 시각적 네비게이션 향상

Overlap Prevention (오버랩 방지)

캔버스 업데이트 시 **항상** 오버랩을 체크해야 한다. 오버랩은 가독성을 해치고 노드 선택을 어렵게 만든다.

### 오버랩 계산 공식

두 노드가 겹치는지 확인:

Node A: (x1, y1, width1, height1)
Node B: (x2, y2, width2, height2)

오버랩 조건 (둘 다 만족 시 오버랩):
- X축: x1 < x2 + width2 AND x1 + width1 > x2
- Y축: y1 < y2 + height2 AND y1 + height1 > y2

### 적정 간격 계산

노드 간 간격을 유지하기 위한 공식:

다음 노드 Y = 현재 노드 Y + 현재 노드