1仕組みと動作原理
9種類のダイアグラムで単一の「デザインシステム」を共有：セマンティックカラーパレット（技術スタックではなくコンポーネント種別で色を割当）、フォントサイズ階層、ダークベース＋グリッド背景、3種の矢印マーカーにより、レイアウト前にシステムを定義。
skills/baoyu-diagram/SKILL.md
| Primary | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan) | Frontend, user-facing, inputs |
カラーパレットはセマンティクス（Primary/Secondary/Tertiary/Accent/Alert/Connector/Neutral/Highlight）ごとに分類され、フローチャートやシーケンス図では技術スタックではなく役割（actor/decision/process）で着色することが明記されています。
レイアウトでは「固定描画順序＋不透明マスク矩形」によりSVGの半透明重なり問題を解決：矢印を先に描き、同位置に不透明な塗りつぶし矩形を重ねて矢印を隠し、最後に半透明コンポーネント枠を配置。
skills/baoyu-diagram/SKILL.md
The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:
描画順序は8層に明確化：背景 → 領域境界 → 矢印線 → マスク矩形 → コンポーネント枠 → テキスト → 凡例 → タイトルブロック。これが完成品の清潔感を支える中核手法です。
主観的な美観判断を排除し、そのまま適用できる間隔・境界の厳格な数値ルールを採用：コンポーネント高さ50〜70px、垂直間隔≥40px、水平間隔≥30px、矢印ラベルは境界から10px、viewBox周囲に30pxの余白。
skills/baoyu-diagram/SKILL.md
- **Minimum gap between components:** 40px vertical, 30px horizontal
これらの数値によりモデルが間隔を「感覚」で測る必要がなくなり、重なり問題を検証可能なチェックリスト化（フロー第5ステップで全項目検証を要求）。
各図型ごとにレイアウトアルゴリズムの参考資料を用意し、描画前に確認：階層化、列・行の割り当て、列間隔、障害物回避のL字ルーティング、バスライン配置などに明確な手法が存在。
skills/baoyu-diagram/references/architecture.md
1. **Identify layers:** Group components by role (clients, gateways, services, data, infrastructure)
SKILL.mdでは図型ごとに「最初に読むべきファイル＋重要ポイント」を提示（architecture/flowchart/sequence/structuralの4ファイルはリポジトリ内にあり、残り5種は要点を提示）。
出力は単一ファイルで自己完結したSVG：固定の幅・高さを持たずviewBoxのみを指定し、スタイルとdefsはすべてインライン化してスケーラブルな埋め込みを容易化。
skills/baoyu-diagram/SKILL.md
2. Set `viewBox` to fit all content with 30px padding; do NOT set fixed `width`/`height` attributes (let the SVG scale responsively)
ルート要素のxmlns属性、<style>/<defs>/マーカーの最上部配置、テキストのはみ出しを防ぐtext-anchor中央揃えも義務付けています。
SVGを@2x PNGへ変換するスクリプトを同梱：viewBoxを解析して寸法を算出し、sharpでdensity=72*scaleにてレンダリングおよびリサイズを行ってPNGを出力。
skills/baoyu-diagram/scripts/main.ts
await sharp(svg, { density: 72 * opts.scale })
スクリプトは-s/--scale（デフォルト2）、-o/--output、--jsonをサポート。viewBoxやwidth/heightから寸法が推測できない場合は即座にエラーをスローします。
中国語組版への特別対応：文字幅が広い中国語文字を考慮し、フォントファミリーの切り替えとボックス幅の拡張を行うことでテキストのあふれを防止。
skills/baoyu-diagram/SKILL.md
**Chinese text support:** When labels contain Chinese characters, use `font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif'` and increase box widths — CJK characters are wider
「text-anchor=middleかつ枠内にテキストを収める」ルールと連動し、CJK環境における典型的なレイアウト崩れに直接対処しています。
明確な保存ルール：入力がファイルの場合は{inputFileDir}/diagram/、それ以外は{projectDir}/diagram/{topic-slug}/に保存し、ディレクトリがなければ自動作成。
skills/baoyu-diagram/SKILL.md
**Save location:** If the input is a file, save to `{inputFileDir}/diagram/`.
ワークフローの最後では、SVGファイルと@2x PNGファイルの両方を同時に納品することが義務付けられています。
2コア機能
019種類の図型に対応（アーキテクチャ/フローチャート/シーケンス/構造/マインドマップ/タイムライン/概念図/ステートマシン/データフロー）
02統一されたダークテーマデザインシステム（8種のセマンティックカラー＋フォント階層＋グリッド背景＋3種の矢印マーカー）
03再利用可能なコンポーネントテンプレート（標準ボックス/判定ひし形/DB円柱/領域境界/セキュリティグループ）
04図型別のレイアウトアルゴリズムリファレンス（階層化、列間隔、迂回ルーティング、バスライン）
05重なりとトリミングを防ぐ間隔/凡例/viewBoxセルフチェックリスト
06SVG → @2x PNG変換スクリプト（sharp採用、スケール/出力先/JSON出力を調整可能）
07CJKテキスト対応（フォントファミリー＋ボックス幅の拡張）
08固定の保存先ルール（{inputFileDir}/diagram/ または {projectDir}/diagram/{topic-slug}/）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | sharp（scripts/main.ts 动态 import，用于 SVG→PNG 光栅化） |
| cli | bun / npx（${BUN_X} 运行时） |
| network | Google Fonts（写入产物 SVG 的 @import，由查看端加载；非脚本外发） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプト・コマンドの実行: scripts/main.ts（bunで実行、sharpを用いてローカルSVGファイルをPNGにラスタライズ）
- 本地工作目录: ファイルの読み書きおよび成果物出力: <input>@2x.png（または -o 指定パス）を出力、必要に応じて diagram/ ディレクトリを作成
監査ノート： (a) ローカル処理のみで完結：エージェントがSVGファイルを直接書き込み、scripts/main.tsがsharpを用いてローカルSVGをPNGにラスタライズして出力ディレクトリを作成します。ネットワーク呼び出し、認証情報の取得、環境変数の読み取りはありません。(b) 成果物側の唯一の外部リンクは、SKILL.mdで必須とされているGoogle Fontsの@import（fonts.googleapis.com）です。判定基準「成果物内の外部リンクは評価対象外」に基づき、スクリプト実行時の外部通信には該当せず、閲覧者がSVGを開いてレンダリングするクライアント側でのみ取得されます。ローカルのsharp/librsvg処理ではリモートCSSを取得しません。(c) 留意すべきローカル影響：スクリプトは入力ファイルの横に<name>@2x.pngを生成し、規則に従ってdiagram/ディレクトリを作成します。SVGが外部ファイルとしてsharpパーサーに入力される点は、一般的な画像解析の範囲内です。先行例（canvas-design、writing-fragmentsなどのローカル読み書き系）と同様にblueと判定されます。
5二重目の独立検証
- [ok] 脚本仅本地行为 — main.ts 全文无 fetch/http/spawn/process.env；readFileSync(SVG) → sharp(density) → resize → png → toFile，另 mkdirSync 建目录。
- [ok] Google Fonts 外链的性质 — 两处命中均为写入产物 SVG 的 @import 文本与 Output Rules 自述 'no external dependencies except the Google Fonts import'；脚本自身不请求该域名，按批4 口径不判级，已写入 risks。
- [ok] 绘制顺序与遮罩矩形确为强制 — SKILL.md 明写 'The opaque masking rect trick is essential'，并给出 8 层绘制顺序与组件片段（遮罩 rect + 样式 rect 成对）。
- [ok] 间距规则为可检查数字 — 组件高 50-70px、垂直 ≥40px/水平 ≥30px、箭头标签 10px、区域边界内缩 20px、图例距最低元素 ≥20px、viewBox 30px padding，最后一并在流程第 5 步自检。
- [ok] 参考文件覆盖范围（是否夸大） — 4 份布局参考对应 architecture/flowchart/sequence/structural；思维导图/时间线/状态机/数据流/示意在图型表中给出要点但无专门文件，SKILL.md 用 'Read the reference file if one exists for that type' 表述，不构成夸大。
- [ok] meta 元数据 — GitHub API：MIT、25926 stars、pushed_at 2026-09-10T15:13:43Z；本地 HEAD 与 pin 1567581c26ec… 一致。
6結論
最適な用途： 技術ドキュメント、アーキテクチャレビュー、ブログ記事などで「編集可能・拡大縮小可能・デザインの統一された」図表を挿入したい場合に最適です。また、画像生成モデルのトークンやコストを抑えたいチームや、生成後にエンジニアが手動調整することを前提とするワークフローにも向いています。
不向きな用途： 写実的・手描き風イラストを求める用途には不向きです（baoyu-article-illustratorやcover-imageを推奨）。また、GraphvizやMermaidのような自動レイアウトエンジンによる決定論的配置が必要な超大規模トポロジ図には適していません（本スキルではモデルが座標を計算します）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload baoyu-diagram.tar.gz
sha256:
Option B · Copy Guide for Agente4806bf926545ede…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 1567581c26.