@ryan_nookpi/pi-skill-excalidraw 0.1.0

package/skills/excalidraw/app/src/main.jsx

@@ -0,0 +1,334 @@
+import {
+	CaptureUpdateAction,
+	convertToExcalidrawElements,
+	Excalidraw,
+	exportToBlob,
+	restoreElements,
+	serializeAsJSON,
+} from "@excalidraw/excalidraw";
+import "@excalidraw/excalidraw/index.css";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import {
+	contentKey,
+	convertMixed,
+	isSkeleton,
+	recenterLabels,
+	repairScene,
+	sameContent,
+	sceneSig,
+	threeWayMerge,
+} from "./scene.js";
+
+const params = new URLSearchParams(location.search);
+const FILE_ID = params.get("file");
+const TOKEN = params.get("token");
+const CLIENT_ID = crypto.randomUUID();
+const SAVE_DEBOUNCE_MS = 400;
+const RESTORE_OPTS = { refreshDimensions: true, repairBindings: true };
+const randomNonce = () => Math.floor(Math.random() * 2 ** 31);
+
+async function api(pathname, init = {}) {
+	return fetch(`/api/files/${FILE_ID}${pathname}`, {
+		...init,
+		headers: { "x-excal-token": TOKEN, ...(init.headers || {}) },
+	});
+}
+
+/** Parse file content and turn skeleton / mermaid input into full elements. */
+async function prepareScene(content, prevElements = []) {
+	const data = JSON.parse(content);
+	let elements = Array.isArray(data.elements) ? data.elements : [];
+	let normalized = false;
+	if (typeof data.pendingMermaid === "string" && data.pendingMermaid.trim()) {
+		// A mermaid import replaces the diagram. Node ids are stable, so
+		// re-importing an edited .mmd updates the same elements in place.
+		const { parseMermaidToExcalidraw } = await import("@excalidraw/mermaid-to-excalidraw");
+		const { elements: skel } = await parseMermaidToExcalidraw(data.pendingMermaid, {
+			themeVariables: { fontSize: "20px" },
+		});
+		elements = convertToExcalidrawElements(skel, { regenerateIds: false });
+		normalized = true;
+	}
+	if (elements.some(isSkeleton)) {
+		elements = convertMixed(elements);
+		normalized = true;
+	}
+	const repaired = repairScene(elements, prevElements);
+	if (repaired.changed) {
+		elements = repaired.elements;
+		normalized = true;
+	}
+	return { elements, appState: data.appState || {}, files: data.files || {}, normalized };
+}
+
+function describe(ids, elements) {
+	const byId = new Map(elements.map((e) => [e.id, e]));
+	const labelOf = (id) => {
+		const el = byId.get(id);
+		if (!el) return null;
+		if (el.type === "text") return el.text;
+		const t = (el.boundElements || []).find((b) => b.type === "text");
+		return t ? byId.get(t.id)?.text : null;
+	};
+	const named = ids.map(labelOf).filter(Boolean);
+	if (!named.length) return `요소 ${ids.length}개`;
+	const head = `"${named[0].split("\n")[0].slice(0, 20)}"`;
+	return ids.length > 1 ? `${head} 외 ${ids.length - 1}개` : head;
+}
+
+function App() {
+	const [excalidrawAPI, setAPI] = useState(null);
+	const [status, setStatus] = useState("연결 중");
+	const s = useRef({
+		rev: 0,
+		ready: false,
+		lastSig: "",
+		lastError: null,
+		baseline: new Map(),
+		saveTimer: null,
+		queue: Promise.resolve(),
+		firstLoad: true,
+	}).current;
+
+	// Serialize all scene mutations (remote apply / save) so they never interleave.
+	const enqueue = useCallback((fn) => {
+		s.queue = s.queue.then(fn).catch((err) => {
+			console.error(err);
+			s.lastError = err.message;
+			setStatus(`오류: ${err.message}`);
+		});
+		return s.queue;
+	}, []);
+
+	const setBaseline = (elements) => {
+		s.baseline = new Map(elements.map((e) => [e.id, { version: e.version, key: contentKey(e) }]));
+	};
+
+	const save = useCallback(async () => {
+		const API = excalidrawAPI;
+		const elements = API.getSceneElementsIncludingDeleted();
+		const content = serializeAsJSON(elements, API.getAppState(), API.getFiles(), "local");
+		setStatus("저장 중");
+		const res = await api("/scene", {
+			method: "PUT",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({ baseRev: s.rev, content, clientId: CLIENT_ID }),
+		});
+		if (res.status === 409) {
+			const { rev, content: remote } = await res.json();
+			await applyRemote(remote, rev);
+			return;
+		}
+		if (!res.ok) throw new Error(`save failed ${res.status}`);
+		s.rev = (await res.json()).rev;
+		s.lastSig = sceneSig(elements);
+		setBaseline(elements.filter((e) => !e.isDeleted));
+		setStatus("동기화됨");
+	}, [excalidrawAPI]);
+
+	const applyRemote = useCallback(
+		async (content, rev) => {
+			const API = excalidrawAPI;
+			const local = API.getSceneElementsIncludingDeleted();
+			const prepared = await prepareScene(content, local);
+			// Label centering needs the text size re-measured by restoreElements.
+			const { elements: remote } = recenterLabels(restoreElements(prepared.elements, local, RESTORE_OPTS));
+			// Anything restore/recenter fixed (dangling bindings, text size, label
+			// position) must reach the file too, not just the canvas.
+			const writeBack = prepared.normalized || !sameContent(prepared.elements, remote);
+
+			const dirty = sceneSig(local) !== s.lastSig && !s.firstLoad;
+			let { elements, keptLocal } = dirty
+				? threeWayMerge(s.baseline, remote, local)
+				: { elements: remote, keptLocal: 0 };
+
+			// Elements removed in the file become tombstones and changed ones get a
+			// version bump; otherwise Excalidraw's store sees no change and Cmd+Z
+			// would skip (and later clobber) the external edit.
+			const localById = new Map(local.map((e) => [e.id, e]));
+			const ids = new Set(elements.map((e) => e.id));
+			elements = [
+				...elements,
+				...local.filter((l) => !l.isDeleted && !ids.has(l.id)).map((l) => ({ ...l, isDeleted: true })),
+			];
+			elements = elements.map((e) => {
+				const l = localById.get(e.id);
+				if (!l || contentKey(l) === contentKey(e)) return e;
+				return { ...e, version: Math.max(l.version, e.version) + 1, versionNonce: randomNonce() };
+			});
+
+			const changedIds = new Set();
+			for (const e of elements) {
+				const l = localById.get(e.id);
+				if (l && contentKey(l) === contentKey(e)) continue;
+				if (!l && e.isDeleted) continue;
+				changedIds.add(e.type === "text" && e.containerId ? e.containerId : e.id);
+			}
+
+			API.updateScene({
+				elements,
+				appState: prepared.appState.viewBackgroundColor
+					? { viewBackgroundColor: prepared.appState.viewBackgroundColor }
+					: {},
+				captureUpdate: s.firstLoad ? CaptureUpdateAction.NEVER : CaptureUpdateAction.IMMEDIATELY,
+			});
+			if (Object.keys(prepared.files).length) API.addFiles(Object.values(prepared.files));
+			if (s.firstLoad) {
+				API.scrollToContent(undefined, { fitToContent: true });
+				s.firstLoad = false;
+			} else if (changedIds.size) {
+				API.setToast({
+					message: `파일 변경 반영: ${describe([...changedIds], elements)} (Cmd+Z로 취소)`,
+					duration: 2500,
+				});
+			}
+
+			s.rev = rev;
+			s.lastError = null;
+			const now = API.getSceneElementsIncludingDeleted();
+			s.lastSig = sceneSig(now);
+			const nowById = new Map(now.map((e) => [e.id, e]));
+			s.baseline = new Map(
+				remote.map((r) => [r.id, { version: nowById.get(r.id)?.version ?? r.version, key: contentKey(r) }]),
+			);
+			s.ready = true;
+			setStatus("동기화됨");
+			if (writeBack || keptLocal > 0) await save();
+		},
+		[excalidrawAPI, save],
+	);
+
+	const snapshot = useCallback(
+		async ({ reqId, rev }) => {
+			const API = excalidrawAPI;
+			const post = (body, type) =>
+				fetch(`/api/snapshots/${reqId}`, {
+					method: "POST",
+					headers: { "x-excal-token": TOKEN, "content-type": type },
+					body,
+				});
+			const deadline = Date.now() + 5000;
+			while (s.rev < rev && Date.now() < deadline) await new Promise((r) => setTimeout(r, 100));
+			await s.queue;
+			if (s.rev < rev) {
+				const why = s.lastError ? `: ${s.lastError}` : "";
+				await post(
+					JSON.stringify({ error: `창이 최신 파일(rev ${rev})을 반영하지 못했습니다 (현재 rev ${s.rev})${why}` }),
+					"application/json",
+				);
+				return;
+			}
+			await document.fonts.ready;
+			try {
+				const blob = await exportToBlob({
+					elements: API.getSceneElements(),
+					appState: { ...API.getAppState(), exportBackground: true, exportWithDarkMode: false },
+					files: API.getFiles(),
+					mimeType: "image/png",
+					exportPadding: 24,
+					getDimensions: (w, h) => {
+						const scale = Math.min(2, 4000 / Math.max(w, h, 1));
+						return { width: w * scale, height: h * scale, scale };
+					},
+				});
+				await post(blob, "image/png");
+			} catch (err) {
+				await post(JSON.stringify({ error: err.message }), "application/json");
+			}
+		},
+		[excalidrawAPI],
+	);
+
+	useEffect(() => {
+		if (!excalidrawAPI) return;
+		window.__excal = { api: excalidrawAPI, state: s };
+		const loadLatest = () =>
+			enqueue(async () => {
+				const res = await api("/scene");
+				if (!res.ok) throw new Error(`load failed ${res.status}`);
+				const { rev, content, name } = await res.json();
+				document.title = `${name} · Excalidraw`;
+				if (rev !== s.rev) await applyRemote(content, rev);
+			});
+		const handlers = {
+			hello: () => loadLatest(),
+			scene: ({ rev, content }) => enqueue(() => (rev > s.rev ? applyRemote(content, rev) : undefined)),
+			snapshot: (data) => snapshot(data),
+			problem: ({ message }) => {
+				excalidrawAPI.setToast({ message, closable: true, duration: 6000 });
+				setStatus("파일 오류");
+			},
+		};
+
+		// WebSocket instead of SSE: SSE holds one of Chrome's 6 HTTP/1.1
+		// connections per origin, so a 6th window would starve every save.
+		let ws;
+		let retry = 0;
+		let closed = false;
+		let timer;
+		const connect = () => {
+			const proto = location.protocol === "https:" ? "wss" : "ws";
+			ws = new WebSocket(`${proto}://${location.host}/api/files/${FILE_ID}/ws?clientId=${CLIENT_ID}&token=${TOKEN}`);
+			ws.onopen = () => (retry = 0);
+			ws.onmessage = (m) => {
+				const { event, data } = JSON.parse(m.data);
+				handlers[event]?.(data);
+			};
+			ws.onclose = () => {
+				if (closed) return;
+				setStatus("연결 끊김, 재시도 중");
+				timer = setTimeout(connect, Math.min(5000, 300 * 2 ** retry++));
+			};
+		};
+		connect();
+		return () => {
+			closed = true;
+			clearTimeout(timer);
+			ws.close();
+		};
+	}, [excalidrawAPI]);
+
+	const onChange = useCallback(
+		(elements) => {
+			if (!s.ready) return;
+			if (sceneSig(elements) === s.lastSig) return;
+			setStatus("변경됨");
+			clearTimeout(s.saveTimer);
+			s.saveTimer = setTimeout(
+				() =>
+					enqueue(() =>
+						sceneSig(excalidrawAPI.getSceneElementsIncludingDeleted()) !== s.lastSig ? save() : undefined,
+					),
+				SAVE_DEBOUNCE_MS,
+			);
+		},
+		[excalidrawAPI, save],
+	);
+
+	if (!FILE_ID || !TOKEN)
+		return <p style={{ padding: 24 }}>file/token 파라미터가 없습니다. `excal open`으로 여세요.</p>;
+
+	return (
+		<Excalidraw
+			excalidrawAPI={setAPI}
+			onChange={onChange}
+			langCode="ko-KR"
+			UIOptions={{ canvasActions: { loadScene: false, saveToActiveFile: false } }}
+			renderTopRightUI={() => (
+				<span
+					style={{
+						font: "12px system-ui",
+						color: status === "동기화됨" ? "#2f9e44" : "#e8590c",
+						padding: "0 8px",
+						alignSelf: "center",
+					}}
+				>
+					● {status}
+				</span>
+			)}
+		/>
+	);
+}
+
+createRoot(document.getElementById("root")).render(<App />);

package/skills/excalidraw/app/src/scene.js

@@ -0,0 +1,247 @@
+import { convertToExcalidrawElements } from "@excalidraw/excalidraw";
+
+/** Elements written by the LLM in skeleton form have no numeric `version`. */
+export const isSkeleton = (el) => typeof el?.version !== "number";
+
+const ARROW_GAP = 6;
+
+function edgeT(shape, dx, dy) {
+	const hw = shape.width / 2;
+	const hh = shape.height / 2;
+	if (shape.type === "ellipse") return 1 / Math.sqrt((dx / hw) ** 2 + (dy / hh) ** 2);
+	if (shape.type === "diamond") return 1 / (Math.abs(dx) / hw + Math.abs(dy) / hh);
+	// rectangle / text / everything else: bounding box
+	return Math.min(dx === 0 ? Infinity : hw / Math.abs(dx), dy === 0 ? Infinity : hh / Math.abs(dy));
+}
+
+const SHAPE_TYPES = new Set(["rectangle", "ellipse", "diamond"]);
+
+const hasBox = (el) =>
+	el && [el.x, el.y, el.width, el.height].every((v) => typeof v === "number" && Number.isFinite(v));
+
+/**
+ * Skeleton arrows that only name `start.id` / `end.id` (no x/y) get coordinates
+ * computed from the two shapes: centre-to-centre, clipped at each shape's edge.
+ */
+export function autoRouteArrow(arrow, byId) {
+	if (arrow.type !== "arrow" && arrow.type !== "line") return arrow;
+	if (typeof arrow.x === "number" && typeof arrow.y === "number") return arrow;
+	const a = byId.get(arrow.start?.id);
+	const b = byId.get(arrow.end?.id);
+	if (!hasBox(a) || !hasBox(b)) return arrow;
+	const ca = { x: a.x + a.width / 2, y: a.y + a.height / 2 };
+	const cb = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+	const dx = cb.x - ca.x;
+	const dy = cb.y - ca.y;
+	const len = Math.hypot(dx, dy) || 1;
+	const ux = dx / len;
+	const uy = dy / len;
+	const ta = edgeT(a, dx, dy) * len + ARROW_GAP;
+	const tb = edgeT(b, -dx, -dy) * len + ARROW_GAP;
+	const sx = ca.x + ux * ta;
+	const sy = ca.y + uy * ta;
+	const ex = cb.x - ux * tb;
+	const ey = cb.y - uy * tb;
+	return {
+		...arrow,
+		x: sx,
+		y: sy,
+		width: Math.abs(ex - sx),
+		height: Math.abs(ey - sy),
+		points: [
+			[0, 0],
+			[ex - sx, ey - sy],
+		],
+	};
+}
+
+function mergeBound(a, b) {
+	const out = [...(a || [])];
+	for (const item of b || []) if (!out.some((x) => x.id === item.id)) out.push(item);
+	return out.length ? out : null;
+}
+
+/**
+ * Convert skeleton elements (possibly mixed with full elements) into full
+ * Excalidraw elements. Full elements are passed through untouched except for
+ * `boundElements`, which receives bindings created by skeleton arrows/labels.
+ */
+export function convertMixed(input) {
+	// An element rewritten as a skeleton (version removed) with a new `label`
+	// replaces its old bound text.
+	const relabeled = new Set(input.filter((e) => isSkeleton(e) && e.id && e.label).map((e) => e.id));
+	const elements = input.filter((e) => !(e.type === "text" && !isSkeleton(e) && relabeled.has(e.containerId)));
+	const byId = new Map(elements.filter((e) => e.id).map((e) => [e.id, e]));
+	const prepared = elements.map((el) => {
+		if (isSkeleton(el)) return autoRouteArrow(el, byId);
+		// Full frames carry membership in their children's `frameId`, not in
+		// `children`; the converter iterates `children` unguarded.
+		if ((el.type === "frame" || el.type === "magicframe") && !Array.isArray(el.children))
+			return { ...el, children: [] };
+		return el;
+	});
+	const converted = convertToExcalidrawElements(prepared, { regenerateIds: false });
+	const originals = new Map(elements.filter((e) => !isSkeleton(e)).map((e) => [e.id, e]));
+	return converted.map((c) => {
+		const orig = originals.get(c.id);
+		if (!orig) return c;
+		return {
+			...orig,
+			boundElements: mergeBound(orig.boundElements, c.boundElements),
+			// a skeleton frame may adopt existing full elements
+			frameId: c.frameId ?? orig.frameId ?? null,
+		};
+	});
+}
+
+function distToBox(px, py, el) {
+	const dx = Math.max(el.x - px, 0, px - (el.x + el.width));
+	const dy = Math.max(el.y - py, 0, py - (el.y + el.height));
+	return Math.hypot(dx, dy);
+}
+
+/**
+ * Post-processing for full elements edited by hand (before restoreElements):
+ * - straight bound arrows whose endpoints drifted away from their shapes
+ *   (because a shape was moved in the file) are re-routed;
+ * - shapes get back-references to arrows bound to them, and bound texts to
+ *   their containers, so Excalidraw keeps them attached when dragging.
+ */
+const geom = (e) => (e ? [e.x, e.y, e.width, e.height].map((v) => Math.round(v ?? 0)).join(",") : "");
+
+export function repairScene(elements, prevElements = []) {
+	const byId = new Map(elements.map((e) => [e.id, e]));
+	const prev = new Map(prevElements.map((e) => [e.id, e]));
+	const arrowGeom = (e) => (e ? geom(e) + JSON.stringify(e.points) : "");
+	let changed = false;
+	const out = elements.map((el) => {
+		if (el.isDeleted || el.type !== "arrow" || el.points?.length !== 2) return el;
+		const a = byId.get(el.startBinding?.elementId);
+		const b = byId.get(el.endBinding?.elementId);
+		if (!hasBox(a) || !hasBox(b)) return el;
+		const [p0, p1] = el.points;
+		const far = distToBox(el.x + p0[0], el.y + p0[1], a) > 30 || distToBox(el.x + p1[0], el.y + p1[1], b) > 30;
+		// a bound shape moved in the file while the arrow itself was left untouched
+		const pa = prev.get(el.id);
+		const shapeMoved =
+			pa &&
+			arrowGeom(pa) === arrowGeom(el) &&
+			((prev.has(a.id) && geom(prev.get(a.id)) !== geom(a)) || (prev.has(b.id) && geom(prev.get(b.id)) !== geom(b)));
+		if (!far && !shapeMoved) return el;
+		const routed = autoRouteArrow({ type: "arrow", start: { id: a.id }, end: { id: b.id } }, byId);
+		changed = true;
+		return { ...el, x: routed.x, y: routed.y, width: routed.width, height: routed.height, points: routed.points };
+	});
+	const outById = new Map(out.map((e) => [e.id, e]));
+	const addRef = (targetId, ref) => {
+		const t = outById.get(targetId);
+		if (!t || (t.boundElements || []).some((b) => b.id === ref.id)) return;
+		const next = { ...t, boundElements: [...(t.boundElements || []), ref] };
+		outById.set(targetId, next);
+		changed = true;
+	};
+	for (const el of out) {
+		if (el.isDeleted) continue;
+		if (el.type === "arrow") {
+			if (el.startBinding?.elementId) addRef(el.startBinding.elementId, { id: el.id, type: "arrow" });
+			if (el.endBinding?.elementId) addRef(el.endBinding.elementId, { id: el.id, type: "arrow" });
+		}
+		if (el.type === "text" && el.containerId) addRef(el.containerId, { id: el.id, type: "text" });
+	}
+	return { elements: out.map((e) => outById.get(e.id)), changed };
+}
+
+/**
+ * Keep bound labels positioned inside their containers. Must run after
+ * restoreElements({refreshDimensions}) so it uses the re-measured text size.
+ */
+export function recenterLabels(elements) {
+	const PAD = 5;
+	const byId = new Map(elements.map((e) => [e.id, e]));
+	let changed = false;
+	const out = elements.map((el) => {
+		if (el.isDeleted || el.type !== "text" || !el.containerId) return el;
+		const c = byId.get(el.containerId);
+		if (!c || !SHAPE_TYPES.has(c.type) || !hasBox(c) || !hasBox(el)) return el;
+		// non-rectangles use inner-box offsets for non-centred text; leave those to Excalidraw
+		if (c.type !== "rectangle" && (el.textAlign !== "center" || el.verticalAlign !== "middle")) return el;
+		const x =
+			el.textAlign === "left"
+				? c.x + PAD
+				: el.textAlign === "right"
+					? c.x + c.width - el.width - PAD
+					: c.x + (c.width - el.width) / 2;
+		const y =
+			el.verticalAlign === "top"
+				? c.y + PAD
+				: el.verticalAlign === "bottom"
+					? c.y + c.height - el.height - PAD
+					: c.y + (c.height - el.height) / 2;
+		if (Math.abs(x - el.x) <= 1 && Math.abs(y - el.y) <= 1) return el;
+		changed = true;
+		return { ...el, x, y };
+	});
+	return { elements: out, changed };
+}
+
+/** Same element ids with the same content (bookkeeping fields ignored). */
+export function sameContent(a, b) {
+	if (a.length !== b.length) return false;
+	const keys = new Map(a.map((e) => [e.id, contentKey(e)]));
+	return b.every((e) => keys.get(e.id) === contentKey(e));
+}
+
+const VOLATILE = new Set(["version", "versionNonce", "updated", "index", "seed"]);
+
+/**
+ * Content identity of an element, ignoring bookkeeping fields and sub-pixel
+ * drift from text re-measurement.
+ */
+export function contentKey(el) {
+	return JSON.stringify(el, (k, v) => (VOLATILE.has(k) ? undefined : typeof v === "number" ? Math.round(v) : v));
+}
+
+export function sceneSig(elements) {
+	let sum = 0;
+	for (const e of elements) sum += e.version;
+	return `${elements.length}:${sum}`;
+}
+
+/**
+ * Three-way merge between the last synced baseline, the incoming remote
+ * elements and the local scene. Remote wins on conflicting edits of the same
+ * element; purely local edits made since the baseline are preserved.
+ *
+ * baseline: Map<id, {version, key}>  (local version + content key at last sync)
+ */
+export function threeWayMerge(baseline, remote, local) {
+	const localById = new Map(local.map((e) => [e.id, e]));
+	const remoteIds = new Set(remote.map((e) => e.id));
+	let keptLocal = 0;
+	const out = [];
+	for (const r of remote) {
+		const l = localById.get(r.id);
+		const base = baseline.get(r.id);
+		const remoteChanged = !base || base.key !== contentKey(r);
+		const localChanged = l && base && l.version > base.version;
+		if (l && localChanged && !remoteChanged) {
+			out.push(l);
+			keptLocal++;
+		} else if ((!l || l.isDeleted) && base && !remoteChanged) {
+			// deleted locally, untouched remotely
+			if (l) out.push(l);
+			keptLocal++;
+		} else {
+			out.push(r);
+		}
+	}
+	for (const l of local) {
+		if (remoteIds.has(l.id) || l.isDeleted) continue;
+		const base = baseline.get(l.id);
+		if (!base || l.version > base.version) {
+			out.push(l); // new locally, or edited locally while deleted remotely
+			keptLocal++;
+		}
+	}
+	return { elements: out, keptLocal };
+}

package/skills/excalidraw/app/vite.config.js

@@ -0,0 +1,19 @@
+import fs from "node:fs";
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// Self-host Excalidraw fonts (offline + Korean Xiaolai fallback).
+const copyFonts = () => ({
+	name: "copy-excalidraw-fonts",
+	closeBundle() {
+		const src = path.resolve("node_modules/@excalidraw/excalidraw/dist/prod/fonts");
+		fs.cpSync(src, path.resolve("dist/fonts"), { recursive: true });
+	},
+});
+
+export default defineConfig({
+	plugins: [react(), copyFonts()],
+	define: { "process.env.IS_PREACT": JSON.stringify("false") },
+	build: { chunkSizeWarningLimit: 8000 },
+});

package/skills/excalidraw/assets/examples/flowchart.excalidraw

@@ -0,0 +1,19 @@
+{
+  "type": "excalidraw",
+  "version": 2,
+  "source": "pi-excalidraw",
+  "elements": [
+    { "type": "text", "id": "title", "x": 200, "y": 20, "text": "주문 처리 흐름", "fontSize": 28 },
+    { "type": "ellipse", "id": "start", "x": 240, "y": 90, "width": 160, "height": 64, "backgroundColor": "#b2f2bb", "fillStyle": "solid", "label": { "text": "시작" } },
+    { "type": "rectangle", "id": "order", "x": 220, "y": 214, "width": 200, "height": 72, "backgroundColor": "#a5d8ff", "fillStyle": "solid", "roundness": { "type": 3 }, "label": { "text": "주문 접수" } },
+    { "type": "diamond", "id": "stock", "x": 210, "y": 346, "width": 220, "height": 120, "backgroundColor": "#ffec99", "fillStyle": "solid", "label": { "text": "재고 있음?" } },
+    { "type": "rectangle", "id": "ship", "x": 220, "y": 526, "width": 200, "height": 72, "backgroundColor": "#a5d8ff", "fillStyle": "solid", "roundness": { "type": 3 }, "label": { "text": "배송 준비" } },
+    { "type": "rectangle", "id": "backorder", "x": 520, "y": 370, "width": 200, "height": 72, "backgroundColor": "#ffc9c9", "fillStyle": "solid", "roundness": { "type": 3 }, "label": { "text": "입고 대기 알림" } },
+    { "type": "arrow", "id": "a1", "start": { "id": "start" }, "end": { "id": "order" } },
+    { "type": "arrow", "id": "a2", "start": { "id": "order" }, "end": { "id": "stock" } },
+    { "type": "arrow", "id": "a3", "start": { "id": "stock" }, "end": { "id": "ship" }, "label": { "text": "예" } },
+    { "type": "arrow", "id": "a4", "start": { "id": "stock" }, "end": { "id": "backorder" }, "label": { "text": "아니오" } }
+  ],
+  "appState": { "viewBackgroundColor": "#ffffff", "gridSize": 20 },
+  "files": {}
+}

package/skills/excalidraw/references/setup.md

@@ -0,0 +1,27 @@
+# excalidraw 최초 설정
+
+빌드된 편집기 앱이 패키지에 들어 있어 따로 설치·빌드할 것은 없다. 창을 띄울 브라우저만 필요하다.
+
+## 확인
+
+```bash
+open -Ra "Google Chrome" && echo ok      # macOS
+```
+
+`ok`가 나오면 설정할 것이 없다. Linux는 `google-chrome`, `google-chrome-stable`, `chromium`, `chromium-browser` 중 하나가 PATH에 있으면 된다.
+
+## 설치 (1회)
+
+macOS는 Google Chrome이 필요하다. Chromium이나 다른 브라우저로는 창이 열리지 않는다.
+
+```bash
+brew install --cask google-chrome
+```
+
+또는 https://www.google.com/chrome/ 에서 내려받는다.
+
+## 참고
+
+- 창은 사용자 Chrome 프로필과 분리된 전용 프로필(`~/.cache/pi-excalidraw/chrome-profile`)로 열린다. 로그인 정보나 확장 프로그램은 공유되지 않는다.
+- 상태 디렉터리는 `EXCAL_STATE_DIR`로 바꿀 수 있다.
+- 브라우저 없이 쓰려면 `EXCAL_BROWSER=none`을 주고, 출력된 URL을 직접 연다. `lint`, `inspect`는 브라우저가 필요 없다.