「アーキテクチャ図を描いて」とAIに頼むと、たいてい角丸の四角が均等に並んだ、どこの資料にも属さない見た目の図が返ってくる。Figmaを開けば30分が溶け、結局その図はスライドにも記事にも載らない。cathrynlavery/diagram-design（MIT・★14,223）は、この「AIに図を頼むと角丸ボックスになる」問題を、汎用の作図AIではなく 27種の型と機械強制されたスタイル規約 で解こうとしたエージェントスキルだ。Claude Code／Codex／Pi のいずれにもプラグインとして入る。導入や運用の全体像はClaude Code｜2026年版・インストールからCLAUDE.md・Hooks・本番運用までの実装手引きにまとめてある。
30秒でわかる diagram-design
・型が27種、それがコードで固定されている——リポジトリの references/type-*.md はちょうど27ファイルで、同梱の verify-semantic-motion.py も「7つの意味パターンが27種の視覚型へ独立にルーティングされる」ことを検査している。GitHubの説明文は29と書いているが、これは数え方の違いだ（後述）
・「自己完結」の境界を実測した——同梱HTML 103枚中、<img> は0件、CSS @import も0件、インラインscriptを含むのは4枚だけ。ただし103枚すべてが Google Fonts のCSSを1本だけ読む
・作法は文章でなくスクリプトで強制される——verify-geometry.py --all は103ファイルを検査して指摘0、lint-skin.py はパレット外の色・外部リソース・実行属性・アクセシビリティ契約まで見る。本稿ではCIと同じ引数で8本すべてを回した
・壊した図は6通りすべて差し戻された——スキルに同梱の self_check.py に、遠隔画像・script・onload属性・SVGの<title>削除・空の<desc>・類似ドメインのフォント配信元を注入したところ、6件すべてが exit 1 になった
・既存のMermaidは「変換」でなく「描き直し」される——当サイトの日本語フローチャートを同梱パーサに通すと、11ノード11エッジを解析したうえで「ノード数が上限9を超過」「style ディレクティブを5個破棄」と報告した
diagram-designとは——27種の型で「角丸ボックス問題」を解くエージェントスキル
diagram-design は2026年4月16日に作られたリポジトリで、8月13日時点でスター14,223・フォーク854・ウォッチャー57・オープンissue 7件、コントリビューターは10人以上いる。ライセンスはMIT、プラグインマニフェスト（.claude-plugin/plugin.json）のバージョンは 2.3.3 だ。作者は自身のブログとプロダクトのために図が必要で、そのたびに汎用AIから返る「サイトのどこにも馴染まない図」に嫌気がさして作った、とREADMEに書いている。
中身は驚くほど素朴で、スキル本体はMarkdownの集合体だ。skills/diagram-design/SKILL.md が振る舞いと選定ルールを定義し、references/ に型ごとの仕様書が並ぶ。図を実際に描くのはエージェント自身であり、テンプレートエンジンもレンダラも介在しない。だからこそ「どの型を使うか」「どの色をどこに使うか」を人間の言葉で厳密に決め、そのうえで機械で検査する、という構成になっている。
27種・28枚・36件・29——数え方で数字が変わる
型の数はソースを見れば確定できる。references/type-*.md は ちょうど27ファイルで、READMEも本文3か所すべてで「27 visual types」と書いている。さらに verify-semantic-motion.py は「7つの意味パターン（fan-inキュー、ポリシートレース、信頼境界など）が保持された27種の視覚型へ独立にルーティングされる」ことをテストとして検査しており、27はコードで固定された数字だ。
一方で、GitHubのサイドバーに出る説明文は「29 editorial diagram types」と書いている。これは誤りというより 数え方の差 だ。READMEのギャラリー表を数えると太字ラベルは28個あり、クアドラントの派生である「Consultant 2×2」が独立したカードとして並んでいる。同梱ギャラリー assets/index.html の項目は36件で、縦組みの High-Level、ターミナル装飾版のLoop、draw.io/Mermaid取り込み例、モーション例までが1件ずつ数えられている。以下が本稿での数え方だ。
| 数え方 | 数 | 何を数えたか |
|---|---|---|
references/type-*.md |
27 | 型ごとの仕様書。スキルが「型」として扱う単位 |
| README本文の記述 | 27 | 本文3か所すべてで一致 |
| READMEギャラリー表の太字ラベル | 28 | 派生の Consultant 2×2 が独立カードとして並ぶ |
assets/index.html のギャラリー項目 |
36 | 縦組み・ターミナル装飾・取り込み例・モーション例を個別に数える |
| GitHubリポジトリの説明文 | 29 | 本稿執筆時点。リリースタグは未作成でひも付け先が無い |
読者として押さえるべきは「27が実装上の単位」という一点で、残りは表示単位の違いにすぎない。なお references/ には型のほかに注釈・アイコン・手描き風・ターミナル装飾の primitive が4種 あり、これらは型を増やさず既存の型に重ねる装飾として扱われる。
型を増やさずに「振る舞い」を描く仕組み
27という数を保つための工夫が、v2.3で入った 意味パターン（semantic patterns） だ。ファンインするキューとボトルネック、繰り返されるステージ枠、非構造入力の変換、対になるポリシートレース、安全な舗装道路（paved road）、ガバナンスのカタログ、多層の防御——この7つは「振る舞い」の記述であって、レイアウトの型ではない。各パターンは発火条件・使う部品・要素数の予算・アンチパターン・静止時のフォールバック・最も近い視覚型 を semantic-patterns.md に定義しており、キューを描きたいときに「キュー型」を新設せず既存の型へ寄せる。verify-semantic-motion.py が検査しているのは、まさにこの「7パターンが27型へ独立にルーティングされる」という関係の維持だ。
動きについても同じ考え方で、モーションは型を増やさない。none／reveal／step／loop の4モードがあり、既定は none。完全な静止first frameを必ず持ち、タイミングは決定論的で、OS側で「視差効果を減らす」が有効なら静止フレームだけを見せて再生コントロールを無効化する。モーションHTMLに許されるスクリプトは template-motion.html の正規コントローラのみで、書き換えたスクリプト・リモート資産・CSSの取り込み・実行可能属性は拒否される。「動く図」を認めつつ、それが単一ファイル安全性の抜け穴にならないよう閉じた形だ。
インストールと使い方——Claude Code / Codex / Pi への導入手順
配布は3系統のプラグインマーケットプレース経由で、いずれも skills/diagram-design/ という同じディレクトリを読む。単一エージェント向けのzip配布ではないため、更新の追随の仕方が系統ごとに違う。
# Claude Code（マーケットプレース追加 → インストール）
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
# Codex
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
# Pi（Gitからの非固定インストール）
pi install https://github.com/cathrynlavery/diagram-design
導入時にひとつ注意点がある。Claude Codeはサードパーティ製マーケットプレースの自動更新を既定で無効にしているため、/plugin を開いて Marketplaces → diagram-design → Enable auto-update を一度だけ有効化しないと、更新が降ってこない。Piにはそもそも自動更新の仕組みが無く、pi update --extensions を手で叩く前提だとREADMEが明記している。
インストール後は自然文で頼めばよい。「フロントエンド・バックエンド・DB・Redisキャッシュのアーキテクチャ図を作って」「Q2のプロジェクトをインパクト×工数のクアドラントで」といった依頼から、エージェントが型を選んでHTMLを書き出す。スタイルガイドを自分で編集したい場合は managed install ではなくクローンしてシンボリックリンクを張る「editable install」が案内されている——パッケージ更新で references/style-guide.md が上書きされうるためだ。
最初の1枚を出す前に走る「初回ゲート」
このスキルには、ブランド設定が既定のままの状態で図をプロジェクトに書き込ませない仕掛けがある。新しいプロジェクトでの初回利用時に style-guide.md がカスタマイズ済みかを確認し、既定のままなら「オンボーディングを走らせるか、トークンを手で貼るか、既定のまま進めるか」を聞いて一時停止する。既定配色はジェットブラック＋アトミックタンジェリンで、そのままスクリーンショットしても見られる水準にはなっている。
「自己完結HTML」はどこまで自己完結か——同梱103枚を実測した
READMEは「ビルド手順も、JavaScriptも、外部画像への依存も無い」と書いている。この主張はどこまで成り立つのか、同梱アセット103枚を機械的に数えた。
結果はこうだ。<img> タグは 103枚すべてで0件、CSSの @import も0件。インラインscriptを含むのは4枚だけで、内訳はギャラリーの index.html、モーション例2枚、モーションテンプレート1枚——つまり 静止図99枚はscriptを1行も持たない。READMEの「既定は none、通常の出力は静止でscriptを含まない」という記述と実測が一致する。
ただし外部通信はゼロではない。103枚すべてが https://fonts.googleapis.com/css2?... を1本読み込む。READMEの原文は “no build step, JavaScript, or external image dependency” と書いており、”image” の一語が効いている。書体だけは配信元から取る設計で、README自身もSVGエクスポート時にGoogle Fontsを注入すると明記しているから、隠された依存ではない。
実務上の判断材料になるのはフォールバックの有無だ。CSS変数の定義を見ると、--font-sans は 'Geist', system-ui, sans-serif、--font-serif は 'Instrument Serif', serif、--font-mono は 'Geist Mono', ui-monospace, monospace と並んでいる。つまり オフラインや外部通信を遮断した環境では、書体が差し替わるだけで版面は崩れない——壊れるのではなく劣化する。社内プロキシ配下やエアギャップ環境で使う場合、書体の見た目が変わることだけ織り込めばよい。
そしてこの許可は厳格に検査されている。lint-skin.py は外部リソースを原則すべて拒否し、<link> については ホスト名が fonts.googleapis.com と完全一致するかを見る。後述の検証で fonts.googleapis.com.evil.example という類似ドメインに差し替えたところ、きちんと差し戻された。
| 項目 | 実測値（103枚） | 何を意味するか |
|---|---|---|
<img> タグ |
0件 | 外部・ローカルとも画像ファイルに依存しない。図はすべてインラインSVG |
CSS @import |
0件 | スタイルシートの連鎖読み込みが無い |
インライン <script> |
4枚のみ | 静止99枚はscriptゼロ。モーションは明示的なopt-in |
| 外部ホスト | 1つ（fonts.googleapis.com） |
書体のみ。ホスト名完全一致でlintが検査 |
| 書体フォールバック | 全変数にあり | オフラインでは劣化するが破綻しない |
| 最小テンプレのサイズ | 3,253バイト | template.html。実例は12,089〜19,863バイト |
品質規約は文章でなくCIで強制されている——8本のゲートを回した
この種の「デザインシステム系スキル」で気になるのは、規約が README のポエムで終わっていないかだ。diagram-design には実行可能な検証スクリプトが scripts/ に並び、GitHub Actions の ci.yml から呼ばれている。CIと同じ引数でローカルに再実行した結果が以下だ。
git clone --depth 1 https://github.com/cathrynlavery/diagram-design.git
cd diagram-design
python3 scripts/verify-docs-sync.py # 説明文・ギャラリー到達性・READMEツリーの同期
python3 scripts/verify-geometry.py --all # 4pxグリッド等の幾何検査
python3 scripts/lint-skin.py --all --baseline # 配色・外部資源・a11y契約
python3 scripts/verify-motion.py --shipped # 出荷済みモーションHTML
python3 scripts/verify-semantic-motion.py # 意味パターン→型のルーティング
python3 scripts/verify-mermaid-import.py # Mermaid取り込みの文法・上限・異常系
python3 scripts/verify-drawio-import.py # draw.io取り込み（DTD拒否含む）
python3 scripts/verify-sequence-oauth.py # シーケンス型のALT構造
8本すべてが合格した。特に verify-geometry.py --all は103ファイルを検査して指摘0で、幾何の一貫性がコードで保たれている。verify-mermaid-import.py は「敵対的なラベルが不活性なまま扱われること」「文書化されたexit 2の経路がすべて発火すること」まで確認しており、テストの粒度がかなり細かい。
baselineを外すと46件出る——それは欠陥ではない
ここでひとつ、CIの緑だけを見ていると気づかない事実がある。lint-skin.py を --baseline を外して回すと、終了コードは1になり46件の指摘が出る。
・指摘の内訳は「スタイルガイドのパレットに無い色」34件、「許可色から派生していない色」10件、その他2件
・指摘が出たのは11ファイル
・baselineファイル（scripts/lint-skin-baseline.txt）には20ファイル名が列挙されており、現時点で指摘の無い9ファイルも含まれている
つまりCIは「既知の逸脱を明示的に免除したうえで、それ以外を厳格に見る」運用だ。これはlintのbaseline運用として教科書的なやり方であって欠陥ではない。ただし 「全アセットがスタイルガイドのトークンだけで塗られている」とまでは言えない——濃淡付きの rgba() や、ダークテーマ側の一部の色が免除リストに載っている。自分のプロジェクトに取り込むときは、baselineを外した状態を一度見ておくと実態がつかめる。
lint-skin が禁じているもの（ソースのメッセージ文字列から抽出）
配色以外にも、単一ファイル安全性とアクセシビリティの契約が同じlintで守られている。純黒 rgb(0,0,0) の使用、CSS @import、外部HTTP(S)の <link>／src、フラグメント以外の CSS url()、<svg> 上の実行可能属性はいずれも拒否される。加えて <svg> は先頭子要素として非空の <title> と <desc> を持ち、aria-labelledby がその順で両IDを指し、IDは図ごとに接頭辞を持つこと（id="title" のような裸のIDは不可）が要求される。モーションHTMLのコントローラは template-motion.html と完全一致でなければ通らない。
同梱 self_check.py に壊した図を6通り食わせた
上のゲート群はリポジトリへのコントリビューション用だが、インストール先のエージェントが自分の出力を検査するための縮小版が skills/diagram-design/scripts/self_check.py として同梱されている。ヘルプにも「アクセシブルSVG契約、単一ファイル安全性ルール、モーション契約を検査する。リポジトリ側のゲートの蒸留版であり、コントリビューションの権威は依然そちら」と書かれている。
主張が本物かを確かめるには、正常系ではなく異常系を投げるのが早い。無改変の example-architecture.html を対照群として、6通りの改ざんを作って食わせた。
cp skills/diagram-design/assets/example-architecture.html clean.html
python3 skills/diagram-design/scripts/self_check.py clean.html # → OK / exit 0
# 遠隔画像を注入
sed 's|<svg |<img src="https://evil.example.com/t.png"><svg |' clean.html > a.html
python3 skills/diagram-design/scripts/self_check.py a.html # → FAIL / exit 1
結果は 6件すべて exit 1、対照群のみ exit 0 だった。返ってくるメッセージも具体的だ。
| 注入した改ざん | self_check の応答 |
|---|---|
遠隔 <img> を挿入 |
remote reference on <img>: https://evil.example.com/... |
インライン <script> を追加 |
script 1 must carry only the canonical data-diagram-controls attribute |
<svg> に onload を付与 |
executable attribute onload on <svg> |
SVGの <title> を削除 |
svg 1 title must be its first child ほか3件 |
<desc> を空にする |
svg 1 needs non-empty title and desc |
フォント配信元を fonts.googleapis.com.evil.example に |
remote stylesheet is not the approved Google Fonts /css2 URL |
最後の1件が示すとおり、許可ホストの判定は前方一致や部分一致ではなくホスト名の完全一致で、類似ドメインでは抜けられない。
なお検証の途中で一度誤読しかけた点を書き添えておく。最初にHTMLの <head> 側の <title> を消したときは exit 0 で通った。これは見落としではなく 正しい挙動 で、self_check が守っているのはSVGのアクセシブル名（<svg> 直下の <title id="...">）であってHTMLのページタイトルではない。SVG側を消した2回目は、期待どおり4件の指摘とともに落ちた。異常系のテストは「何を守る道具か」を取り違えると簡単に偽の発見を作るという例でもある。
Mermaid・draw.io の取り込み——当サイトの日本語フローチャートで試した
既存資産の扱いは「変換」ではなく「描き直し」だ。READMEの表現を借りれば、引き継がれるのは コンポーネント・関係・グルーピング・方向 だけで、元の座標・配色・フォント・draw.ioの斜め線・Mermaidの自動レイアウトは捨てられる。
出力の当て先は4つのダイヤルで決める。フォーマット（html／svg／png／html+png）、サイズ（doc-inline〜slide-16x9〜print-a4-landscape など9種、viewBoxだけでなく文字サイズのランプも変わる）、詳細度（faithful ≤24ノード／balanced ≤12／simplified ≤7）、そして読み手（engineer／mixed／executive——ノード数ではなく語彙が変わり、Auth Service / JWT · RS256 · :8443 が Sign-in になる）。取り込みの最後には、何を統合し何を落としたかの「忠実度台帳」が出る。
取り込みの前段だけはエージェント任せではなく、skills/diagram-design/scripts/mermaid_extract.py という実行可能なパーサになっている。日本語で本当に動くのかを確かめるため、当サイトの既存記事に載っている日本語のフローチャートを投げてみた。全角の判断ノード、<br/> による改行、style ... fill:#4CAF50 の色指定を含む実物だ。
python3 skills/diagram-design/scripts/mermaid_extract.py jp-decision.mmd
# 1 diagram(s): [0] flowchart (11n/11e)
# - shapes: {'rect': 7, 'rhombus': 4}
# - budget: nodes OVER (max 9), edges ok (max 12)
# - discarded: 5 style directives, 0 click handlers
読み取れることが4つある。第一に、日本語ラベルはそのまま保持され、<br/> は digest 上では ⏎ として表示される（--json で吐かせたIR側では \n のまま保持されており、情報は落ちていない）。第二に、rect 7個・rhombus 4個という形状の内訳から判断ノードを正しく識別している。第三に、budget: nodes OVER (max 9) ——描き直す前の段階で「この型の推奨ノード上限を超えている」と警告する。第四に、discarded: 5 style directives として、元のMermaidの色指定を5個捨てたと明示する。捨てたことを黙らないのがこの設計の特徴だ。
さらに digest には「ハブ（注目候補）」「入口ノード」「終端ノード」まで計算されて出る。当サイトの図では「チームで運用するか？」が次数4で最大のハブと判定された。描き直したときにアクセント色を当てる先の候補、という意味づけだ。draw.io側も .drawio / .drawio.xml / .drawio.png（埋め込み図）/ .drawio.svg と圧縮ペイロードに対応し、verify-drawio-import.py はDTD拒否・PNG境界・資源上限まで検査していた。
キュー・ポリシートレース・信頼境界など"] B -->|"いいえ"| D["視覚型27種から直接選ぶ"] C --> D D --> E{"元ソースがあるか"} E -->|"draw.io / Mermaid"| F["描き直し
4つのダイヤルで当て先を決める"] E -->|"自然文のみ"| G["新規作図"] F --> H["自己完結HTMLを書き出す"] G --> H H --> I{"モーションを明示要求?"} I -->|"いいえ・既定"| J["静止HTML
scriptなし"] I -->|"はい"| K["template-motion.html の
正規コントローラのみ許可"] J --> L["self_check.py で自己検査"] K --> L
コンテキスト常駐コストとブランド取り込み——37KBは常に載るのか
エージェントスキルを常用するうえで無視できないのが、コンテキストにどれだけ載り続けるかだ。SKILL.md は37,408バイトあり、references/ 全体は429,282バイト（約419KB）ある。これが毎回丸ごと載るなら、図を描かないセッションにとってはかなりの負担になる。
実測すると、READMEが言う「プログレッシブ・ディスクロージャー」は3段のはしごになっている。
| 段 | 何が載るか | 実測サイズ | いつ |
|---|---|---|---|
| 1段目 | SKILL.md frontmatter の name + description |
約500バイト | 常時（スキル一覧として） |
| 2段目 | SKILL.md 本体 |
37,408バイト | 作図系の依頼で起動したとき |
| 3段目 | 選ばれた型の references/type-*.md 1本 |
中央値2,790バイト（最小991／最大29,984） | 型が確定したとき |
READMEの表も「通常の静止作図なら SKILL.md ＋その型の参照1本だけ」と書いており、実測と一致する。参照ディレクトリ全体が載ることはまず無い——最大の primitive-icons.md は単体で106,768バイトあり、これは参照全体の約4分の1を占めるが、アイコンを明示的に使うときにしか読まれない。したがって 「37KBが常時載る」ではなく「作図依頼のときに37KB＋数KB」 が正しい理解になる。エージェントスキルの常駐コストの測り方としては、Claude Skillsとは｜「スキル=フォルダ」の仕組みと作り方・使い方を徹底解説で扱った「スキル＝フォルダ」の構造をそのまま当てはめればよい。
サイトURLからブランドトークンを引く
もうひとつの主軸がオンボーディングだ。「onboard diagram-design to https://yoursite.com」と頼むと、エージェントがトップページを取得し、支配的なパレットとフォントスタックを抽出して、意味的な役割へ割り当てる。<body> の背景が paper、主要な文字色が ink、副次テキストが muted、カード類が paper-2、最も使われているブランド色（CTA・リンク・見出し）が accent。フォントは <h1> が title、<body> が node-name、<code> が sublabel になる。
書き込みの前に ink と paper のコントラストをWCAG AAで検査 し、9〜12pxという図中の実サイズで基準を割る色があれば、調整値を提案して理由を説明する。適用後は「忠実度レシート」——サンプリングしたURL、色の役割の対応、フォントファミリーとウェイト、フォントの配信元URL、フォールバックの有無——が出る。取得できなかったものを黙って汎用システムフォントに差し替えず、明示する設計だ。以降の図は #eb6c36 のような生の値ではなく accent という役割名を参照するため、スタイルガイドの表を書き換えるだけで27種すべてに反映される。
類似ツールとの比較と、diagram-design導入前に知っておく制約
作図系のClaude Codeスキルは既にいくつもあるが、入力と出力の向きで整理すると棲み分けがはっきりする。
| diagram-design | Archify | oh-my-mermaid | 素のMermaid | |
|---|---|---|---|---|
| 主な入力 | 自然文／draw.io／Mermaid | 自然文 | 既存コードベース | 手書きのDSL |
| 出力 | 自己完結HTML＋インラインSVG（PNG/SVG書き出し可） | 自己完結HTML（PNG/JPEG/WebP/SVG） | .mmd ＋ Markdown文書 |
描画結果 |
| 型の数 | 27種（＋primitive 4種） | 5種 | Mermaidの図種に準拠 | Mermaidの図種に準拠 |
| ブランド適用 | サイトURLからトークン抽出＋WCAG AA検査 | ダーク/ライト自動切替 | テーマ設定に依存 | テーマ設定に依存 |
| 規約の強制 | CI 8本＋同梱 self_check.py | — | — | — |
| 配布 | Claude Code／Codex／Pi のマーケットプレース | zip配布 | npm ＋ 各ツールへの setup | ライブラリ |
| 向いている用途 | 公開する記事・スライド・提案書の版面 | 手早く技術図を1枚 | コードベースの構造文書化 | 開発内のやり取り |
要するに、oh-my-mermaid は「コードから図を起こす」、Archify は「言葉から手早く図を出す」、diagram-design は 「出した図をそのまま公開できる版面にする」 ところに重心がある。当サイトのようにMermaidを本文へ直接埋め込む運用なら素のMermaidで足りるが、スライドや提案書に貼る図を毎回Figmaで整えているなら、置き換えの候補になる。
導入前に把握しておくべき制約（すべて実測・一次資料ベース）
・PNG書き出しにはPlaywrightが要る——HTML/SVGはそのままだが、PNGラスタライズは pip install playwright && playwright install chromium の一度きりのセットアップが前提。既定倍率は2×
・書き出したSVG/PNGは図だけ——-full 版の編集カードやヘッダは含まれない。編集レイアウトごと欲しい場合はブラウザの全ページスクリーンショットかPDF出力を使う
・ノード数の上限が実質の制約——faithful でも24ノード、balanced は12、simplified は7。大きな既存図はどこかを必ず落とす（何を落としたかは台帳に出る）
・リリースタグが未作成——バージョンは plugin.json の 2.3.3 のみで、GitHub Releases は空。特定版に固定したい場合はコミットSHAで留める必要がある
・Cowork（組織マーケットプレース）はミラーが要る——組織のGitHubマーケットプレースはprivate/internalリポジトリを要求するため、いったん自組織へミラーしてから接続する
・baselineを外すと配色の逸脱が46件見える——CIは緑だが、既知の免除が20ファイル分ある
図の品質が「そのまま公開できるか」で決まる以上、最後に効くのは型の数よりも 規約が機械で守られているか だ。diagram-design の面白さは、27という数字そのものより、その27を崩さないための検査が実際に走るコードとして同梱されている点にある。少なくとも本稿で試した範囲では、その主張は実行して確かめられた。
参照ソース
・cathrynlavery/diagram-design — GitHubリポジトリ（README・SKILL.md・scripts/・skills/diagram-design/）
・diagram-design 公式ギャラリー（cathrynlavery.github.io/diagram-design）
・Agent Skills — Anthropic 公式ドキュメント
・本稿の実測: 2026-08-14 時点の main（plugin.json v2.3.3 相当）を --depth 1 でクローンし、.github/workflows/ci.yml と同じ引数で検証スクリプトを実行。同梱アセット103枚の集計、self_check.py への異常系入力6件、mermaid_extract.py への日本語Mermaid入力はいずれも本稿のために実施した
