patent-block-diagram

특허 블록도 자동 작도 (.pbd 생성)

무엇을 하는가

자연어 도면 설명 → .pbd(에디터 네이티브 JSON) 작성 → 앱에 주입해 렌더 → 이미지 육안 검증 → 좌표 보정 → 출원용 3배 PNG 내보내기. 산출된 .pbd는 더블클릭하면 그 도면이 열린 상태로 에디터가 뜨므로, 이후 수정은 사람이 GUI에서 이어서 한다.

핵심 원칙: 반드시 렌더해서 눈으로 본다. 좌표만 보고 "됐겠지" 하면 반드시 겹친다. 최소 1회 렌더 → Read로 이미지 확인 → 보정 → 재렌더 루프를 돈다 (실전에서 3회전 걸렸다).

앱 위치와 실행

• 앱: $APP_DIR (Electron). 이 레포에 동봉된 에디터 소스는 patent-block-diagram-app/ 이며, 로컬 설치 위치를 $APP_DIR 로 잡는다 (예: ~/Desktop/patent-block-diagram). 최초 1회 cd "$APP_DIR" && npm install 로 Electron 의존성을 받는다.
• 평소 실행: 바탕화면 특허 블록도 에디터.vbs, 또는 .pbd 파일 더블클릭
• 작업용 실행(CDP 필요) — 반드시 --user-data-dir로 사용자 창과 분리한다:

cd "$APP_DIR" && \
  ./node_modules/.bin/electron.cmd . --remote-debugging-port=9222 \
    --user-data-dir="$TMP/pbd-agent" > /dev/null 2>&1 &
# CDP가 뜰 때까지 기다린 뒤 렌더
node "~/.claude/skills/patent-block-diagram/scripts/render_pbd.mjs" <입력.pbd> <출력.png> [scale]

⚠️ --user-data-dir 를 빼면 사용자 창을 빼앗는다. main.js 가 requestSingleInstanceLock() 을 쓰고 그 락은 userData 폴더 단위다. 같은 폴더로 띄우면 두 번째 프로세스는 즉시 종료되고 먼저 떠 있던 창(= 사용자가 쓰던 창, 또는 구버전 코드가 로드된 창)이 대신 잡힌다. 결과로 ① 내 테스트 도면이 사용자 화면에 나타나 사용자가 앱 버그로 오인하고, ② 방금 고친 코드가 아니라 옛 코드를 테스트하게 된다. 실측으로 둘 다 겪었다 (2026-08-04). 같은 이유로 taskkill //F //IM electron.exe 로 싹 죽이지 않는다 — 사용자가 편집 중인 창까지 날아간다.

render_pbd.mjs는 .pbd를 앱의 window._app.state에 주입하고 앱 자체 내보내기 함수로 PNG를 만든다. scale 2 = 검토용, 3 = 출원 제출용. 작업이 끝나면 _app.reset()으로 도면과 실행 취소 기록까지 비운다(state만 비우면 Ctrl+Z 한 번에 테스트 데이터가 되살아난다).

• 창이 좁게 열리면 CDP 클릭 좌표가 창 밖으로 나가 아무것도 맞지 않는다. 조작 테스트 전에 Emulation.setDeviceMetricsOverride로 1700×1000쯤 잡고, 끝나면 Emulation.clearDeviceMetricsOverride로 되돌린다.

.pbd 스키마 (= 앱의 저장 포맷, 그대로 JSON)

{
  "boxes": [
    { "id": 1, "x": 100, "y": 110, "w": 220, "h": 80,
      "text": "사용자 인터페이스부",   // \n 으로 줄바꿈 (2줄 권장, 3줄 이상은 h 키울 것)
      "shape": "rect",                // rect | round | diamond | cylinder | cloud | person
      "fs": 15,                       // (옵션) 글자 크기. 없으면 기본 15, 줄 간격은 비례해서 따라간다
      "dash": true,                   // (옵션) 점선 테두리 — 폐쇄망·시스템 경계용
      "noFrame": true,                // (옵션) 테두리·음영·채움 없이 글자만 — 주석·라벨용 (dash와 배타)
      "noShadow": true,               // (옵션) 음영만 뺀다 — 컨테이너 안의 패널처럼 겹칠 때
      "textTop": true,                // (옵션) 글자를 가운데가 아니라 위쪽에 — 컨테이너용
      "hatch": true,                  // (옵션) 채움. true = 45° 빗금, "dot" = 점무늬(더 연해 글자가 잘 읽힌다).
                                      //        회색 음영 대신 쓰는 구분 표시. 툴바 `채움바꾸기` = 흰칠→빗금→점무늬 순환.
                                      //        hatch 를 주면 dash·noFrame 은 지워진다(겸용 불가)
      "lw": 5,                        // (옵션) 테두리 두께(기본 2) — 표의 강조 행 등
      "math": true,                   // (옵션) text 를 LaTeX 수식으로 조판 (아래 "수식" 절)
      "z": 10 },                      // 작을수록 아래. 컨테이너는 반드시 가장 작게
    { "id": 9, "x": 900, "y": 100, "w": 400, "h": 260,  // 이미지 상자
      "text": "", "shape": "image",
      "imgId": "i7",                  // _images 의 키. 테두리·음영·글자 없이 그림만 그린다
      "origImgId": "i7",              // 투명 처리 전 원본 (앱의 `이미지 원본` 버튼이 쓴다)
      "z": 20 }
  ],
  "arrows": [
    { "id": 30, "from": 2, "to": 4, "style": "ortho", "z": 2,    // ortho(직각) | straight(직선)
      "dash": true,                         // (옵션) 점선 화살표 — 산출·참조·포함 관계
      "via": [{ "x": 340, "y": 1440 }],     // (옵션) 경유점(절대좌표). 지정하면 자동 라우팅·꺾임을 무시하고
                                            //        이 점들을 그대로 지난다. 여백으로 돌아가는 회귀선용
      "fromOff": { "dx": 240, "dy": 40 },   // (옵션) 시작점을 손으로 지정 — from 박스 좌상단 기준 상대좌표
      "toOff":   { "dx": 0,   "dy": 30 },   // (옵션) 끝점을 손으로 지정 — to 박스 좌상단 기준 상대좌표
      "bend":    { "axis": "x", "t": 0.25 } }  // (옵션) 중간 꺾임 위치 — 양 끝점 사이 비율 0~1 (기본 0.5)
  ],
  "tags": [
    { "id": 50, "boxId": 1, "label": "100", "dx": 82, "dy": -45, "z": 60 }
  ],
  "nextId": 70,  // 쓴 id의 최대값보다 크게
  "_images": {   // (이미지를 쓸 때만) imgId → data URL. 도면 파일 하나로 이식된다
    "i7": "data:image/png;base64,iVBORw0KGgo..."
  }
}