Repository navigation
feat(claude): excalidraw-diagram スキルを自作し、描画時の通信をなくす - #271
Merged
Merged
Conversation
…nderer The excalidraw-diagram skill was a third-party archive whose renderer imported Excalidraw from esm.sh on every render and had no license. Replace the renderer with a pinned local bundle (esbuild, fonts copied from the npm package) served from a fake origin to headless Chrome, aborting every other request and failing the render when any was aborted. SVG and PNG output is byte-identical to the old pipeline on the reference diagrams. The chezmoi external and its personal-only ignore are removed, the upstream files the new skill does not provide are listed in .chezmoiremove, and a run_onchange script installs and builds the renderer on every machine. Hermetic tests cover input validation and the asset path guard; an opt-in recipe renders fixtures through Chrome. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…emplates Write the skill in original wording: depth decision, layout and visual patterns, semantic palette, element templates derived from real diagrams, section-by-section builds, and a mandatory render, read, fix loop against the offline renderer. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…xist, keep dist/ on failed builds A skipped run exits 0, which chezmoi records as done for that script content, so a fresh machine never rebuilt after devbox installed pnpm. Embed the lookPath results in the script so its content changes when the tools appear. build.mjs now stages into dist.tmp and swaps it in only on success. render.mjs reports an unknown option with usage, refuses font requests that resolve to a directory, and reports write failures without leaving a PNG behind when the SVG cannot be written. Trim comments that restated history. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…lidraw-diagram guidance The two-line bound text in the template used the height and y of a single line. Use 2 * 16 * 1.25 = 40 and a centered y of 55, confirmed by rendering. Add short guidance on research without docs, one color per text element, diamond arrow targets, hand-written JSON versus coordinate-shifting scripts, and when rendering is optional. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
excalidraw-diagram スキルを自作のものに置き換え、描画時の通信をなくします。これまでは上流（coleam00/excalidraw-diagram-skill）を chezmoi external で取得していましたが、描画のたびに esm.sh から excalidraw、React、node の polyfill、フォントを取得していました。React は
^19.2.0の範囲指定で取得していたので、描画のたびに版が変わる可能性もありました。新しい描画スクリプトは、版を固定した npm パッケージを install 時に一度だけ取得し、esbuild で bundle にします。描画時は、ページ、bundle、フォントだけをローカルから返し、それ以外のリクエストはすべて止めます。1 件でも止めた場合は、何も書き出さずに失敗します。
上流にはライセンスがない（
gh api repos/coleam00/excalidraw-diagram-skill --jq .license.spdx_idが空）ので、SKILL.md、references、描画スクリプトはすべて新しく書きました。上流のファイルはコピーしていません。flowchart LR subgraph install["chezmoi apply（一度だけ）"] lock[pnpm-lock.yaml] --> pnpm["pnpm install --frozen-lockfile"] --> build["build.mjs"] --> dist["dist/ (bundle + fonts)"] end subgraph render["render.mjs（毎回）"] chrome[Chrome] -->|page.route| local["dist/ だけを返す"] chrome -->|それ以外| abort["abort → exit 1"] end dist --> localレビューの観点
renderer/render.mjs、renderer/lib.mjs（リクエストを返すか止めるかの判定と、入力の検証）、renderer/build.mjs（一時ディレクトリに build してから置き換える）、run_onchange_after_build-excalidraw-renderer.sh.tmplpnpm-lock.yaml（pnpm が生成）、external の項目と.chezmoiignoreの除外行の削除、旧ファイルの.chezmoiremoveへの追加SKILL.mdとreferences/。既定値（roughness: 0、fontFamily: 3）と、描画して画像を見て直す流れは、上流と同じ使い勝手にそろえています.chezmoiignoreから除外行を消したので、業務端末にも入ります。install 時には npm レジストリへの通信が1回発生します確認したこと
site/diagrams/*.excalidraw6 本と日本語のサンプル 1 本を、旧パイプライン（esm.sh）と新しい描画スクリプトで描画し、cmpで比較node render.mjs tests/skills/excalidraw-diagram/fixtures/outbound-request.excalidrawblocked 1 outbound request(s), nothing written:、exit 1、PNG は作られないjust test✓ All checks passed!guards.test.mjsの検査を 1 つずつ壊して実行chezmoi execute-template（設定は空の一時ファイル）# tools行に node と pnpm のパスが入る。存在しないツールに対するlookPathは空文字を返す6 図の描画時間は、旧パイプラインが 6.5 秒、新しい描画スクリプトが 3.9 秒でした（どちらも Chrome で計測）。
補足
--width× 1200）のままです。図の外枠から計算すると、PNG のピクセルが旧パイプラインとずれたためですpnpm-workspace.yamlのallowBuilds: { esbuild: false }は、esbuild の postinstall を承認しないという明示です。pnpm 12.9.0 で確認しました。esbuild はプラットフォーム別のバイナリで動きますchezmoi applyは、merge したあとに個人用 PC と業務用 PC の両方で確認しますwriting-funailog-articles/SKILL.md:89を新しいコマンドに書き換える PR を別に出します🤖 Generated with Claude Code