elanous 0.2.10 → 0.2.11

package/skills/diagram-master/references/engines/svg/svg-element-templates.md

@@ -0,0 +1,349 @@
+# SVG Element Templates
+
+Copy-paste SVG + JS templates for each interactive element type. Always pull colors from `color-palette.md`.
+
+---
+
+## Interactive Rectangle (Process/Action Node)
+
+```html
+<g id="node-process-name" class="interactive-node" role="button" tabindex="0"
+   aria-label="Process Name - click for details" data-interactive="true">
+  <rect x="100" y="100" width="180" height="90" rx="8" ry="8"
+        fill="var(--c-primary-fill)" stroke="var(--c-primary-stroke)" stroke-width="2"
+        class="node-bg" />
+  <text x="190" y="150" text-anchor="middle" dominant-baseline="central"
+        fill="var(--c-text-on-light)" font-size="16" font-family="Inter, system-ui, sans-serif">
+    Process Name
+  </text>
+</g>
+```
+
+### With hover + click JS:
+```js
+const node = document.getElementById('node-process-name');
+node.addEventListener('mouseenter', () => {
+  node.querySelector('.node-bg').style.filter = 'brightness(1.1) drop-shadow(0 0 8px var(--c-glow-primary))';
+});
+node.addEventListener('mouseleave', () => {
+  node.querySelector('.node-bg').style.filter = '';
+});
+node.addEventListener('click', () => showDetail('process-name'));
+node.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showDetail('process-name'); }
+});
+```
+
+---
+
+## Decision Diamond
+
+```html
+<g id="node-decision-name" class="interactive-node" role="button" tabindex="0"
+   aria-label="Decision: condition?" data-interactive="true">
+  <polygon points="190,80 280,140 190,200 100,140"
+           fill="var(--c-decision-fill)" stroke="var(--c-decision-stroke)" stroke-width="2"
+           class="node-bg" />
+  <text x="190" y="145" text-anchor="middle" dominant-baseline="central"
+        fill="var(--c-text-on-light)" font-size="14" font-family="Inter, system-ui, sans-serif">
+    Condition?
+  </text>
+</g>
+```
+
+---
+
+## Start/Trigger Circle
+
+```html
+<g id="node-start" class="interactive-node" role="button" tabindex="0"
+   aria-label="Start" data-interactive="true">
+  <circle cx="60" cy="60" r="30"
+          fill="var(--c-start-fill)" stroke="var(--c-start-stroke)" stroke-width="2"
+          class="node-bg pulse-animation" />
+  <text x="60" y="65" text-anchor="middle" dominant-baseline="central"
+        fill="var(--c-start-stroke)" font-size="14" font-family="Inter, system-ui, sans-serif">
+    Start
+  </text>
+</g>
+```
+
+### Pulse animation CSS:
+```css
+@keyframes pulse {
+  0%, 100% { filter: drop-shadow(0 0 0px rgba(194, 65, 12, 0)); }
+  50% { filter: drop-shadow(0 0 12px rgba(194, 65, 12, 0.4)); }
+}
+.pulse-animation { animation: pulse 2s ease-in-out infinite; }
+```
+
+---
+
+## End/Success Circle
+
+```html
+<g id="node-end" aria-label="End/Success">
+  <circle cx="60" cy="60" r="30"
+          fill="var(--c-success-fill)" stroke="var(--c-success-stroke)" stroke-width="3"
+          class="node-bg" />
+  <text x="60" y="65" text-anchor="middle" dominant-baseline="central"
+        fill="var(--c-success-stroke)" font-size="14" font-family="Inter, system-ui, sans-serif">
+    Done
+  </text>
+</g>
+```
+
+---
+
+## Animated Arrow (Flow Connection)
+
+```html
+<line x1="280" y1="145" x2="400" y2="145"
+      stroke="var(--c-primary-stroke)" stroke-width="2"
+      marker-end="url(#arrowhead)" class="flow-arrow" />
+```
+
+### Arrow marker definition (put in `<defs>`):
+```html
+<defs>
+  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+    <polygon points="0 0, 10 3.5, 0 7" fill="var(--c-primary-stroke)" />
+  </marker>
+  <marker id="arrowhead-success" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+    <polygon points="0 0, 10 3.5, 0 7" fill="var(--c-success-stroke)" />
+  </marker>
+</defs>
+```
+
+### Animated dashed flow:
+```html
+<line x1="280" y1="145" x2="400" y2="145"
+      stroke="var(--c-primary-stroke)" stroke-width="2" stroke-dasharray="8 4"
+      marker-end="url(#arrowhead)" class="animated-flow" />
+```
+
+```css
+@keyframes dash-flow {
+  to { stroke-dashoffset: -24; }
+}
+.animated-flow { animation: dash-flow 2s linear infinite; }
+```
+
+---
+
+## Curved Path Arrow
+
+```html
+<path d="M 280 145 C 340 80, 360 80, 400 145"
+      fill="none" stroke="var(--c-primary-stroke)" stroke-width="2"
+      marker-end="url(#arrowhead)" />
+```
+
+---
+
+## Evidence Artifact (Code Snippet)
+
+```html
+<g id="evidence-snippet-1" class="evidence-artifact" role="button" tabindex="0"
+   aria-label="Code example - click to expand" data-evidence="true">
+  <rect x="100" y="300" width="280" height="80" rx="6" ry="6"
+        fill="#1e293b" stroke="#334155" stroke-width="1" class="evidence-bg" />
+  <text x="112" y="325" fill="#c084fc" font-size="12" font-family="'JetBrains Mono', monospace">
+    const
+  </text>
+  <text x="150" y="325" fill="#60a5fa" font-size="12" font-family="'JetBrains Mono', monospace">
+    result
+  </text>
+  <text x="195" y="325" fill="#f8fafc" font-size="12" font-family="'JetBrains Mono', monospace">
+    = await
+  </text>
+  <text x="268" y="325" fill="#60a5fa" font-size="12" font-family="'JetBrains Mono', monospace">
+    fetch
+  </text>
+  <text x="300" y="325" fill="#f8fafc" font-size="12" font-family="'JetBrains Mono', monospace">
+    (url);
+  </text>
+  <!-- "Click to expand" hint -->
+  <text x="112" y="368" fill="#64748b" font-size="10" font-family="Inter, system-ui, sans-serif">
+    Click to expand...
+  </text>
+</g>
+```
+
+---
+
+## Evidence Artifact (JSON Data)
+
+```html
+<g id="evidence-json-1" class="evidence-artifact" role="button" tabindex="0"
+   aria-label="JSON payload - click to expand" data-evidence="true">
+  <rect x="100" y="400" width="260" height="70" rx="6" ry="6"
+        fill="#1e293b" stroke="#334155" stroke-width="1" class="evidence-bg" />
+  <text x="112" y="425" fill="#22c55e" font-size="12" font-family="'JetBrains Mono', monospace">
+    { "event": "STATE_DELTA",
+  </text>
+  <text x="112" y="445" fill="#22c55e" font-size="12" font-family="'JetBrains Mono', monospace">
+      "payload": { ... } }
+  </text>
+</g>
+```
+
+---
+
+## Tooltip (Hidden by Default)
+
+```html
+<g id="tooltip" class="tooltip" style="display:none; pointer-events:none;">
+  <rect x="0" y="0" width="200" height="40" rx="4" ry="4"
+        fill="#1e293b" stroke="#334155" stroke-width="1" opacity="0.95" />
+  <text x="10" y="25" fill="#f1f5f9" font-size="13" font-family="Inter, system-ui, sans-serif"
+        id="tooltip-text">
+    Tooltip text here
+  </text>
+</g>
+```
+
+### Tooltip JS:
+```js
+function showTooltip(evt, text) {
+  const tooltip = document.getElementById('tooltip');
+  const tooltipText = document.getElementById('tooltip-text');
+  tooltipText.textContent = text;
+
+  const bbox = tooltipText.getBBox();
+  tooltip.querySelector('rect').setAttribute('width', bbox.width + 20);
+
+  const pt = svg.createSVGPoint();
+  pt.x = evt.clientX; pt.y = evt.clientY;
+  const svgPt = pt.matrixTransform(svg.getScreenCTM().inverse());
+
+  tooltip.setAttribute('transform', `translate(${svgPt.x + 10}, ${svgPt.y - 50})`);
+  tooltip.style.display = '';
+}
+
+function hideTooltip() {
+  document.getElementById('tooltip').style.display = 'none';
+}
+```
+
+---
+
+## Free-Floating Label (Title)
+
+```html
+<text x="100" y="50" fill="#1e40af" font-size="24" font-weight="700"
+      font-family="Inter, system-ui, sans-serif">
+  Diagram Title
+</text>
+```
+
+## Free-Floating Label (Subtitle)
+
+```html
+<text x="100" y="80" fill="#3b82f6" font-size="18" font-weight="500"
+      font-family="Inter, system-ui, sans-serif">
+  Section Subtitle
+</text>
+```
+
+## Free-Floating Label (Body/Detail)
+
+```html
+<text x="100" y="100" fill="#64748b" font-size="14"
+      font-family="Inter, system-ui, sans-serif">
+  Description or annotation
+</text>
+```
+
+---
+
+## Small Marker Dot
+
+```html
+<circle cx="100" cy="100" r="6" fill="#3b82f6" stroke="#1e3a5f" stroke-width="1" />
+```
+
+---
+
+## Structural Line (Divider)
+
+```html
+<line x1="0" y1="250" x2="800" y2="250"
+      stroke="#e2e8f0" stroke-width="1" stroke-dasharray="4 4" />
+```
+
+---
+
+## Section Group
+
+```html
+<g id="section-name" aria-label="Section: Name">
+  <!-- Background region (optional) -->
+  <rect x="80" y="60" width="400" height="300" rx="12" ry="12"
+        fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" opacity="0.5" />
+  <!-- Section title -->
+  <text x="100" y="90" fill="#1e40af" font-size="18" font-weight="600"
+        font-family="Inter, system-ui, sans-serif">
+    Section Name
+  </text>
+  <!-- Section contents go here -->
+</g>
+```
+
+---
+
+## Expandable/Collapsible Group
+
+```html
+<g id="expandable-group" class="expandable" role="button" tabindex="0"
+   aria-label="Click to expand" aria-expanded="false" data-interactive="true">
+  <!-- Header (always visible) -->
+  <rect x="100" y="100" width="200" height="40" rx="6" ry="6"
+        fill="var(--c-primary-fill)" stroke="var(--c-primary-stroke)" stroke-width="2" />
+  <text x="120" y="125" fill="var(--c-text-on-light)" font-size="14"
+        font-family="Inter, system-ui, sans-serif">
+    ▶ Module Name
+  </text>
+  <!-- Detail (hidden by default) -->
+  <g id="expandable-group-detail" style="display:none;">
+    <!-- Child elements -->
+  </g>
+</g>
+```
+
+### Expand/Collapse JS:
+```js
+document.querySelectorAll('.expandable').forEach(group => {
+  group.addEventListener('click', () => {
+    const detail = group.querySelector('[id$="-detail"]');
+    const expanded = group.getAttribute('aria-expanded') === 'true';
+    detail.style.display = expanded ? 'none' : '';
+    group.setAttribute('aria-expanded', !expanded);
+    const label = group.querySelector('text');
+    label.textContent = label.textContent.replace(/[▶▼]/, expanded ? '▶' : '▼');
+  });
+});
+```
+
+---
+
+## AI/LLM Node
+
+```html
+<g id="node-llm" class="interactive-node" role="button" tabindex="0"
+   aria-label="LLM Processing" data-interactive="true">
+  <rect x="100" y="100" width="200" height="100" rx="12" ry="12"
+        fill="var(--c-ai-fill)" stroke="var(--c-ai-stroke)" stroke-width="2"
+        class="node-bg" />
+  <text x="200" y="140" text-anchor="middle" dominant-baseline="central"
+        fill="var(--c-ai-stroke)" font-size="16" font-weight="600"
+        font-family="Inter, system-ui, sans-serif">
+    LLM
+  </text>
+  <text x="200" y="165" text-anchor="middle" dominant-baseline="central"
+        fill="var(--c-text-body)" font-size="12"
+        font-family="Inter, system-ui, sans-serif">
+    Claude Opus 4.6
+  </text>
+</g>
+```

package/skills/diagram-master/references/examples/README.md

@@ -0,0 +1,69 @@
+# 레퍼런스 다이어그램 예시
+
+diagram-master가 생성해야 할 **목표 품질 수준**의 참조 이미지.
+Nano Banana 2의 `--ref` 입력으로도 직접 사용 가능.
+
+---
+
+## 1. ref_grid_architecture.png — 그리드 시스템 아키텍처
+
+**원본**: SmartDocs - Intelligent Multilingual PDF Q&A System
+
+### 스타일 특징
+- **그리드 레이아웃**: 11개 섹션이 3행 구조로 정렬 (Input → Processing → Output)
+- **색상 코딩**: 섹션별 고유 배경 그라데이션 (노랑=Input, 초록=Detection, 빨강=Security, 보라=Chunking 등)
+- **컴포넌트 카드**: 각 섹션 내 흰 배경 카드에 아이콘 + 컴포넌트명 + 설명 텍스트
+- **아이콘 활용**: 각 카드 우상단에 의미 전달 아이콘 (톱니바퀴, 방패, DB 등)
+- **범례**: 우상단에 Active Flow / Future Enhancement / Processing Step Number 구분
+- **깔끔한 타이포그래피**: 제목(Bold) → 섹션명(Medium) → 설명(Regular) 계층
+
+### 최적 엔진 매핑
+| 엔진 | 적합도 | 이유 |
+|------|--------|------|
+| **SVG interactive** | 최적 | 섹션별 hover, 웹 배포, 색상 코딩 정밀 제어 |
+| **Nano Banana 2** | 좋음 | `--ref`로 전달 시 유사 스타일 재생성 가능 |
+| **Excalidraw** | 가능 | 자유 배치이지만 그리드 정밀도 부족 |
+| Mermaid | 부적합 | 그리드 레이아웃 + 배경색 그라데이션 불가 |
+
+---
+
+## 2. ref_layered_flow.png — 레이어드 아키텍처 플로우
+
+**원본**: Mem0 Memory Architecture - Personalized AI Memory Layer for LLM Applications
+
+### 스타일 특징
+- **레이어 구분**: 4개 수평 레이어 (Input / Memory Manager / Storage / Output) 배경색으로 구분
+- **다양한 화살표**: API/Control flow(파랑), Memory write(녹색), Memory read(보라), Data transform(주황) 색상별 구분
+- **아이콘 혼합**: 사용자 아이콘, DB 심볼, 문서 아이콘 등 도메인 아이콘
+- **메서드 라벨**: 화살표 위에 `store()`, `retrieve()`, `update()` 등 API 메서드 표기
+- **코드 스니펫**: Storage Layer의 Key-Value Store에 실제 데이터 예시 (`user_123`, `likes Python`)
+- **범례**: 하단에 4가지 화살표 유형 범례
+
+### 최적 엔진 매핑
+| 엔진 | 적합도 | 이유 |
+|------|--------|------|
+| **Excalidraw** | 최적 | 자유 배치, Evidence Artifacts(코드 스니펫), 곡선 화살표 |
+| **SVG interactive** | 좋음 | 레이어 토글, 화살표 hover 시 상세 표시 |
+| **Nano Banana 2** | 좋음 | 전체적 시각 품질 재생성 |
+| Mermaid | 부분적 | 기본 흐름은 가능하나 다중 화살표 색상/레이어 배경 한계 |
+
+---
+
+## 사용 방법
+
+### Nano Banana 2 --ref로 스타일 참조
+```bash
+cd ./references
+uv run python render_nanobannana2.py \
+  "이 아키텍처 스타일로 우리 시스템 다이어그램을 그려줘: [시스템 설명]" \
+  --ref examples/ref_grid_architecture.png \
+  --output my_architecture.png
+```
+
+### 다이어그램 생성 시 품질 기준
+이 두 이미지의 공통 특성이 **목표 품질 기준**:
+1. **시맨틱 색상 코딩** — 기능별 색상 구분
+2. **계층적 타이포그래피** — 제목 → 컴포넌트명 → 설명
+3. **Evidence Artifacts** — 실제 코드, 메서드명, 데이터 예시
+4. **범례** — 화살표/색상의 의미 명시
+5. **여백과 정렬** — 깔끔한 간격, 시각적 호흡

package/skills/diagram-master/references/pyproject.toml

@@ -0,0 +1,16 @@
+[project]
+name = "diagram-master"
+version = "2.0.0"
+description = "Diagram Master - unified renderer for all diagram engines"
+requires-python = ">=3.11"
+dependencies = [
+    "matplotlib>=3.9",
+    "numpy>=1.26",
+    "pillow>=10.0",
+    "google-generativeai>=0.8",
+    "playwright>=1.40.0",
+    "pymupdf>=1.27.2.2",
+]
+
+[tool.uv]
+package = false

package/skills/diagram-master/references/quality-checklist.md

@@ -0,0 +1,33 @@
+# Anti-AI 품질 체크리스트
+
+다이어그램 생성 후 반드시 검증. (markdown-viewer/skills infocard 참고)
+
+## 필수 검증 항목
+
+### 레이아웃
+- [ ] **균등 타일 금지** — 모든 박스가 같은 크기/같은 간격이면 AI 냄새. 의미에 따라 크기 차등
+- [ ] **중앙 정렬 hero 금지** — 비대칭 레이아웃이 더 자연스러움
+- [ ] **수학적 정밀 간격** — 눈대중이 아닌 일관된 spacing 시스템 사용
+
+### 색상
+- [ ] **순수 검정(#000000) 금지** — off-black 사용 (#1a1a2e, #0f172a 등)
+- [ ] **네온 그라디언트 금지** — AI glow 느낌 배제
+- [ ] **시맨틱 색상** — 의미에 맞는 색상 사용 (성공=녹색, 경고=주황, 오류=빨강)
+- [ ] **단일 색상 팔레트** — 한 다이어그램에서 색상 소스 통일
+
+### 콘텐츠
+- [ ] **필러 데이터 금지** — "99.99%", "50%", "Lorem ipsum" 등 AI 생성 느낌
+- [ ] **AI 용어 금지** — "empower", "seamless", "unleash", "cutting-edge" 자제
+- [ ] **Evidence Artifacts** — 실제 코드, 실제 데이터, 실제 이벤트명 사용
+- [ ] **Isomorphism Test** — 텍스트를 제거해도 구조만으로 개념 전달 가능한가?
+
+### 기술적
+- [ ] **렌더링 검증** — 생성 후 반드시 PNG로 렌더링하여 시각적 확인
+- [ ] **한글 깨짐 확인** — 한글 폰트가 올바르게 적용되었는지
+- [ ] **수식 렌더링 확인** — KaTeX/mathtext 수식이 깨지지 않았는지
+- [ ] **해상도 적절성** — scale/DPI가 충분한지 (인쇄용 300 DPI, 웹용 150+ DPI)
+
+### 대형 다이어그램
+- [ ] **섹션별 빌드** — 한 번에 전체 생성하지 않고 섹션 단위로 점진적 구축
+- [ ] **노드 30개 초과 시 분할** — 하나의 다이어그램에 너무 많은 노드 금지
+- [ ] **시각적 계층** — Overview → Detail 멀티줌 구조

package/skills/diagram-master/references/routing-guide.md

@@ -0,0 +1,164 @@
+# 엔진 선택 상세 가이드
+
+## 실행 모드
+
+| 모드 | 키워드 | 동작 |
+|------|--------|------|
+| **auto** (기본) | 별도 지정 없음 | PDF 원본 추출 우선, 나머지만 엔진으로 생성 |
+| **recreate** | "재생성", "다시 그려", "스킬로", "recreate", "새로 만들어" | PDF 추출 스킵, 모든 다이어그램을 엔진으로 새로 생성 |
+
+### recreate 모드 워크플로우
+
+```
+1. PDF 원본의 다이어그램을 Read tool로 시각적으로 분석
+2. 구조, 레이블, 데이터 값, 축 범위 등을 추출
+3. 콘텐츠 유형에 따라 최적 엔진 자동 선택 (Step 1~5)
+4. 엔진으로 동일 내용을 새로 생성 (통일된 스타일)
+5. 원본과 비교 검증
+```
+
+**장점**: 편집 가능, 해상도 무손실, 스타일 통일, 웹 인터랙티브 가능
+
+## Decision Tree (순서대로 판단)
+
+```
+┌─────────────────────────────────────────────────────┐
+│ Step 0: 모드 판단                                    │
+│   → recreate 모드: Step 0a 스킵, Step 1로 직행       │
+│   → auto 모드(기본): Step 0a로                       │
+├─────────────────────────────────────────────────────┤
+│ Step 0a: PDF에 이미 고품질 다이어그램이 있는가?       │
+│  [auto 모드 전용]                                    │
+│   → YES: PDF 추출 (재생성 불필요)                   │
+│   → NO: Step 1로                                    │
+├─────────────────────────────────────────────────────┤
+│ Step 1: 사용자가 엔진을 명시했는가?                  │
+│   "mermaid로", "matplotlib으로", "excalidraw로" 등   │
+│   → YES: 해당 엔진 사용                             │
+│   → NO: Step 2로                                    │
+├─────────────────────────────────────────────────────┤
+│ Step 2: 인터랙티브 요청인가?                         │
+│   키워드: interactive, 버튼, 토글, 호버, 클릭        │
+│   → YES + 대규모 데이터(1000+): D3.js               │
+│   → YES + 일반: SVG interactive                     │
+│   → NO: Step 3으로                                  │
+├─────────────────────────────────────────────────────┤
+│ Step 3: 수학적 정밀도가 필요한가?                    │
+│   함수 곡선, 분포, 히스토그램, 축/눈금 정밀,          │
+│   3D plot, contour, 회귀선, 경제학 모델 곡선         │
+│   → YES: Matplotlib                                 │
+│   → NO: Step 4로                                    │
+├─────────────────────────────────────────────────────┤
+│ Step 4: 자유형 레이아웃이 필요한가?                   │
+│   비정형 배치, 손그림 느낌, 곡선 연결,                │
+│   정해진 그리드에 맞지 않는 구조                      │
+│   → YES: Excalidraw                                 │
+│   → NO: Step 5로                                    │
+├─────────────────────────────────────────────────────┤
+│ Step 5: 기본 — Mermaid                              │
+│   흐름도, 구조도, 시퀀스, 상태, ER, 타임라인,         │
+│   간트, 마인드맵, 클래스, 파이 차트 등                │
+│   → 컨텍스트가 가장 단순하고 범용적                   │
+└─────────────────────────────────────────────────────┘
+```
+
+## 엔진별 최적 시나리오 매트릭스
+
+### Mermaid (기본, 최우선)
+
+| 적합 | 예시 |
+|------|------|
+| 프로세스/워크플로우 | 회원가입 흐름, CI/CD 파이프라인 |
+| 구조/계층 | 조직도, 시스템 아키텍처, 모듈 구조 |
+| 상태 전이 | TCP 상태, 주문 상태, 게임 FSM |
+| 시퀀스 | API 호출 순서, 인증 흐름 |
+| 관계 모델 | ER 다이어그램, 클래스 다이어그램 |
+| 시간 기반 | 타임라인, 간트 차트, 마일스톤 |
+| 분류/범주 | 마인드맵, 파이 차트 |
+| 수식 포함 구조도 | `@svg-katex` + `render_mermaid_katex.py` |
+
+### Matplotlib (수학/과학 정밀)
+
+| 적합 | 예시 |
+|------|------|
+| 함수 곡선 | sin/cos, 다항식, 지수/로그 |
+| 경제학 모델 | 수요/공급, IS-LM, AD-AS, 필립스 곡선 |
+| 통계 분포 | 정규, 포아송, 이항, t-분포 |
+| 데이터 차트 | 히스토그램, boxplot, violin, scatter |
+| 히트맵 | 상관행렬, confusion matrix |
+| 3D 시각화 | surface, wireframe, contour |
+| 정밀 축 | 로그 스케일, 다중 축, 커스텀 틱 |
+| 수학 수식 라벨 | LaTeX 수식이 축/제목에 필요할 때 |
+
+### Excalidraw (자유형)
+
+| 적합 | 예시 |
+|------|------|
+| 개념 스케치 | 아이디어 브레인스토밍, 초기 설계 |
+| 비정형 구조 | 자유 배치가 핵심인 아키텍처 |
+| 손그림 느낌 | 프레젠테이션용 친근한 다이어그램 |
+| 곡선 연결 | 부드러운 곡선이 필요한 연결선 |
+| Evidence Artifacts | 코드 조각, JSON 포함 상세 다이어그램 |
+
+### Nano Banana 2 (AI 이미지 생성)
+
+| 적합 | 예시 |
+|------|------|
+| 해부학/의학 도면 | 인체 구조, 세포 다이어그램, 장기 단면 |
+| 지리적 지도 | 특정 지역 지도, 지정학적 시각화 |
+| 복잡한 인포그래픽 | 다단 레이아웃, 아이콘+텍스트+데이터 혼합 |
+| 일러스트 스타일 | 교과서급 컬러 도면, 기술 일러스트 |
+| 코드 비효율 도면 | 건축, 회로, 기계 장치 등 코드로 그리기 비현실적 |
+| 참고 이미지 재생성 | PDF 원본을 `--ref`로 전달 → 깔끔한 버전 재생성 |
+
+**명시 트리거**: "나노바나나", "nanobannana", "AI로 그려", "이미지로 생성"
+
+**auto 라우팅 기준**: 다른 코드 기반 엔진으로 표현이 비효율적인 복잡한 시각물
+
+**주의**: 출력이 래스터 이미지(PNG)이므로 편집 불가. 정밀한 데이터 정확도가 필요하면 Matplotlib, 편집 가능성이 필요하면 SVG/Excalidraw 사용.
+
+### SVG (웹 임베딩 / 인터랙티브)
+
+| 적합 | 예시 |
+|------|------|
+| 웹 배포용 | 블로그, 문서 사이트 임베딩 |
+| 호버/클릭 인터랙션 | 프로토콜 탐색, 레이어 토글 |
+| 애니메이션 | 입장 효과, 흐름 표시 |
+| 접근성 필요 | ARIA 라벨, 키보드 내비게이션 |
+
+### D3.js (대규모 데이터)
+
+| 적합 | 예시 |
+|------|------|
+| 네트워크 그래프 | 소셜 네트워크, 의존성 그래프 |
+| 지도 시각화 | choropleth, 지리 데이터 |
+| 대규모 데이터셋 | 1000+ 포인트 scatter, 실시간 |
+| 복잡한 인터랙션 | 드래그, 줌, 필터, 연결 탐색 |
+| 트리맵/선버스트 | 계층 데이터의 비례 시각화 |
+
+### PDF 추출 (재사용)
+
+| 적합 | 예시 |
+|------|------|
+| 교과서 다이어그램 | 이미 잘 그려진 도면 재사용 |
+| 복잡한 회로도 | 재생성이 비현실적인 전문 도면 |
+| 손필기 스캔 | 교수 판서 다이어그램 보존 |
+| 저작권 원본 | 원본 품질 유지가 중요할 때 |
+
+## 경계 사례 판단
+
+### Mermaid vs Matplotlib
+- 구조 + 수식 라벨 → Mermaid (`@svg-katex`)
+- 연속 곡선 + 정밀 축 → **Matplotlib**
+- XY 데이터 단순 차트 → Mermaid `xychart-beta`도 가능하지만, 축 커스터마이징이 필요하면 Matplotlib
+
+### Mermaid vs Excalidraw
+- 규칙적 그리드 배치 → **Mermaid**
+- 위치가 의미를 전달 (비선형 배치) → **Excalidraw**
+- 텍스트 중심 + 깔끔한 연결선 → **Mermaid**
+
+### SVG vs D3.js
+- 정적 다이어그램 + 간단 호버 → **SVG**
+- 데이터 바인딩 + 동적 업데이트 → **D3.js**
+- 노드 100개 미만 → **SVG**
+- 노드 100개 이상 → **D3.js**