[{"data":1,"prerenderedAt":392},["ShallowReactive",2],{"content-/svg-diagram-pattern-library-due-diligence":3,"all-pages-for-dir":370,"related-/svg-diagram-pattern-library-due-diligence":371,"og-image-/svg-diagram-pattern-library-due-diligence":391},{"id":4,"title":5,"body":6,"category":351,"concepts":352,"description":353,"extension":354,"meta":355,"navigation":305,"ogImage":352,"path":356,"project_name":357,"published":358,"publishedAt":359,"seo":360,"source":361,"stem":362,"tags":363,"todo":352,"unpublished":358,"updatedAt":352,"__hash__":369},"pages/2026-08/2026-08-09/svg-diagram-pattern-library-due-diligence.md","公開されているClaude Code用の図解スキルを、クローンせずにデューデリジェンスした",{"type":7,"value":8,"toc":339},"minimark",[9,13,17,29,32,37,40,43,65,68,71,74,78,81,84,87,100,107,110,114,117,120,123,126,146,149,152,155,158,161,168,171,174,177,251,254,261,265,268,271,275,278,281,288,291,294,336],[10,11,5],"h1",{"id":12},"公開されているclaude-code用の図解スキルをクローンせずにデューデリジェンスした",[14,15,16],"p",{},"GitHub で図解の型を27種類そろえたリポジトリを見つけた。",[14,18,19,28],{},[20,21,27],"a",{"href":22,"target":23,"rel":24},"https://github.com/cathrynlavery/diagram-design","_blank",[25,26],"noopener","noreferrer","cathrynlavery/diagram-design"," は Claude Code 用のスキルとして配られていて、今使っている svg-diagram に取り込める部分があるはずだと思った。\n目当ては27の型を選べるところで、中身もおそらく SVG だろうと踏んだ。",[14,30,31],{},"ただし、そのまま持ち込む気にはならなかった。\n他人の書いたスキルは、Claude に読ませた時点でそのまま指示になる。\nそこで「いきなり git clone するな。実態をまず見て安全性を確認しろ。変なプロンプトが仕込まれている可能性もある」と条件を付けて、デューデリジェンスから始めさせた。",[33,34,36],"h2",{"id":35},"クローンせず隔離した場所で中身だけ見る","クローンせず、隔離した場所で中身だけ見る",[14,38,39],{},"GitHub API でファイル一覧を取り、固定 SHA のアーカイブを scratchpad へ展開させた。\nプロジェクトの外に置いて、実行はしない。読むだけ。",[14,41,42],{},"出てきた実態はこうだった。",[44,45,46,50,58],"ul",{},[47,48,49],"li",{},"実行されうるコードは Python 3本のみ。いずれも作者のメンテナンス用で、スキルとして読むだけなら1行も走らない",[47,51,52,53,57],{},"外部通信はアイコン取得スクリプトの ",[54,55,56],"code",{},"urllib"," だけ。取得先は既知の OSS リポジトリ",[47,59,60,61,64],{},"同梱されている89本の HTML と86本の SVG に、",[54,62,63],{},"\u003Cscript>"," もイベント属性も外部参照もゼロ",[14,66,67],{},"そのうえで、プロンプトインジェクションの隠蔽に使われる手口を228ファイルぶん機械的に洗わせた。\nゼロ幅文字、BiDi 上書き文字、Unicode タグ文字、私用領域、巨大な base64、コメント内の命令形。",[14,69,70],{},"コメント内の命令形だけが8件ヒットした。\n中身を開いたら、全部が図の部品名の注記だった。作例の図が「Claude Code でスキルを書くべきか判断する流れ」を題材にしていたため、検索語に引っかかっただけだった。",[14,72,73],{},"途中、検査スクリプトが cp932 で落ちた。\nWindows のコンソールが Unicode を吐けずに死ぬ、いつものやつだ。文字コードを指定して回し直させた。",[33,75,77],{"id":76},"悪意ある文字を探すだけでは検査項目が足りていなかった","悪意ある文字を探すだけでは、検査項目が足りていなかった",[14,79,80],{},"ここまでの検査で見ていたのは、実行コードと JavaScript と不可視文字である。\nところが、スキルでは Markdown の普通の文章そのものが実行指示になる。悪い文字を1つも含まないまま、危険な挙動を書かせることができる。",[14,82,83],{},"そこで全リファレンスを、ネットワーク、読み取り、書き込み、プロセス起動、承認ゲートの有無という観点で読み直させた。",[14,85,86],{},"該当は2本。どちらも正当な機能だが、丸ごと導入するなら挙動を許容するかどうかの判断が要る。",[44,88,89,97],{},[47,90,91,92,96],{},"オンボーディング用のリファレンスは、",[93,94,95],"strong",{},"インストール済みの他のスキルのディレクトリを glob して中身を全部読む","動線を持っていた。書き込みの前には差分提示と承認が3箇所に明記されている一方で、読み取り側のゲートは緩い",[47,98,99],{},"エクスポート用のリファレンスは Playwright を起動して PNG 化するが、「未導入なら手順を示して停止し、自動インストールはするな」「エクスポートは手動のみ」と明記されている",[14,101,102,103,106],{},"作者は権限の扱いに慎重だと読めた。\nとはいえ ",[54,104,105],{},"~/.claude/skills/"," には業務ルールが入っている。丸ごと導入するなら、他スキルを読みに行く動線ができることを承知したうえで決めることになる。",[14,108,109],{},"この時点で、取り込み方の方針が固まった。プラグインとして有効化するのではなく、必要な記述だけを手で書き写す。それなら動線は生まれない。",[33,111,113],{"id":112},"目当てだった27の型は思ったほど厚くなかった","目当てだった27の型は、思ったほど厚くなかった",[14,115,116],{},"型の数は確かに27だった。リポジトリの説明文はいまだに13型のままだが、これは v1 時代の記述で、プラグイン定義も実ファイルも27で揃っている。",[14,118,119],{},"ただし厚みが偏っていた。\n19〜30KB ある7本はすべてデータ基盤系で、データレイクや ETL や権限設計といった作者の実務領域とみられる。\n一方、フローチャートや ER 図や状態遷移といった汎用の型は1〜3KB しかない。レイアウト規約が3行、アンチパターンが3行、作例へのリンク。それだけ。",[14,121,122],{},"つまり「27型ぶんの図解ノウハウが手に入る」わけではなかった。\n濃い知見が入っているのは、日本語記事ではまず使わない領域のほうだった。",[14,124,125],{},"代わりに、期待していなかったところに使えるものがあった。型の下に敷かれた規律である。",[44,127,128,134,140],{},[47,129,130,133],{},[93,131,132],{},"コネクタの5原則","。ラベルの背後に置く不透明マスクは線に接触させない。同じ経路に2本を走らせない。端点でないボックスの背後を通さない",[47,135,136,139],{},[93,137,138],{},"複雑度の上限表","。ノードは最大9、矢印は最大12、強調色は最大2。超えたら概要図と詳細図に分割する",[47,141,142,145],{},[93,143,144],{},"色とフォントの逸脱を検出する lint","。既存の lint はテキストのはみ出しと折り返ししか見ておらず、パレット外の色は目視頼りだった",[14,147,148],{},"既存スキルは「1図1メッセージ」という質の規律は持っているが、量の上限を数値で決めていない。\n図が崩れる事故のうち、ラベルが線を隠す、線が重なる、線がボックスの裏を通るの3つは、毎回 Chrome で目視して人力で見つけていた。描く前に禁じられるなら、そのほうが早い。",[33,150,151],{"id":151},"既存の規定とぶつかる原則が1つあった",[14,153,154],{},"コネクタの原則のうち、「同じ辺に複数つなぐときは接続点を扇状に散らし、共有しない」という1本だけが、既存スキルの §7.2 と真正面からぶつかった。",[14,156,157],{},"既存は逆を勧めている。\n1つのボックスから上下に分岐するとき、共通の縦線でいったん合流させる T字結合だ。実装例まで載っているし、これまでに描いた図もそれで描かれている。",[14,159,160],{},"そのまま足すと、スキルの中に矛盾した必須命令が2つ並ぶ。次に図を描くとき、どちらに従えばいいのか決められなくなる。",[14,162,163,164,167],{},"この矛盾は、Codex にレビューさせて初めて出てきた。P0 が3件返ってきた。\nそのうち「プラグイン定義は13型のままだ」という指摘は、",[54,165,166],{},"raw.githubusercontent.com"," から取り直したら27型と書いてあり、Codex の誤りだった。\n残りは正当で、なかでも §7.2 との矛盾は完全な見落としだった。報告書の中核に関わる箇所だったので、そこだけ書き直させた。",[14,169,170],{},"裁き方は2つある。T字結合を明示的な例外として残すか、§7.2 を廃止して一本化するか。後者を選ぶと、過去に描いた SVG を描き直すことになる。",[33,172,173],{"id":173},"取り込まないと決めたもの",[14,175,176],{},"見た目のレイヤーは、丸ごと合わなかった。",[178,179,180,196],"table",{},[181,182,183],"thead",{},[184,185,186,190,193],"tr",{},[187,188,189],"th",{},"先方",[187,191,192],{},"既存",[187,194,195],{},"判断",[197,198,199,211,222,233],"tbody",{},[184,200,201,205,208],{},[202,203,204],"td",{},"鉄錆とコーラルのアクセント",[202,206,207],{},"グレー8段階＋印刷マゼンタ",[202,209,210],{},"既存を維持",[184,212,213,216,219],{},[202,214,215],{},"Geist / Instrument Serif",[202,217,218],{},"Noto Sans JP",[202,220,221],{},"Geist に日本語グリフが無い",[184,223,224,227,230],{},[202,225,226],{},"8px を常用",[202,228,229],{},"11以下は使わない",[202,231,232],{},"日本語は8pxでは読めない",[184,234,235,238,248],{},[202,236,237],{},"自己完結 HTML にインライン SVG",[202,239,240,243,244,247],{},[54,241,242],{},".svg"," 単体ファイルを ",[54,245,246],{},"\u003Cimg>"," で参照",[202,249,250],{},"既存は Nuxt Content で崩れた実績があっての規定",[14,252,253],{},"最後の納品形式が一番危ない。作例の HTML をそのまま流用すると、既存サイトでは表示が壊れる。",[14,255,256,257,260],{},"ついでに、リポジトリが謳う「自己完結」は厳密には嘘だった。\nテンプレートが Google Fonts を ",[54,258,259],{},"\u003Clink>"," で外から読んでいる。既存は日本語書体を使うので、そもそもこの指定を採用しない。実害は無い。",[33,262,264],{"id":263},"ライセンスの整理は一度出した結論を引っ込めた","ライセンスの整理は、一度出した結論を引っ込めた",[14,266,267],{},"最初は「自分の言葉で書き直すなら出典の注記だけでよい」と整理させていた。\nこれは撤回した。",[14,269,270],{},"今回足そうとしているのは、40〜60行におよぶ規則群と数値と配置の計算式である。翻訳や翻案は派生物とみなされうるし、分量としても MIT のいう「実質的な部分」に当たると読む余地がある。\nライセンス全文と著作権表示を置く場所を新設し、どの節が由来かを明示する形に変えた。",[33,272,274],{"id":273},"決裁フォームまで作って明日に回した","決裁フォームまで作って、明日に回した",[14,276,277],{},"判断が要る項目は4つになった。コネクタ規律の裁き方、複雑度の上限表を入れるか、色の lint を作るか、27型の選定表をどう扱うか。\nそれぞれ3択にして、推奨を1つ立てた決裁フォームを作らせた。あわせて図を1枚描かせ、SVG の機械検証は errors 0 / warnings 0 で通った。HTML を生成して Chrome で開かせた。",[14,279,280],{},"一度「決裁ボタンが描画されていない」と報告が上がってきたが、検証に使ったセレクタが違っていただけで、実際は4問とも3択と自由記述欄と推奨バッジ付きで出ていた。",[14,282,283,284,287],{},"そこで止めた。\nこれも明日やりたい、と決めて、積み残しとして ",[54,285,286],{},"/add-task"," で登録させた。決裁フォームは未回答のまま、サーバーは落として明日また立て直す。",[14,289,290],{},"登録のときにバックスラッシュのエスケープでスクリプトが壊れ、書き直してファイルから実行した。表示が化けたのはまた cp932 で、この日2回目だった。",[33,292,293],{"id":293},"明日やること",[44,295,298,308,314,320,330],{"className":296},[297],"contains-task-list",[47,299,302,307],{"className":300},[301],"task-list-item",[303,304],"input",{"disabled":305,"type":306},true,"checkbox"," 決裁フォームを立て直して4問に答える。T字結合をどう裁くかが本丸",[47,309,311,313],{"className":310},[301],[303,312],{"disabled":305,"type":306}," 決めた方針に沿って、コネクタ規律のうち既存に無い分を日本語で書き足す",[47,315,317,319],{"className":316},[301],[303,318],{"disabled":305,"type":306}," 複雑度の上限表を、日本語記事の図解に合う数値へ組み替えて追記する",[47,321,323,325,326,329],{"className":322},[301],[303,324],{"disabled":305,"type":306}," ",[54,327,328],{},"lint-svg-text.mjs"," に、パレット外の色と純黒と許可外フォントの3検査を足す",[47,331,333,335],{"className":332},[301],[303,334],{"disabled":305,"type":306}," 第三者ライセンスの記載場所を新設し、MIT 全文と著作権表示を置く",[14,337,338],{},"調べただけで、まだスキルには1行も足していない。\n安全だとは分かったが、取り込む中身は当初の見立てからずれた。型が欲しくて拾ってきたのに、手元に残ったのは線の引き方の規則だった。",{"title":340,"searchDepth":341,"depth":341,"links":342},"",2,[343,344,345,346,347,348,349,350],{"id":35,"depth":341,"text":36},{"id":76,"depth":341,"text":77},{"id":112,"depth":341,"text":113},{"id":151,"depth":341,"text":151},{"id":173,"depth":341,"text":173},{"id":263,"depth":341,"text":264},{"id":273,"depth":341,"text":274},{"id":293,"depth":341,"text":293},"dev",null,"GitHubで見つけた27種類の図解パターン集を、自分のsvg-diagramスキルに取り込めるか調べた。クローンせず固定SHAで隔離展開して静的検査し、隠し指示はゼロ。取り込む価値は型ではなくコネクタの規律にあった。","md",{},"/svg-diagram-pattern-library-due-diligence","claude-code-tools",false,"2026-08-09T00:00:00.000Z",{"title":5,"description":353},"make-diary","2026-08/2026-08-09/svg-diagram-pattern-library-due-diligence",[364,365,366,367,368],"Claude Code","SVG","スキル設計","セキュリティ","図解","xe8aJS7sE1XqQP1H3mRO0wMuAFqWMft0__qknm_RiKM",[],[372,376,379,383,387],{"title":373,"path":374,"publishedAt":375},"図解カタログ27型をグリッドで整列させ、手順をスキルへ戻すまで","/diagram-catalog-grid-alignment","2026-08-10T00:00:00.000Z",{"title":377,"path":378,"publishedAt":375},"2026年8月10日の開発日記 - 図解カタログ27型をグリッドに載せ直した","/2026-08-10-diary",{"title":380,"path":381,"publishedAt":382},"デロイトの351ページ資料は「7つの型」だけでできていた ─ note記事からSVG図解スキルに足りない要素を洗い出した","/svg-diagram-skill-deloitte-7-types-review","2026-07-16T00:00:00.000Z",{"title":384,"path":385,"publishedAt":386},"SVG図解を4:3比率から解放する ─ スキルに縦流しルールを追加して記事図解を一括刷新した","/svg-diagram-vertical-flow-rule","2026-07-04T00:00:00.000Z",{"title":388,"path":389,"publishedAt":390},"SVG-diagramスキルに ①②③ の中央寄せとカード下パディングのルールを追加","/svg-diagram-skill-numbering-padding","2026-07-01T00:00:00.000Z","https://log.eurekapu.com/og/blog/svg-diagram-pattern-library-due-diligence.png?v=2026-08-09T00%3A00%3A00.000Z&title=%E5%85%AC%E9%96%8B%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8BClaude%20Code%E7%94%A8%E3%81%AE%E5%9B%B3%E8%A7%A3%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E3%80%81%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%9B%E3%81%9A%E3%81%AB%E3%83%87%E3%83%A5%E3%83%BC%E3%83%87%E3%83%AA%E3%82%B8%E3%82%A7%E3%83%B3%E3%82%B9%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=65c2418bf40f6bbb",1786424503233]