tech-diagram

技術図ジェネレーター

CSS とインライン SVG を埋め込んだ、単独で動作する HTML ファイルとして、技術アーキテクチャ図やシステムの図解を生成します。外部依存関係はありません。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/tech-diagram ~/.claude/skills/

主な機能

• パイプラインフロー図（データパイプライン、CI/CD、ETL）
• レイヤー／スタック図（技術スタック、OSI モデル、インフラストラクチャ）
• コンポーネント図（マイクロサービス、システムアーキテクチャ）
• ビフォー／アフターの分割比較
• タイムライン図（ロードマップ、移行フェーズ）
• 指標コールアウトの行（KPI の概要）

デザインシステム

カラートークン

:root {
  /* Dark mode (default canvas) */
  --bg-deep: #0d1117;
  --bg-surface: #161b22;
  --bg-elevated: #21262d;
  --border-subtle: rgba(240, 246, 252, 0.1);
  --text-bright: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;

  /* Accent palette */
  --accent-blue: #58a6ff;
  --accent-green: #3fb950;
  --accent-purple: #bc8cff;
  --accent-orange: #d29922;
  --accent-red: #f85149;
  --accent-cyan: #39d2c0;
  --accent-pink: #f778ba;

  /* Light mode (optional, for embedded diagrams) */
  --bg-light: #ffffff;
  --bg-light-surface: #f6f8fa;
  --text-light-primary: #1f2328;
  --text-light-secondary: #656d76;
}

カラーのルール

• すべての図でダークモードをデフォルトにします
• パイプラインの各ステージまたはレイヤーには、異なるアクセントカラーを使用します
• ラベルと注釈には --text-secondary を使用します
• 接続線と枠線には --border-subtle を使用します
• セマンティックカラー：緑＝正常／成功、赤＝エラー／アラート、オレンジ＝警告

タイポグラフィ

役割	フォント	太さ	サイズ
図のタイトル	system-ui	600	28-32px
セクション／ステージのラベル	system-ui	600	16-18px
説明文	system-ui	400	13-14px
注釈	monospace	400	12px
指標の値	monospace	700	36-48px

キャンバス

Width:  1200px (default, responsive down to 800px)
Height: auto (content-driven)
Padding: 48px

コンポーネントライブラリ

パイプラインフロー

ステージを矢印でつないだ、水平または垂直のシーケンスです。各ステージにはアイコン領域、ラベル、説明があります。

レイヤー／スタック図

ラベル付きのレイヤーを垂直に積み重ねた図で、説明を追加することもできます。上部が最も抽象度の高いレイヤー、下部が最も低いレイヤーです。

コンポーネント図

接続線でつないだサービスボックスを、グリッドまたは自由形式で配置します。各コンポーネントには名前、技術、ステータスを表示します。

ビフォー／アフターの分割

垂直の仕切り線で区切った、左右並列の比較です。左側が変更前の状態、右側が変更後の状態です。

タイムライン

日付、説明、ステータスインジケーターを伴う、水平または垂直のマイルストーンのシーケンスです。

指標コールアウトの行

大きな数値、ラベル、任意の傾向インジケーターを含む KPI カードを横一列に並べます。

主な原則

1. 図ごとにコンセプトは1つ。 2つの図が必要なら、ファイルも2つ作成します。
2. すべてにラベルを付ける。 すべてのボックス、矢印、領域にラベルを付けます。
3. 間隔を統一する。 絶対配置ではなく、CSS グリッドまたはフレックスボックスを使用します。
4. 外部依存関係をなくす。 CSS は <style> に、アイコンはインライン SVG に記述し、すべてを埋め込みます。
5. 印刷に配慮する。 明るい背景に切り替える @media print を含めます。

避けるべきパターン

• ラスター画像（PNG/JPG）は使用しないでください。すべてのアイコンにインライン SVG を使用します
• 外部 CSS／JS は使用しないでください。すべて埋め込みます
• 主な塗りつぶしにグラデーションは使用しないでください。控えめな枠線と単色を使用します
• 1行に配置する項目は8つまでにします。折り返すか、グリッドを使用します
• 情報を伝えない装飾要素は使用しないでください

ファイルの規則

• ファイル名： {project}-{diagram-type}.html（例：pipeline-architecture.html）
• 単一ファイル： すべての CSS を <style> にインラインで記述し、すべての SVG をインラインにします
• レスポンシブ： 幅 800～1400px の範囲で動作します

HTML／CSS のパターンと詳細な例については、REFERENCE.md を参照してください。