feat: 가상화 문서들 추가

.agents/skills/technical-visualizer/SKILL.md

@@ -192,6 +192,16 @@ Load supporting guidance only as needed:
 
 `techviz build ... --document docs/<프로젝트>/final/document.md` 가 그 블록을 갱신한다.
 
+### Tech Log 파이프라인에서 불릴 때
+
+`running-tech-log-pipeline` 의 4단계가 이 스킬이다. 입력이 둘이라는 것만 다르다.
+
+- **무엇을 그릴지는 방금 쓴 기록 본문이 정한다.** 세 관문은
+  `../writing-tech-log-records/references/choosing-a-diagram.md` 에 있고, 그림이 주장하는
+  것을 기록 본문이 말하고 있어야 한다.
+- **그림의 사실은 SSOT 절이 댄다.** 기록은 SSOT 의 인용이라 줄 번호가 근거가 되지 못한다.
+  `prepare` 에는 `final/document.md` 를 넣고 절은 기록의 `source` 앵커로 지목한다.
+
 ### Tech Log 기록으로 옮길 때
 
 런의 `document.md` 는 마크다운 이미지로 그림을 싣지만, Studio 기록은 다르다. SVG 를 Studio 에 Asset 으로
@@ -203,10 +213,45 @@ Load supporting guidance only as needed:
 ```
 
 `references/code-tables-diagrams.md`(writing-tech-log-records)의 규칙이 함께 적용된다. 특히
-**`<text>` 는 이름만 담고 문장은 `<desc>` 와 옆 문단에 둔다.** 이 저장소의 기존 손그림 SVG 는 이 규칙을
+**`<text>` 는 이름만 담고 문장은 `<desc>` 와 옆 문단에 둔다.** `render` 뒤에 반드시 돌린다 —
+`spec.json` 의 `label`·`details`·edge `label` 이 그대로 `<text>` 가 되므로 스펙을 쓸 때부터 이름으로 쓴다.
+
+```bash
+python3 scripts/check-figure-text.py <프로젝트>       # <text> 가 전부 이름인가
+python3 scripts/check-figure-overlap.py <프로젝트>    # 상자와 라벨이 서로를 덮지 않는가
+```
+
+### 컴파일한 뒤 반드시 눈으로 본다
+
+**lint 는 라벨이 상자를 덮는 것을 못 잡는다.** 엣지가 노드를 지나가는 것(`edge-through-node`)은
+보지만 라벨은 앵커 점만 보고 폭을 재지 않는다. 그래서 `PASS` 인 그림에도 라벨이 상자에 먹히거나
+경계선 위에 얹히는 일이 생긴다. SVG 를 PNG 로 떠서 본다.
+
+```bash
+python3 scripts/preview-figure.py <프로젝트> -o /tmp/figs
+python3 scripts/preview-figure.py --file 그림.svg
+```
+
+지금까지 확인한 것:
+
+| 증상 | 원인 | 대응 |
+|---|---|---|
+| 엣지 라벨이 옆 상자에 먹힌다 | 라벨이 길다 | 라벨을 짧은 이름으로. 자세한 것은 노드 `details` 로 |
+| 라벨이 group 점선 위에 얹힌다 | `two-zone-pipeline` 은 지역 **안쪽** 엣지 라벨을 캔버스 top 에 고정한다 | 지역 안 엣지를 없애거나 `component-flow` + `groups` 로 바꾼다 |
+| 원기둥이 제목·항목을 덮는다 | `shape: cylinder` 에 `details` 가 많다 | `details` 를 줄이거나 `shape: box` | 이 저장소의 기존 손그림 SVG 는 이 규칙을
 어기고 문단과 각주 번호·커밋 해시를 캔버스 안에 넣어 두었다. 다시 만들 때 그 문장들은 본문으로 내린다.
 
 ### 그림을 만들기 전에
 
 `rewriting-technical-prose-naturally` 의 `## Figures` 를 먼저 읽는다. 옆 문단이 이미 말한 것을 상자와
 화살표로 다시 그린 그림은 만들지 않는다. 그림이 담아야 할 것은 순서·구조·측정값·실제 산출물이다.
+
+**표로 되는 것을 그림으로 그리지 않는다.** `comparison` 프로필은 연결성 검사에서 빠지기 때문에
+항목을 나란히 늘어놓기만 해도 lint 를 통과한다. 그것이 표다 — 표는 값을 비교하고 그림은
+포함·순서·경계처럼 자리로만 보이는 것을 맡는다. 스펙을 쓰기 전에 묻는다.
+
+> **관계선을 다 지워도 뜻이 남는가.** 남으면 표다. 마크다운 표로 쓴다.
+
+`verify-project-layout.py` 의 「표로 되는 그림」이 관계선 없이 항목마다 같은 수의 `details` 를
+늘어놓은 spec 을 센다. `comparison` 이 맞는 자리는 비교 자체가 자리로 드러나는 때다 — 겹치는
+범위, 갈라지는 경계처럼.