빠른 브라우저 전용 다이어그램 도구 (소형 Figma / Excalidraw을 저장). 연락처 자동 스누핑 라인과 연결, 아이콘 드롭, 모든 자동 득점 한국어 백엔드 없음 — IndexedDB에서 라이브하며 단일 URL을 통해 공유할 수 있습니다.

스택

• ** 렌더링 : ** PixiJS v8 (WebGL) - GPU 가속, 렌더링 주문형. -State: nanostores — 작은 민감하는 원자. ** React 없음.**
• Persistence: idb-keyval를 통해 IndexedDB.
• ** 공유:** 보드 JSON → lz-string 압축 → 쿼리 문자열.
• 빌딩: Vite + TypeScript. 정적 파일로 배송( Dockerfile에서 nginx로 저장).

명령

Claude Code 기술 ( 스케치 랩으로 다이어그램 생성)

에이전트는 스케치 랩 GeneratedGraph] JSON을 방출하고 ?g=] URL을 엽니다. 기술이 앱으로 호스팅됩니다.

• 기술 파일 : https://sketchlab.webdevcody.com/skills/sketch-lab/SKILL.md

Claude 코드에 설치:

그런 다음 Claude Code를 다시 시작하고 스케치 랩 다이어그램을 요청합니다. 에이전트 빌드 https://sketchlab.webdevcody.com/?g= 를 열고 엽니다.

성능이 많은 모양으로 평평하게 유지되는 방법

• Dirty-set 업데이트, 전체 diffs. 행동은 nanostore and를 mutate

Sketch Lab

A fast, browser-only diagram tool (think a tiny Figma/Excalidraw). Draw shapes, connect them with auto-snapping lines, drop in icons, and everything auto-saves locally. No backend — boards live in IndexedDB and are shareable via a single URL.

Stack

• Rendering: PixiJS v8 (WebGL) — GPU-accelerated, render-on-demand.
• State: nanostores — tiny reactive atoms. No React.
• Persistence: IndexedDB via idb-keyval.
• Sharing: board JSON → lz-string compression → query string.
• Build: Vite + TypeScript. Ships as static files (served by nginx in the Dockerfile).

Commands

npm install
npm run dev       # local dev server (http://localhost:5173)
npm run build     # type-check + production build to dist/
npm run preview   # serve the production build

Claude Code skill (generate diagrams into Sketch Lab)

Agents can emit Sketch Lab GeneratedGraph JSON and open it with a ?g= URL. The skill is hosted with the app:

• Skill file: https://sketchlab.webdevcody.com/skills/sketch-lab/SKILL.md

Install into Claude Code:

mkdir -p ~/.claude/skills/sketch-lab
curl -fsSL https://sketchlab.webdevcody.com/skills/sketch-lab/SKILL.md \
  -o ~/.claude/skills/sketch-lab/SKILL.md

Then restart Claude Code and ask for a Sketch Lab diagram. The agent builds https://sketchlab.webdevcody.com/?g= and opens it.

How performance is kept flat with many shapes

• Dirty-set updates, not full diffs. Actions mutate the nanostore and tell the renderer exactly which node/edge ids changed (scene.updateNode(id)). Dragging one of thousands of shapes touches only that node + its incident edges.
• Render-on-demand. The Pixi ticker is stopped; app.render() is scheduled once per animation frame only when something is dirty.
• Per-view redraw guards. A shape’s Graphics is only re-tessellated when its geometry/style actually changes; moving it just sets a container transform.
• All hit-testing in world space (not Pixi’s event tree), so selection/marquee/ connect/resize are O(changed), and the camera is a single container transform.

Architecture

src/
  state/        types, nanostore atoms (store.ts), mutation actions (actions.ts)
  render/       Pixi scene singleton (scene.ts), shape/edge view builders,
                geometry/snapping math, vector icon registry
  interaction/  controller.ts (pointer/keyboard state machine), camera, viewport,
                text-editor overlay, "/" icon palette
  persistence/  IndexedDB (db.ts), autosave, URL share encode/decode
  ui/           dashboard, editor chrome (toolbar/colors/zoom), DOM helpers, router
  main.ts       hash router: editor (#/board/:id), ?b= board share, ?g= GeneratedGraph import

Shortcuts

V select · T text · R rectangle · O circle · L connector line ·