baoyu-diagram

図表ジェネレーター

複数の図表タイプに対応した、プロフェッショナルな SVG 図表を作成します。出力は、スタイルとフォントを埋め込んだ、単一の自己完結型 .svg ファイルです。

対応する図表タイプ

タイプ	使用する場面	主な特徴
アーキテクチャ	システムのコンポーネントと関係	グループ化されたボックス、接続矢印、領域の境界
フローチャート	判断ロジック、プロセスの手順	ひし形の判断ノード、角丸の手順ボックス、方向を示すフロー
シーケンス	アクター間の時系列インタラクション	垂直のライフライン、水平のメッセージ、アクティベーションバー
構造図	クラス図、ER 図、組織図	区画化されたボックス、型付きの関係（継承、コンポジション）
マインドマップ	ブレインストーミング、トピックの探索	中央ノード、放射状の枝、有機的なレイアウト
タイムライン	時系列のイベント	水平／垂直の軸、イベントマーカー、期間の範囲
イラスト図	概念の説明、比較	自由なレイアウト、アイコン、注釈、視覚的な比喩
ステートマシン	状態遷移、ライフサイクル	角丸の状態ノード、ラベル付きの遷移、開始／終了マーカー
データフロー	データ変換パイプライン	プロセスバブル、データストア、外部エンティティ

デザインシステム

カラーパレット

コンポーネントのカテゴリを表すセマンティックカラー：

カテゴリ	塗り（rgba）	ストローク	用途
Primary	rgba(8, 51, 68, 0.4)	#22d3ee（シアン）	フロントエンド、ユーザー向け機能、入力
Secondary	rgba(6, 78, 59, 0.4)	#34d399（エメラルド）	バックエンド、サービス、処理
Tertiary	rgba(76, 29, 149, 0.4)	#a78bfa（バイオレット）	データベース、ストレージ、永続化
Accent	rgba(120, 53, 15, 0.3)	#fbbf24（アンバー）	クラウド、インフラストラクチャ、リージョン
Alert	rgba(136, 19, 55, 0.4)	#fb7185（ローズ）	セキュリティ、エラー、警告
Connector	rgba(251, 146, 60, 0.3)	#fb923c（オレンジ）	バス、キュー、ミドルウェア
Neutral	rgba(30, 41, 59, 0.5)	#94a3b8（スレート）	外部、汎用、不明
Highlight	rgba(59, 130, 246, 0.3)	#60a5fa（ブルー）	アクティブ状態、フォーカス、現在の手順

フローチャートとシーケンス図では、テクノロジーではなく役割（アクター、判断、プロセス）に応じて色を割り当てます。

タイポグラフィ

SVG に @font-face を埋め込むか、システムの等幅フォントにフォールバックします。

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>

役割別のフォントサイズ：

• タイトル： 16px、ウェイト 700
• コンポーネント名： 11-12px、ウェイト 600
• サブラベル／説明： 9px、ウェイト 400、色 #94a3b8
• 注釈／メモ： 8px、ウェイト 400
• 小さなラベル（矢印上）： 7-8px

主な視覚要素

背景： #0f172a（slate-900）に控えめなグリッドを追加します。

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

矢印マーカー（標準）：

<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>

矢印マーカー（色付き）—必要に応じて色ごとに作成します：

<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>

開いた矢印マーカー（非同期／戻りメッセージ用）：

<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>

SVG の構造とレイヤー

正しい重なり順にするため、次の順序で要素を描画します（SVG は背面から前面に向かって描画します）。

1. 背景の塗りつぶし＋グリッドパターン
2. 領域／グループの境界（破線の輪郭）
3. 接続矢印と線
4. 不透明なマスキング用の矩形（コンポーネントボックスと同じ位置、fill="#0f172a"）
5. コンポーネントボックス（半透明の塗りつぶし＋ストローク）
6. テキストラベル
7. 凡例（右下または下部の領域、すべての境界の外側）
8. タイトルブロック（左上）

不透明なマスキング用矩形の手法は不可欠です。これがないと、半透明のコンポーネントの塗りつぶし越しに矢印が見えてしまいます。

<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>

<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>

間隔のルール

重なりを防ぐため、以下を厳守してください。

• コンポーネントボックスの高さ： 50-70px（標準）、80-120px（大きい／複雑なもの）
• コンポーネント間の最小間隔： 垂直方向に40px、水平方向に30px
• 矢印ラベルの余白： いずれかのボックスの端から10px
• 領域境界のパディング： 内側の端から、含まれるコンポーネントの周囲に20px
• 凡例の配置： 図の最下部の要素から少なくとも20px下
• タイトルブロック： 左上から20px、図のコンテンツ領域の外側
• viewBox： すべてのコンテンツに加えて、すべての辺に30pxのパディングを確保できるように設定します

コンポーネントのパターン

標準ボックス（サービス／プロセス）：

<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">Name</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">description</text>

判断ダイヤモンド（フローチャート）：

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">Condition?</text>
</g>

データベースのシリンダー：

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>

領域境界：

<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>

セキュリティグループ：

<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / Security Group</text>

種類別のレイアウトガイダンス

このSKILL.mdファイルがあるディレクトリのパスを{baseDir}として特定します。レイアウトを開始する前に、図の種類に対応するリファレンスファイルを読みます。リファレンスファイルは{baseDir}/references/にあり、詳細なレイアウトアルゴリズムと例が記載されています。

アーキテクチャ図

→ {baseDir}/references/architecture.mdを読みます

要点：データフローは左から右、または上から下にします。関連するサービスは領域境界内にまとめます。レイヤー間ではバス／コネクターを使用します。データベースは下部または右側に配置します。

フローチャート

→ {baseDir}/references/flowchart.mdを読みます

要点：主要なフローは上から下にします。判断にはダイヤモンドを使い、出口の矢印にYes／Noのラベルを付けます。開始／終了には角丸長方形を使います。最短経路にはハイライト色を使用します。

シーケンス図

→ {baseDir}/references/sequence.mdを読みます

要点：アクターは上部にボックスで配置し、垂直の破線でライフラインを示します。メッセージは水平の矢印で示します（実線＝同期、破線＝戻り）。時間は下方向に進みます。アクティベーションバーで処理を示します。複雑な場合はメッセージに番号を付けます。

構造図

→ {baseDir}/references/structural.mdを読みます

要点：クラス図では、ボックスを区画に分けます（名前／属性／メソッド）。関係線は、塗りつぶされたダイヤモンド付きの実線＝コンポジション、白抜きのダイヤモンド付きの実線＝集約、破線の矢印＝依存、三角形付きの実線＝継承とします。

マインドマップ

中心となる概念から放射状に広がる自由形式のレイアウトにします。枝には有機的な曲線（3次ベジェ曲線を含む<path>）を使用します。パレットを使って枝の色に変化を付けます。中心ノードのフォントを大きくし、外側に進むほど小さくします。

タイムライン

水平または垂直の軸線を使用します。イベントマーカーは軸上に円またはダイヤモンドで配置します。説明テキストは重なりを避けるため、左右交互にずらして配置します。イベントの種類を分類するには色を使用します。

ステートマシン

状態は角丸長方形で示し、複合状態には二重枠を使用します。初期状態は塗りつぶされた円、最終状態は二重丸で示します。自己遷移には曲線の矢印を使用します。すべての遷移にevent [guard] / actionの形式でラベルを付けます。

出力ルール

1. Google Fontsのインポート以外に外部依存関係のない単一の.svgファイルを出力します
2. すべてのコンテンツに30pxのパディングを加えて収まるようにviewBoxを設定します。固定のwidth／height属性は設定しないでください（SVGがレスポンシブに拡大縮小されるようにします）
3. ルートの<svg>要素にxmlns="http://www.w3.org/2000/svg"を含めます
4. すべての<style>、<defs>、マーカー、パターンはSVGの先頭に配置します
5. 中央揃えのラベルにはtext-anchor="middle"を使用し、テキストがボックスからはみ出さないようにします
6. 中国語テキストのサポート： ラベルに漢字が含まれる場合は、font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif'を使用し、ボックスの幅を広げます。CJK文字は幅が広いためです
7. 保存場所： 入力がファイルの場合は{inputFileDir}/diagram/に保存します。それ以外の場合は{projectDir}/diagram/{topic-slug}/に保存します。ディレクトリが存在しない場合は作成します

スクリプト

このSKILL.mdファイルがあるディレクトリのパスを{baseDir}として特定します。スクリプトのパス：{baseDir}/scripts/main.ts。

${BUN_X}ランタイムを解決します。bunがインストールされている場合はbunを使用し、npxが利用可能な場合はnpx -y bunを使用します。どちらも利用できない場合は、bunのインストールを提案します。

SVG → @2x PNG

SVG を保存した後、@2x PNG に変換します。

${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]

オプション：

• -s, --scale <n> — 拡大率（デフォルト：2）
• -o, --output <path> — カスタム出力パス（デフォルト：<input>@2x.png）
• --json — JSON 出力

手順

1. ユーザーのリクエストから図の種類を特定します
2. その種類に対応するリファレンスファイルがあれば読み込みます
3. レイアウトを計画します：すべてのコンポーネントを列挙し、グループ化とフローの方向を決め、位置を計算します
4. 上記のレイヤー順序に従って SVG を記述します
5. 余白のルールを確認します — 重なりがないこと、凡例が境界の外側にあること、viewBox が十分な大きさであることを確認します
6. SVG ファイルを保存します
7. ${BUN_X} {baseDir}/scripts/main.ts <svg-path> を実行して @2x PNG を生成します
8. 両方のファイルをユーザーに提示します